@arcgis/charts-components 5.2.0-next.98 → 6.0.0-next.0

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

@@ -1,33 +1,33 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as u } from "../../chunks/runtime.js";
-import { css as C, html as v } from "lit";
+import { css as v, html as C } from "lit";
 import { i as f, m, U as g, s as S } from "../../chunks/chart-ui-utils.js";
 import { u as y } from "../../chunks/useT9n.js";
 import { createRef as a, ref as o } from "lit/directives/ref.js";
 import { LitElement as $, createEvent as s, safeClassMap as l, nothing as c } from "@arcgis/lumina";
-import { e as b } from "../../chunks/popover-ui-utils.js";
-import { r as E } from "../../chunks/index3.js";
+import { e as I } from "../../chunks/popover-ui-utils.js";
+import { r as b } from "../../chunks/index3.js";
 import { R as i } from "../../chunks/rest-js-object-literals.js";
 const n = {
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   panelChildrenContainer: "panel-children-container"
-}, w = C`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}.panel-children-container{display:flex}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.panel-children-container{padding:0 1rem;margin-top:1rem}`;
-class x extends $ {
+}, E = v`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}.panel-children-container{display:flex}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.panel-children-container{padding:0 1rem;margin-top:1rem}`;
+class w extends $ {
   constructor() {
-    super(...arguments), this._messages = y(), this.popoverElement = a(), this.lineWidthInputElement = a(), this.lineStyleDropdownElement = a(), this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
+    super(...arguments), this._messages = y(), this.popoverElement = a(), this.lineWidthInputElement = a(), this.lineStyleDropdownElement = a(), this.isLineWidthInvalid = !1, this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
   }
   static {
-    this.properties = { messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedSeriesIndex: 9, selectedLineWidth: 9, placement: 1, open: 5 };
+    this.properties = { isLineWidthInvalid: 16, messageOverrides: 0, referenceElement: 0, selectedName: 1, selectedColor: 0, selectedLineStyle: 1, selectedSeriesIndex: 9, selectedLineWidth: 9, placement: 1, open: 5 };
   }
   static {
-    this.styles = w;
+    this.styles = E;
   }
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
   updated() {
-    b(this.popoverElement.value, this.open);
+    I(this.popoverElement.value, this.open);
   }
   seriesNameChange(e) {
     const t = e.target.value;
@@ -39,7 +39,7 @@ class x extends $ {
     });
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [r, d, h] = t, p = E * 255;
+    const t = e instanceof CustomEvent ? e.detail : e, [r, d, h] = t, p = b * 255;
     this.selectedColor = [r, d, h, p], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [r, d, h, p] });
   }
   lineStyleChange() {
@@ -48,13 +48,13 @@ class x extends $ {
   }
   lineWidthChange() {
     const e = Number.parseInt(this.lineWidthInputElement.value?.value ?? "");
-    this.lineWidthInputElement.value?.value !== void 0 && f(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
+    this.lineWidthInputElement.value?.value !== void 0 && f(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), this.isLineWidthInvalid = !1, m({
       inputElement: this.lineWidthInputElement.value,
       status: g.IDLE
-    })) : this.lineWidthInputElement.value && m({
+    })) : this.lineWidthInputElement.value && (this.isLineWidthInvalid = !0, m({
       inputElement: this.lineWidthInputElement.value,
       status: g.INVALID
-    });
+    }));
   }
   getSelectedLineStyleInfo() {
     let e, t;
@@ -74,10 +74,10 @@ class x extends $ {
   }
   render() {
     const e = this.selectedColor;
-    return v`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${o(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${l(n.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${l(n.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${o(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${l(n.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? c}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? c}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? c}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${S(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${o(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${l(n.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return C`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${o(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${l(n.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${l(n.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${o(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${l(n.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? c}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? c}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? c}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${S(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${o(this.lineWidthInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidLineWidth} .isInvalid=${this.isLineWidthInvalid}></arcgis-charts-config-invalid-input-message></calcite-label></div><div class=${l(n.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
-u("arcgis-charts-config-line-chart-series-popover", x);
+u("arcgis-charts-config-line-chart-series-popover", w);
 export {
-  x as ArcgisChartsConfigLineChartSeriesPopover
+  w as ArcgisChartsConfigLineChartSeriesPopover
 };

package/dist/components/arcgis-charts-config-line-chart-series-popover/index.js

@@ -6,5 +6,6 @@ import "@esri/calcite-components/components/calcite-dropdown";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
+import "../arcgis-charts-config-invalid-input-message/index.js";
 import "../arcgis-charts-config-colors/index.js";
 export * from "./customElement.js";

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

@@ -1,27 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as p } from "../../chunks/runtime.js";
 import { css as m, html as s } from "lit";
-import { i as y, m as o, U as c, s as u } from "../../chunks/chart-ui-utils.js";
+import { i as u, m as o, U as c, s as y } from "../../chunks/chart-ui-utils.js";
 import { u as g } from "../../chunks/useT9n.js";
-import { createRef as r, ref as h } from "lit/directives/ref.js";
-import { LitElement as S, createEvent as d, safeClassMap as l, nothing as n } from "@arcgis/lumina";
+import { createRef as r, ref as d } from "lit/directives/ref.js";
+import { LitElement as S, createEvent as h, safeClassMap as l, nothing as n } from "@arcgis/lumina";
 import { b as f, R as t } from "../../chunks/rest-js-object-literals.js";
 const a = {
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   colorPickerContainer: "color-picker-container"
-}, w = m`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
-class b extends S {
+}, v = m`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{overflow-y:auto}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
+class w extends S {
   constructor() {
-    super(...arguments), this._messages = g(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
+    super(...arguments), this._messages = g(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.isLineWidthInvalid = !1, this.lineStyle = {
       type: f.SLS
-    }, this.open = !1, this.enableClose = !1, this.usePanel = !1, this.arcgisChartsConfigLineStyleChange = d(), this.arcgisChartsConfigLineStyleClose = d();
+    }, this.open = !1, this.enableClose = !1, this.usePanel = !1, this.arcgisChartsConfigLineStyleChange = h(), this.arcgisChartsConfigLineStyleClose = h();
   }
   static {
-    this.properties = { messageOverrides: 0, lineStyle: 0, header: 1, open: 5, enableClose: 5, usePanel: 5 };
+    this.properties = { isLineWidthInvalid: 16, messageOverrides: 0, lineStyle: 0, header: 1, open: 5, enableClose: 5, usePanel: 5 };
   }
   static {
-    this.styles = w;
+    this.styles = v;
   }
   closePanel(e) {
     e.target.closed && this.enableClose && (this.open = !1, this.arcgisChartsConfigLineStyleClose.emit());
@@ -51,26 +51,26 @@ class b extends S {
   }
   widthChange() {
     const e = this.lineWidthInputElement.value?.value;
-    e !== void 0 && y(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && o({
+    e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && (this.isLineWidthInvalid = !1, o({
       inputElement: this.lineWidthInputElement.value,
       status: c.IDLE
-    })) : this.lineWidthInputElement.value && o({
+    }))) : this.lineWidthInputElement.value && (this.isLineWidthInvalid = !0, o({
       inputElement: this.lineWidthInputElement.value,
       status: c.INVALID
-    });
+    }));
   }
   emitLineStyleEvent() {
     Number.isNaN(Number.parseInt(this.lineStyle?.color?.[0]?.toString() ?? "")) && (this.lineStyle.color = void 0), this.arcgisChartsConfigLineStyleChange.emit(this.lineStyle);
   }
   render() {
     const e = [
-      s`<div class=${l(a.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${h(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${l(a.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${u(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${h(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
+      s`<div class=${l(a.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${l(a.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${y(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidLineWidth} .isInvalid=${this.isLineWidthInvalid}></arcgis-charts-config-invalid-input-message></calcite-label></div>`,
       s`<div class=${l(a.colorPickerContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${this.lineStyle?.color ?? void 0} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
     ];
     return this.usePanel ? s`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${!this.open} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>` : e;
   }
 }
-p("arcgis-charts-config-line-style", b);
+p("arcgis-charts-config-line-style", w);
 export {
-  b as ArcgisChartsConfigLineStyle
+  w as ArcgisChartsConfigLineStyle
 };

package/dist/components/arcgis-charts-config-line-style/index.js

@@ -4,6 +4,7 @@ import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-input";
+import "../arcgis-charts-config-invalid-input-message/index.js";
 import "../arcgis-charts-config-colors/index.js";
 import "@esri/calcite-components/components/calcite-panel";
 export * from "./customElement.js";

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

@@ -1,60 +1,60 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
 import { css as u, html as h } from "lit";
-import { i as p, m, U as r, s as d } from "../../chunks/chart-ui-utils.js";
-import { u as g } from "../../chunks/useT9n.js";
+import { i as d, m, U as c, s as g } from "../../chunks/chart-ui-utils.js";
+import { u as p } from "../../chunks/useT9n.js";
 import { createRef as b, ref as f } from "lit/directives/ref.js";
-import { LitElement as v, createEvent as F, safeClassMap as a } from "@arcgis/lumina";
+import { LitElement as v, createEvent as I, safeClassMap as a } from "@arcgis/lumina";
 const s = {
   container: "container",
   label: "label",
   numberInput: "number-input"
-}, C = u`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.container{width:var(--arcgis-charts-config-calcite-block-width, var(--arcgis-charts-config-calcite-block-default-width));height:var(--arcgis-charts-config-calcite-block-height, var(--arcgis-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
-class I extends v {
+}, F = u`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.container{width:var(--arcgis-charts-config-calcite-block-width, var(--arcgis-charts-config-calcite-block-default-width));height:var(--arcgis-charts-config-calcite-block-height, var(--arcgis-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
+class C extends v {
   constructor() {
-    super(...arguments), this._messages = g(), this.decimalPlacesInputElement = b(), this.arcgisChartsConfigNumberFormatChange = F();
+    super(...arguments), this._messages = p(), this.decimalPlacesInputElement = b(), this.isDecimalPlacesInvalid = !1, this.arcgisChartsConfigNumberFormatChange = I();
   }
   static {
-    this.properties = { messageOverrides: 0, numberFormat: 0 };
+    this.properties = { isDecimalPlacesInvalid: 16, messageOverrides: 0, numberFormat: 0 };
   }
   static {
-    this.styles = C;
+    this.styles = F;
   }
   onDecimalPlacesChange() {
-    const t = this.decimalPlacesInputElement.value?.value, i = Math.floor(Number(t)), n = i === Number(t) && i >= 0;
-    if (t !== void 0 && n && p(t, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
-      const c = Number.parseInt(t), e = {
+    const e = this.decimalPlacesInputElement.value?.value, i = Math.floor(Number(e)), n = i === Number(e) && i >= 0;
+    if (e !== void 0 && n && d(e, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
+      const r = Number.parseInt(e), t = {
         minimumFractionDigits: this.numberFormat?.minimumFractionDigits,
-        maximumFractionDigits: c
+        maximumFractionDigits: r
       };
-      e.maximumFractionDigits !== void 0 && e.minimumFractionDigits !== void 0 && e.minimumFractionDigits > e.maximumFractionDigits && (e.minimumFractionDigits = e.maximumFractionDigits);
-      const l = this.getUpdatedNumberFormat(e);
-      this.arcgisChartsConfigNumberFormatChange.emit(l), this.decimalPlacesInputElement.value && m({
+      t.maximumFractionDigits !== void 0 && t.minimumFractionDigits !== void 0 && t.minimumFractionDigits > t.maximumFractionDigits && (t.minimumFractionDigits = t.maximumFractionDigits);
+      const l = this.getUpdatedNumberFormat(t);
+      this.arcgisChartsConfigNumberFormatChange.emit(l), this.decimalPlacesInputElement.value && (this.isDecimalPlacesInvalid = !1, m({
         inputElement: this.decimalPlacesInputElement.value,
-        status: r.IDLE
-      });
-    } else this.decimalPlacesInputElement.value && m({
+        status: c.IDLE
+      }));
+    } else this.decimalPlacesInputElement.value && (this.isDecimalPlacesInvalid = !0, m({
       inputElement: this.decimalPlacesInputElement.value,
-      status: r.INVALID
-    });
+      status: c.INVALID
+    }));
   }
-  onShowThousandsSeparatorChange(t) {
-    const i = t.target.checked, n = this.getUpdatedNumberFormat({
+  onShowThousandsSeparatorChange(e) {
+    const i = e.target.checked, n = this.getUpdatedNumberFormat({
       useGrouping: i
     });
     this.arcgisChartsConfigNumberFormatChange.emit(n);
   }
-  getUpdatedNumberFormat(t) {
+  getUpdatedNumberFormat(e) {
     return {
       ...this.numberFormat,
-      ...t
+      ...e
     };
   }
   render() {
-    return h`<div class=${a(s.container)}><calcite-label class=${a(s.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${a(s.numberInput)} min=0 max=20 step=1 .value=${d(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${f(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${a(s.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div>`;
+    return h`<div class=${a(s.container)}><calcite-label class=${a(s.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${a(s.numberInput)} min=0 max=20 step=1 .value=${g(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${f(this.decimalPlacesInputElement)}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidDecimalPlaces} .isInvalid=${this.isDecimalPlacesInvalid}></arcgis-charts-config-invalid-input-message></calcite-label><calcite-label layout=inline-space-between class=${a(s.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div>`;
   }
 }
-o("arcgis-charts-config-number-format", I);
+o("arcgis-charts-config-number-format", C);
 export {
-  I as ArcgisChartsConfigNumberFormat
+  C as ArcgisChartsConfigNumberFormat
 };

package/dist/components/arcgis-charts-config-number-format/index.js

@@ -1,4 +1,5 @@
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-input";
+import "../arcgis-charts-config-invalid-input-message/index.js";
 import "@esri/calcite-components/components/calcite-switch";
 export * from "./customElement.js";

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

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as u } from "../../chunks/runtime.js";
-import { isEqual as n, cloneDeep as h } from "lodash-es";
+import { isEqual as n, cloneDeep as h } from "es-toolkit/compat";
 import { LitElement as C, createEvent as m } from "@arcgis/lumina";
 import { css as y, html as c } from "lit";
 import { C as d } from "../../chunks/interfaces.js";
-import { bC as I, bD as F, t as v } from "../../chunks/index.js";
+import { bL as I, bM as F, u as v } from "../../chunks/index.js";
 import { b } from "../../chunks/rest-js-object-literals.js";
-const S = y`: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 L extends C {
+const L = y`: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 S extends C {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const s = e?.detail.config ?? this.model.config;
@@ -18,7 +18,7 @@ class L extends C {
     this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, seriesColor: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5, popupTemplateFieldInfosEnabled: 5, filterBySelection: 5, chartData: 0 };
   }
   static {
-    this.styles = S;
+    this.styles = L;
   }
   async load() {
     this.seriesColor !== void 0 && this.seriesColorChange(this.seriesColor), await this.updateFetchLayerFieldsInfo(this.model?.config), this.modelChange(this.model);
@@ -80,7 +80,7 @@ class L extends C {
     return e;
   }
 }
-u("arcgis-charts-config-pie-chart", L);
+u("arcgis-charts-config-pie-chart", S);
 export {
-  L as ArcgisChartsConfigPieChart
+  S as ArcgisChartsConfigPieChart
 };

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as p } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
-import { P as a } from "../../chunks/interfaces.js";
+import { P as r } from "../../chunks/interfaces.js";
 import { u as C } from "../../chunks/useT9n.js";
 import { css as u, html as s } from "lit";
 import { createRef as n, ref as c } from "lit/directives/ref.js";
 import { LitElement as b, createEvent as h, renderElement as v, safeClassMap as o } from "@arcgis/lumina";
 import { x as y } from "../../chunks/data.js";
 import { b as m } from "../../chunks/index2.js";
-import { w as g, r as F } from "../../chunks/index.js";
+import { x as g, t as F } from "../../chunks/index.js";
 import { r as $ } from "../../chunks/popover-ui-utils.js";
 import { d as P } from "../../chunks/chart-object-literals.js";
 const l = {
@@ -23,19 +23,19 @@ class E extends b {
         if (e.detail !== null && e.detail?.value !== void 0) {
           const { contentKind: i } = e.detail, t = [...e.detail.value];
           switch (i) {
-            case a.aggregation:
+            case r.aggregation:
               this.model.aggregationType = t[0] !== P.NoAggregation ? t[0] : "";
               break;
-            case a.category: {
-              const r = t[0]?.trim() || "", d = this.model.numericFields;
-              d.length > 1 && r !== g && (this.model.numericFields = [d[0]]), this.model.category = r, this.model.colorMatch = !0;
+            case r.category: {
+              const a = t[0]?.trim() || "", d = this.model.numericFields;
+              d.length > 1 && a !== g && (this.model.numericFields = [d[0]]), this.model.category = a, this.model.colorMatch = !0;
               break;
             }
-            case a.numericFields:
+            case r.numericFields:
               (t.length > 1 || t.length > 0 && this.model.category.trim() === "") && (this.model.category = g), this.model.numericFields = t;
               break;
-            case a.sortOrder:
-              this.model.setSortOrder(t[0]);
+            case r.sortOrder:
+              this.model.setDataSortOrder(t[0]);
               break;
             default:
               break;
@@ -73,13 +73,13 @@ class E extends b {
     return f(e, s`<calcite-list-item .label=${m(this.layerFieldsInfo, e)} .value=${e} closable @calciteListItemClose=${this.onRemoveNumericField}></calcite-list-item>`);
   }
   onSortOrderSelect(e) {
-    this.contentKind = a.sortOrder, this.setupPopover(e);
+    this.contentKind = r.sortOrder, this.setupPopover(e);
   }
   onCategorySelect(e) {
-    this.contentKind = a.category, this.setupPopover(e);
+    this.contentKind = r.category, this.setupPopover(e);
   }
   onAddNumericFields(e) {
-    this.contentKind = a.numericFields, this.setupPopover(e);
+    this.contentKind = r.numericFields, this.setupPopover(e);
   }
   onRemoveNumericField(e) {
     const i = e.target.value;
@@ -90,19 +90,19 @@ class E extends b {
   }
   setupPopover(e) {
     e.stopImmediatePropagation(), this.removePieChartDataPopover();
-    let i, t, r;
+    let i, t, a;
     switch (this.contentKind) {
-      case a.category:
-        i = this.categoryElement.value, t = this._messages.categoryHeader, r = this.model.category;
+      case r.category:
+        i = this.categoryElement.value, t = this._messages.categoryHeader, a = this.model.category;
         break;
-      case a.numericFields:
-        i = this.numericFieldsElement.value, t = this._messages.numericFieldsMultipleHeader, r = this.model.numericFields;
+      case r.numericFields:
+        i = this.numericFieldsElement.value, t = this._messages.numericFieldsMultipleHeader, a = this.model.numericFields;
         break;
-      case a.sortOrder:
-        i = this.sortOrderElement.value, t = this._messages.sortOrderHeader, r = this.model.getSortOrder();
+      case r.sortOrder:
+        i = this.sortOrderElement.value, t = this._messages.sortOrderHeader, a = this.model.getDataSortOrder();
         break;
     }
-    this.pieChartPopover = v(s`<arcgis-charts-config-pie-chart-popover .headingTitle=${t} .referenceElement=${i} open .contentKind=${this.contentKind} .layerFieldsInfo=${this.layerFieldsInfo} .selectedContent=${r} @arcgisChartsConfigPieChartDataPopoverChange=${this.onPieChartDataChange} @arcgisChartsConfigPopoverClose=${this.popoverClose}></arcgis-charts-config-pie-chart-popover>`), !document.body.contains(this.pieChartPopover) && this.pieChartPopover !== null && document.body.appendChild(this.pieChartPopover);
+    this.pieChartPopover = v(s`<arcgis-charts-config-pie-chart-popover .headingTitle=${t} .referenceElement=${i} open .contentKind=${this.contentKind} .layerFieldsInfo=${this.layerFieldsInfo} .selectedContent=${a} @arcgisChartsConfigPieChartDataPopoverChange=${this.onPieChartDataChange} @arcgisChartsConfigPopoverClose=${this.popoverClose}></arcgis-charts-config-pie-chart-popover>`), !document.body.contains(this.pieChartPopover) && this.pieChartPopover !== null && document.body.appendChild(this.pieChartPopover);
   }
   getCorrectedCategoryValue() {
     return y({
@@ -114,7 +114,7 @@ class E extends b {
     this.pieChartPopover !== null && (this.pieChartPopover.open = !1, this.pieChartPopover = $(this.pieChartPopover));
   }
   renderSorting() {
-    return s`<arcgis-charts-config-field-picker .label=${this._messages[this.model.getSortOrder()]} @click=${this.onSortOrderSelect} ${c(this.sortOrderElement)}></arcgis-charts-config-field-picker>`;
+    return s`<arcgis-charts-config-field-picker .label=${this._messages[this.model.getDataSortOrder()]} @click=${this.onSortOrderSelect} ${c(this.sortOrderElement)}></arcgis-charts-config-field-picker>`;
   }
   renderCategory() {
     const e = this.getCorrectedCategoryValue();
@@ -122,8 +122,8 @@ class E extends b {
   }
   renderNumericFields(e) {
     const i = F(this.model.layer).idField, t = [];
-    for (const r of e)
-      r !== i && t.push(this.buildNumericFieldItem(r));
+    for (const a of e)
+      a !== i && t.push(this.buildNumericFieldItem(a));
     return s`<calcite-list label class=${o(l.fieldList)} ${c(this.numericFieldsElement)}>${t}</calcite-list>`;
   }
   render() {

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

@@ -2,7 +2,7 @@
 import { c as v } from "../../chunks/runtime.js";
 import { repeat as h } from "lit/directives/repeat.js";
 import { keyed as g } from "lit/directives/keyed.js";
-import { isEqual as k } from "lodash-es";
+import { isEqual as k } from "es-toolkit/compat";
 import { P as o } from "../../chunks/interfaces.js";
 import { p as f, b as $, e as d, f as P } from "../../chunks/chart-ui-utils.js";
 import { u } from "../../chunks/useT9n.js";
@@ -10,9 +10,9 @@ import { css as L, html as n } from "lit";
 import { createRef as C, ref as m } from "lit/directives/ref.js";
 import { LitElement as y, createEvent as b, safeClassMap as l } from "@arcgis/lumina";
 import { e as F, p as I } from "../../chunks/popover-ui-utils.js";
-import { H as D } from "../../chunks/index3.js";
+import { J as D } from "../../chunks/index3.js";
 import { b as x } from "../../chunks/index2.js";
-import { bB as S, aN as T } from "../../chunks/index.js";
+import { bK as S, aQ as T } from "../../chunks/index.js";
 import { d as E } from "../../chunks/rest-js-object-literals.js";
 import { a as r } from "../../chunks/common.js";
 const s = {
@@ -24,7 +24,7 @@ const s = {
   sortOrderPickList: "sort-order-pick-list",
   panel: "panel"
 }, w = L`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.name{display:flex;flex-direction:column;margin:.5rem;padding:.5rem;background:#fff;min-width:250px}.header{margin:0;font-weight:bolder}.fab{display:flex;justify-content:stretch}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}.sort-icon-color{color:#000}.sort-counter-clockwise{transform:scaleX(-1)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}`;
-class A extends y {
+class K extends y {
   constructor() {
     super(...arguments), this._messages = u(), this.commonStrings = u({ name: "common", blocking: !0 }), this.picklist = C(), this.popoverElement = C(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPieChartDataPopoverChange = b(), this.arcgisChartsConfigPopoverClose = b();
   }
@@ -167,7 +167,7 @@ class A extends y {
     return this.contentKind === o.numericFields && (e = n`<div slot=footer><calcite-fab class=${l(s.fab)} appearance=outline-fill kind=neutral .icon=${void 0} .label=${this._messages.selectionDone} scale=s text-enabled .text=${this._messages.selectionDone} @click=${this.onNumericFieldSelectionDone}></calcite-fab></div>`), n`<div><calcite-popover class=${l(s.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .offsetDistance=${this.offsetDistance} .open=${this.open} label auto-close ${m(this.popoverElement)}><calcite-panel class=${l(s.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${l(s.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;
   }
 }
-v("arcgis-charts-config-pie-chart-popover", A);
+v("arcgis-charts-config-pie-chart-popover", K);
 export {
-  A as ArcgisChartsConfigPieChartPopover
+  K as ArcgisChartsConfigPieChartPopover
 };

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as L } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
-import { debounce as $, isEmpty as E, toNumber as x } from "lodash-es";
+import { debounce as $, isEmpty as E, toNumber as x } from "es-toolkit/compat";
 import { b as C, a as N, s as p } from "../../chunks/chart-ui-utils.js";
 import { u as _ } from "../../chunks/useT9n.js";
-import { css as G, html as d, nothing as z } from "lit";
+import { css as G, html as d, nothing as w } from "lit";
 import { createRef as m, ref as g } from "lit/directives/ref.js";
-import { LitElement as w, renderElement as S, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
+import { LitElement as z, renderElement as S, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
 import { b as h } from "../../chunks/common.js";
-import { a4 as I, p as y } from "../../chunks/index3.js";
+import { a5 as I, p as y } from "../../chunks/index3.js";
 import { r as P } from "../../chunks/popover-ui-utils.js";
 import { b as M } from "../../chunks/rest-js-object-literals.js";
 const a = {
@@ -21,10 +21,10 @@ const a = {
   groupingLabelContainer: "grouping-label-container",
   numberInput: "number-input"
 }, k = G`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.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)}.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}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important;margin-right:var(--arcgis-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.label .slider-input-container{display:flex}.slice-list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.radio-group{margin-top:var(--arcgis-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--arcgis-charts-config-margin-minor) * -3)}`;
-class D extends w {
+class D extends z {
   constructor() {
     super(...arguments), this._messages = _(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = $(() => {
-      this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadiusSize = this.donutSizeSliderElement.value.value ?? I);
+      this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadius = this.donutSizeSliderElement.value.value ?? I);
     }, C.SliderTimer), this.onGroupingThresholdSliderChange = $(() => {
       const e = this.groupingThresholdSliderElement.value?.value;
       e !== void 0 && !Number.isNaN(e) ? (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = e.toString()), this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = e), this.model.groupingThreshold = e) : this.model.groupingThreshold = 0;
@@ -171,7 +171,7 @@ class D extends w {
     N(this.tooltip);
   }
   render() {
-    return d`<div class=${s(a.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(a.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? I} @calciteSliderChange=${this.onDonutSizeSliderChange} ${g(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(a.pieDonutLabelsContainer)}><calcite-label class=${s(a.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(a.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(a.label)}><div class=${s(a.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl role=img tabindex=0 aria-label=${this._messages.groupingInfo ?? "" ?? z} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} @focus=${this.createTooltip} @blur=${this.destroyTooltip}></calcite-icon></div><div class=${s(a.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${x(p(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${g(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(a.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${p(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
+    return d`<div class=${s(a.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(a.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadius ?? I} @calciteSliderChange=${this.onDonutSizeSliderChange} ${g(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(a.pieDonutLabelsContainer)}><calcite-label class=${s(a.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(a.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(a.label)}><div class=${s(a.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl role=img tabindex=0 aria-label=${this._messages.groupingInfo ?? "" ?? w} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} @focus=${this.createTooltip} @blur=${this.destroyTooltip}></calcite-icon></div><div class=${s(a.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${x(p(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${g(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(a.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${p(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
       e.stopPropagation();
     }} ${g(this.groupingThresholdElement)}></calcite-input></div></calcite-label><div class=${s(a.sectionLabel)}>${this._messages.labels}</div><calcite-label class=${s(a.label)}>${this._messages.labelCharacterLimit}<calcite-input type=number min=1 step=1 .value=${p(this.model.labelCharacterLimit)} @calciteInputInput=${this.onLabelCharacterLimitChange} ${g(this.labelCharacterLimitElement)}></calcite-input></calcite-label><calcite-label class=${s(a.label)}>${this._messages.decimalPlaces}<calcite-input type=number min=0 max=20 step=1 .value=${p(this.model.decimalPlaces)} @calciteInputInput=${this.onDecimalPlacesChange} ${g(this.decimalPlacesElement)}></calcite-input></calcite-label><calcite-label class=${s(a.label)}>${this._messages.display}<calcite-radio-button-group class=${s(a.radioGroup)} name=display layout=vertical @calciteRadioButtonGroupChange=${this.onDisplayTypeChange}><calcite-label layout=inline><calcite-radio-button .value=${h.Value} .checked=${this.model.displayType === h.Value}></calcite-radio-button>${this._messages.value}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Percentage} .checked=${this.model.displayType === h.Percentage}></calcite-radio-button>${this._messages.percentage}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Both} .checked=${this.model.displayType === h.Both}></calcite-radio-button>${this._messages.both}</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(a.sectionLabel)}>${this._messages.slices}<calcite-button @click=${this.resetSlicesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSliceList()}<div class=${s(a.sectionLabel)}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
   }

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

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
-import { isEqual as l } from "lodash-es";
+import { isEqual as l } from "es-toolkit/compat";
 import { LitElement as n, createEvent as d } from "@arcgis/lumina";
 import { css as c, html as s } from "lit";
 import { C as o } from "../../chunks/interfaces.js";
-import { bC as h, bD as p, b9 as f, c5 as g, t as m, aR as u } from "../../chunks/index.js";
+import { bL as h, bM as p, bg as f, ce as g, u as m, aT as u } from "../../chunks/index.js";
 import { i as y } from "../../chunks/type-guards.js";
 const b = c`: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 n {
@@ -15,7 +15,7 @@ class F extends n {
     }, this.popoverPlacement = "leading", this.usePopupTemplateFieldsInfo = !1, this.arcgisChartsConfigWebChartChange = d();
   }
   static {
-    this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5, popupTemplateFieldInfosEnabled: 5 };
+    this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, view: 0, usePopupTemplateFieldsInfo: 5, popupTemplateFieldInfosEnabled: 5 };
   }
   static {
     this.styles = b;
@@ -51,7 +51,7 @@ class F extends n {
     switch (this.page) {
       case o.Data:
         const a = u(this.layer), t = a && "isTable" in a ? a.isTable : !1;
-        e = s`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${t}></arcgis-charts-config-scatter-plot-data>`;
+        e = s`<arcgis-charts-config-scatter-plot-data .view=${this.view} .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${t}></arcgis-charts-config-scatter-plot-data>`;
         break;
       case o.Axes:
         e = s`<arcgis-charts-config-axes .model=${this.model} show-min-x-bound-option show-max-x-bound-option show-min-y-bound-option show-max-y-bound-option show-enable-x-log-option show-enable-y-log-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds}></arcgis-charts-config-axes>`;