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

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

@@ -0,0 +1,70 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as a } from "../../chunks/runtime.js";
+import { html as r } from "lit";
+import { LitElement as n, createEvent as h, nothing as o } from "@arcgis/lumina";
+import g from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import { u as l } from "../../chunks/useT9n.js";
+import { cy as s, cz as d } from "../../chunks/index.js";
+const e = {
+  Circle: "circle",
+  FreehandPolygon: "freehandPolygon",
+  Polygon: "polygon",
+  Polyline: "polyline",
+  Rectangle: "rectangle"
+};
+class m extends n {
+  constructor() {
+    super(...arguments), this._messages = l({ blocking: !0 }), this.commonStrings = l({ name: "common", blocking: !0 }), this.handleAoiToolClick = async (t) => {
+      this.selectedTool = t, await this.startAoiSketch(t);
+    }, this.arcgisImageryScatterplotAoiChange = h();
+  }
+  static {
+    this.properties = { selectedTool: 16, messageOverrides: 0, view: 0 };
+  }
+  disconnectedCallback() {
+    this.sketchListenerHandle && this.sketchListenerHandle.remove(), this.sketchViewModel && (this.sketchViewModel.destroy(), this.sketchViewModel = void 0), super.disconnectedCallback();
+  }
+  async startAoiSketch(t) {
+    if (this.view?.map && t) {
+      const i = s(this.view) ?? d(this.view);
+      this.sketchViewModel ? this.sketchViewModel.cancel() : (this.sketchViewModel = new g({
+        view: this.view,
+        layer: i,
+        activeFillSymbol: {
+          type: "simple-fill",
+          style: "solid",
+          color: [0, 255, 255, 0.25],
+          outline: { color: [0, 255, 255], width: 1 }
+        },
+        polylineSymbol: {
+          type: "simple-line",
+          color: [0, 255, 255],
+          width: 1
+        },
+        // disable update for imagery aoi sketch tool
+        updateOnGraphicClick: !1
+      }), this.addAoiSketchListener()), await this.sketchViewModel.create(t);
+    }
+  }
+  addAoiSketchListener() {
+    if (this.sketchViewModel) {
+      const t = this.sketchViewModel.on("create", (i) => {
+        if (i.state === "complete") {
+          const c = i.graphic?.geometry;
+          (c?.type === "polygon" || c?.type === "polyline") && (this.arcgisImageryScatterplotAoiChange.emit({
+            tool: this.selectedTool ?? c.type,
+            newGeometry: c.toJSON()
+          }), s(this.view)?.remove(i.graphic), this.selectedTool = void 0);
+        }
+      });
+      this.sketchListenerHandle?.remove(), this.sketchListenerHandle = t;
+    }
+  }
+  render() {
+    return r`<calcite-action-group layout=horizontal id=charts-config-scatter-plot-aoi-action-group><calcite-action id=charts-config-scatter-plot-aoi-line icon=line .text=${this.commonStrings.imageryAoiToolsStrings.polyline} title=${this._messages.draw.polyline ?? o} .active=${this.selectedTool === e.Polyline} @click=${() => this.handleAoiToolClick(e.Polyline)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-circle icon=circle .text=${this.commonStrings.imageryAoiToolsStrings.circle} title=${this._messages.draw.circle ?? o} .active=${this.selectedTool === e.Circle} @click=${() => this.handleAoiToolClick(e.Circle)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-rectangle icon=rectangle .text=${this.commonStrings.imageryAoiToolsStrings.rectangle} title=${this._messages.draw.rectangle ?? o} .active=${this.selectedTool === e.Rectangle} @click=${() => this.handleAoiToolClick(e.Rectangle)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-polygon icon=polygon .text=${this.commonStrings.imageryAoiToolsStrings.polygon} title=${this._messages.draw.polygon ?? o} .active=${this.selectedTool === e.Polygon} @click=${() => this.handleAoiToolClick(e.Polygon)}></calcite-action><calcite-action id=charts-config-scatter-plot-aoi-freehand-area icon=freehand-area .text=${this.commonStrings.imageryAoiToolsStrings.freehandPolygon} title=${this._messages.draw.freehandPolygon ?? o} .active=${this.selectedTool === e.FreehandPolygon} @click=${() => this.handleAoiToolClick(e.FreehandPolygon)}></calcite-action></calcite-action-group>`;
+  }
+}
+a("arcgis-charts-config-scatter-plot-aoi", m);
+export {
+  m as ArcgisChartsConfigScatterplotAoi
+};

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

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-action-group";
+import "@esri/calcite-components/components/calcite-action";
+export * from "./customElement.js";

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

@@ -1,20 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as F } from "../../chunks/runtime.js";
-import { cloneDeep as L, isEmpty as A, toNumber as v } from "lodash-es";
+import { cloneDeep as A, isEmpty as k, toNumber as z } from "es-toolkit/compat";
 import { f as n, g as d } from "../../chunks/interfaces.js";
-import { d as k, a as m } from "../../chunks/store.js";
-import { i as S, m as g, U as u, n as M, D as w, s as y } from "../../chunks/chart-ui-utils.js";
-import { i as z } from "../../chunks/type-guards.js";
-import { u as C } from "../../chunks/useT9n.js";
-import { css as V, html as r } from "lit";
+import { d as M, a as m } from "../../chunks/store.js";
+import { i as v, m as g, U as y, n as L, D as w, s as u } from "../../chunks/chart-ui-utils.js";
+import { i as $ } from "../../chunks/type-guards.js";
+import { u as x } from "../../chunks/useT9n.js";
+import { css as _, html as r } from "lit";
 import { createRef as h, ref as c } from "lit/directives/ref.js";
-import { LitElement as _, createEvent as x, renderElement as D, safeClassMap as i, safeStyleMap as E } from "@arcgis/lumina";
-import { ag as N, G as I, r as R } from "../../chunks/index3.js";
+import { LitElement as V, createEvent as I, renderElement as D, safeClassMap as t, safeStyleMap as C } from "@arcgis/lumina";
+import { cA as N } from "../../chunks/index.js";
+import { ah as R, E, r as G } from "../../chunks/index3.js";
 import { b } from "../../chunks/index2.js";
-import { r as P } from "../../chunks/popover-ui-utils.js";
-import { b as T } from "../../chunks/rest-js-object-literals.js";
-import { a as $ } from "../../chunks/chart-object-literals.js";
-const l = {
+import { r as T } from "../../chunks/popover-ui-utils.js";
+import { b as P } from "../../chunks/rest-js-object-literals.js";
+import { a as f } from "../../chunks/chart-object-literals.js";
+const s = {
   label: "label",
   r2: "r2",
   numberInput: "number-input",
@@ -23,74 +24,77 @@ const l = {
   switchElement: "switch-element",
   sectionContainer: "section-container",
   multiInputSection: "multi-input-section",
-  dimText: "dim-text"
-}, K = 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{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}calcite-slider{margin-top:-1.5rem}.r2{margin:var(--arcgis-charts-config-margin-major) 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}.section-container{display:flex;flex-direction:column}.icon-select{cursor:pointer}.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)}.switch-element{margin-right:var(--arcgis-charts-config-margin-minor)}.multi-input-section{display:flex;justify-content:space-between;align-items:center}`;
-class X extends _ {
+  dimText: "dim-text",
+  aoiTools: "aoi-tools",
+  currentAoiBlock: "current-aoi-block"
+}, K = _`.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)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}calcite-slider{margin-top:-1.5rem}.r2{margin:var(--arcgis-charts-config-margin-major) 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}.section-container{display:flex;flex-direction:column}.icon-select{cursor:pointer}.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)}.switch-element{margin-right:var(--arcgis-charts-config-margin-minor)}.multi-input-section{display:flex;justify-content:space-between;align-items:center}.aoi-tools{margin-top:0;margin-bottom:var(--arcgis-charts-config-margin-minor);margin-inline:var(--arcgis-charts-config-margin-minor);width:fit-content;border:1px solid var(--arcgis-charts-border)}.current-aoi-block{margin:var(--arcgis-charts-config-calcite-block-default-margin)}`;
+class O extends V {
   constructor() {
-    super(...arguments), this._messages = C(), this.commonStrings = C({ name: "common", blocking: !0 }), this.scatterplotPopover = null, this.selectColorElement = h(), this.selectTrendLineElement = h(), this.xAxisElement = h(), this.yAxisElement = h(), this.tooltipFieldElement = h(), this.sizeVariableElement = h(), this.colorModeElement = h(), this.symbolSizeModeElement = h(), this.minSizeInputElement = h(), this.maxSizeInputElement = h(), this.items = [], this.setTrendLineSymbol = (e) => {
-      const t = e.detail;
-      this.model.linearTrendSymbol = L(t);
+    super(...arguments), this._messages = x(), this.commonStrings = x({ name: "common", blocking: !0 }), this.scatterplotPopover = null, this.selectColorElement = h(), this.selectTrendLineElement = h(), this.xAxisElement = h(), this.yAxisElement = h(), this.tooltipFieldElement = h(), this.sizeVariableElement = h(), this.colorModeElement = h(), this.symbolSizeModeElement = h(), this.minSizeInputElement = h(), this.maxSizeInputElement = h(), this.items = [], this.setTrendLineSymbol = (e) => {
+      const i = e.detail;
+      this.model.linearTrendSymbol = A(i);
     }, this.setFixedSymbolRGBAColor = (e) => {
-      const t = e.detail, [s, a, o] = t, p = R * 255;
+      const i = e.detail, [l, o, a] = i, p = G * 255;
       this.model.fixedMarkerSymbol = {
         ...this.model.fixedMarkerSymbol,
-        color: [s, a, o, p]
+        color: [l, o, a, p]
       };
     }, this.setXYField = (e) => {
       try {
-        const t = e.detail;
-        k(m), this.contentKind === n.xAxisField ? this.model.xAxisField = t : this.model.yAxisField = t, this.removeScatterplotPopover();
-      } catch (t) {
-        throw t instanceof Error && this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
+        const i = e.detail;
+        M(m), this.contentKind === n.xAxisField ? this.model.xAxisField = i : this.model.yAxisField = i, this.removeScatterplotPopover();
+      } catch (i) {
+        throw i instanceof Error && this.arcgisChartsConfigDataChangeError.emit({ error: i, model: this.model }), i;
       }
     }, this.setAdditionalTooltipField = (e) => {
-      const t = e.detail;
-      this.model.additionalTooltipField = t, this.removeScatterplotPopover();
+      const i = e.detail;
+      this.model.additionalTooltipField = i, this.removeScatterplotPopover();
     }, this.setSizeVariableField = (e) => {
       try {
-        const t = e.detail;
-        t ? this.model.sizePolicy = {
+        const i = e.detail;
+        i ? this.model.sizePolicy = {
           ...this.model.sizePolicy,
-          type: $.SizePolicy,
-          field: t
+          type: f.SizePolicy,
+          field: i
         } : this.model.sizePolicy = void 0, m.scatterplotData[m.selectedChartId] = {
           ...m.scatterplotData[m.selectedChartId],
           sizePolicyField: this.model.sizePolicy?.field ?? void 0
         }, this.removeScatterplotPopover();
-      } catch (t) {
-        throw t instanceof Error && this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
+      } catch (i) {
+        throw i instanceof Error && this.arcgisChartsConfigDataChangeError.emit({ error: i, model: this.model }), i;
       }
     }, this.closeScatterplotPopover = (e) => {
       this.scatterplotPopover === e?.target && (this.contentKind = n.none, this.removeScatterplotPopover());
     }, this.onModelConfigChange = () => {
-      this.requestUpdate();
-      const { minSize: e, maxSize: t } = this.model.sizePolicy ?? {};
-      this.minSizeInputElement.value !== void 0 && e !== void 0 && (this.minSizeInputElement.value.value = `${e}`, S(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? g({
+      const e = this.model.locationsOfInterest?.[0];
+      this.aoiGeometry = e?.geometry, this.isAoiEnabled = e?.enabled ?? !1, this.requestUpdate();
+      const { minSize: i, maxSize: l } = this.model.sizePolicy ?? {};
+      this.minSizeInputElement.value !== void 0 && i !== void 0 && (this.minSizeInputElement.value.value = `${i}`, v(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? (this.isMinSizeInvalid = !1, g({
         inputElement: this.minSizeInputElement.value,
-        status: u.IDLE
-      }) : g({
+        status: y.IDLE
+      })) : (this.isMinSizeInvalid = !0, g({
         inputElement: this.minSizeInputElement.value,
-        status: u.INVALID
-      })), this.maxSizeInputElement.value !== void 0 && t !== void 0 && (this.maxSizeInputElement.value.value = `${t}`, S(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? g({
+        status: y.INVALID
+      }))), this.maxSizeInputElement.value !== void 0 && l !== void 0 && (this.maxSizeInputElement.value.value = `${l}`, v(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? (this.isMaxSizeInvalid = !1, g({
         inputElement: this.maxSizeInputElement.value,
-        status: u.IDLE
-      }) : g({
+        status: y.IDLE
+      })) : (this.isMaxSizeInvalid = !0, g({
         inputElement: this.maxSizeInputElement.value,
-        status: u.INVALID
-      }));
+        status: y.INVALID
+      })));
     }, this.segmentedControlRef = (e) => {
       e && (e.focus = () => {
       }, this.items.push(e));
-    }, this.layerFieldsInfo = [], this.isTableLayer = !1, this.arcgisChartsConfigDataChangeError = x(), this.arcgisChartsConfigScatterplotPopoverChange = x();
+    }, this.isAoiEnabled = !1, this.isFixedSymbolSizeInvalid = !1, this.isMaxSizeInvalid = !1, this.isMinSizeInvalid = !1, this.layerFieldsInfo = [], this.isTableLayer = !1, this.arcgisChartsConfigDataChangeError = I(), this.arcgisChartsConfigScatterplotPopoverChange = I();
   }
   static {
-    this.properties = { selectedElement: 16, selectedSizeType: 16, messageOverrides: 0, model: 0, r2: 9, layerFieldsInfo: 0, isTableLayer: 5 };
+    this.properties = { selectedElement: 16, selectedSizeType: 16, aoiGeometry: 16, aoiTool: 16, isAoiEnabled: 16, isFixedSymbolSizeInvalid: 16, isMaxSizeInvalid: 16, isMinSizeInvalid: 16, messageOverrides: 0, view: 0, model: 0, r2: 9, layerFieldsInfo: 0, isTableLayer: 5 };
   }
   static {
     this.styles = K;
   }
   load() {
-    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = N(this.commonStrings);
+    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = R(this.commonStrings);
   }
   willUpdate(e) {
     e.has("model") && (this.updateSymbolSizeInfoInAppState(), this.modelChange(this.model, e.get("model"))), e.has("selectedElement") && this.openPopover();
@@ -102,8 +106,8 @@ class X extends _ {
     super.disconnectedCallback(), this.removeScatterplotPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   async loadedAsync() {
-    await (async (t) => await new Promise((s) => setTimeout(() => s(), t)))(250), this.items.forEach((t) => {
-      delete t.focus;
+    await (async (i) => await new Promise((l) => setTimeout(() => l(), i)))(250), this.items.forEach((i) => {
+      delete i.focus;
     });
   }
   updateSymbolSizeInfoInAppState() {
@@ -113,56 +117,56 @@ class X extends _ {
     });
   }
   openPopover() {
-    (typeof this.selectedElement == "string" || !A(this.selectedElement)) && this.setupPopover();
+    (typeof this.selectedElement == "string" || !k(this.selectedElement)) && this.setupPopover();
   }
-  modelChange(e, t) {
-    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, i) {
+    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   setShowTrendLine(e) {
-    const t = e.target.checked;
-    this.model.showLinearTrend = t, !t && this.contentKind === n.trendLine && this.closeScatterplotPopover(e);
+    const i = e.target.checked;
+    this.model.showLinearTrend = i, !i && this.contentKind === n.trendLine && this.closeScatterplotPopover(e);
   }
   symbolSizeChange(e) {
-    const t = e.target, { value: s } = t;
-    if (s !== void 0 && S(s, t.min, t.max)) {
-      const a = Number.parseInt(s), o = this.model.sizePolicy, p = this.model.fixedMarkerSymbol;
-      switch (t.name) {
+    const i = e.target, { value: l } = i;
+    if (l !== void 0 && v(l, i.min, i.max)) {
+      const o = Number.parseInt(l), a = this.model.sizePolicy, p = this.model.fixedMarkerSymbol;
+      switch (i.name) {
         case "fixed-symbol-size":
           p !== void 0 && (this.model.fixedMarkerSymbol = {
             ...p,
-            size: a
-          });
+            size: o
+          }), this.isFixedSymbolSizeInvalid = !1;
           break;
         case "proportional-symbol-min-size":
-          o !== void 0 && (this.model.sizePolicy = {
-            ...o,
-            minSize: a
-          });
+          a !== void 0 && (this.model.sizePolicy = {
+            ...a,
+            minSize: o
+          }), this.isMinSizeInvalid = !1;
           break;
         case "proportional-symbol-max-size":
-          o !== void 0 && (this.model.sizePolicy = {
-            ...o,
-            maxSize: a
-          });
+          a !== void 0 && (this.model.sizePolicy = {
+            ...a,
+            maxSize: o
+          }), this.isMaxSizeInvalid = !1;
           break;
       }
       g({
-        inputElement: t,
-        status: u.IDLE
+        inputElement: i,
+        status: y.IDLE
       });
     } else
-      g({
-        inputElement: t,
-        status: u.INVALID
+      i.name === "fixed-symbol-size" ? this.isFixedSymbolSizeInvalid = !0 : i.name === "proportional-symbol-min-size" ? this.isMinSizeInvalid = !0 : i.name === "proportional-symbol-max-size" && (this.isMaxSizeInvalid = !0), g({
+        inputElement: i,
+        status: y.INVALID
       });
   }
   symbolSizeRangeSliderInput(e) {
-    const t = e.target, { minValue: s, maxValue: a } = t, o = this.model.sizePolicy;
-    o !== void 0 && (this.model.sizePolicy = {
-      ...o,
-      minSize: s,
-      maxSize: a
-    }, this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${s}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${a}`));
+    const i = e.target, { minValue: l, maxValue: o } = i, a = this.model.sizePolicy;
+    a !== void 0 && (this.model.sizePolicy = {
+      ...a,
+      minSize: l,
+      maxSize: o
+    }, this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${l}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${o}`));
   }
   changeColorTypeToggle() {
     const e = this.colorModeElement.value?.selectedItem?.value;
@@ -171,21 +175,21 @@ class X extends _ {
   changeSymbolSizeTypeToggle() {
     const e = this.symbolSizeModeElement.value?.value;
     this.selectedSizeType = e;
-    const t = m.scatterplotData[m.selectedChartId]?.sizePolicyField;
-    e === d.Proportional && t !== void 0 ? this.model.sizePolicy = {
+    const i = m.scatterplotData[m.selectedChartId]?.sizePolicyField;
+    e === d.Proportional && i !== void 0 ? this.model.sizePolicy = {
       ...this.model.sizePolicy,
-      type: $.SizePolicy,
-      field: t
+      type: f.SizePolicy,
+      field: i
     } : e === d.Fixed && (this.model.sizePolicy = {
       ...this.model.sizePolicy,
-      type: $.SizePolicy,
+      type: f.SizePolicy,
       field: ""
     });
   }
   changeElementStyle(e) {
     e.stopImmediatePropagation();
-    let t = e.target;
-    t.localName === "calcite-icon" && (t = t.parentElement), t.value === "selectColor" ? (this.contentKind = n.symbol, this.selectedElement = this.model.fixedMarkerSymbol?.color) : t.value === "selectTrendLine" && (this.contentKind = n.trendLine, this.selectedElement = this.model.linearTrendSymbol);
+    let i = e.target;
+    i.localName === "calcite-icon" && (i = i.parentElement), i.value === "selectColor" ? (this.contentKind = n.symbol, this.selectedElement = this.model.fixedMarkerSymbol?.color) : i.value === "selectTrendLine" && (this.contentKind = n.trendLine, this.selectedElement = this.model.linearTrendSymbol);
   }
   onXVariableSelectChange(e) {
     e.stopImmediatePropagation(), this.contentKind = n.xAxisField, this.selectedElement = this.model.xAxisField;
@@ -200,41 +204,60 @@ class X extends _ {
     e.stopImmediatePropagation(), this.contentKind = n.sizeVariable, this.selectedElement = this.model.sizePolicy?.field ?? "";
   }
   setupPopover() {
-    this.scatterplotPopover = P(this.scatterplotPopover);
-    const t = z(this.model.layer) ? this.layerFieldsInfo.filter((f) => f.type !== "esriFieldTypeOID") : [...this.layerFieldsInfo];
-    let s, a, o, p = "trailing";
+    this.scatterplotPopover = T(this.scatterplotPopover);
+    const i = $(this.model.layer) ? this.layerFieldsInfo.filter((S) => S.type !== "esriFieldTypeOID") : [...this.layerFieldsInfo];
+    let l, o, a, p = "trailing";
     switch (this.contentKind) {
       case n.xAxisField:
-        s = this.xAxisElement.value, o = this.model.xAxisField, a = this._messages.selectAField;
+        l = this.xAxisElement.value, a = this.model.xAxisField, o = this._messages.selectAField;
         break;
       case n.yAxisField:
-        s = this.yAxisElement.value, o = this.model.yAxisField, a = this._messages.selectAField;
+        l = this.yAxisElement.value, a = this.model.yAxisField, o = this._messages.selectAField;
         break;
       case n.sizeVariable:
-        s = this.sizeVariableElement.value, o = this.model.sizePolicy?.field ?? "", a = this._messages.selectAField;
+        l = this.sizeVariableElement.value, a = this.model.sizePolicy?.field ?? "", o = this._messages.selectAField;
         break;
       case n.additionalTooltipFields:
-        s = this.tooltipFieldElement.value, o = this.model.additionalTooltipField?.[0] ?? "", a = this._messages.selectAField;
+        l = this.tooltipFieldElement.value, a = this.model.additionalTooltipField?.[0] ?? "", o = this._messages.selectAField;
         break;
       case n.symbol:
       case n.trendLine: {
-        const f = this.selectedElement;
-        o = this.selectedElement, p = "leading", Array.isArray(this.selectedElement) ? s = this.selectColorElement.value : f?.type === T.SLS && (s = this.selectTrendLineElement.value);
+        const S = this.selectedElement;
+        a = this.selectedElement, p = "leading", Array.isArray(this.selectedElement) ? l = this.selectColorElement.value : S?.type === P.SLS && (l = this.selectTrendLineElement.value);
         break;
       }
       default:
         this.contentKind = n.none, this.removeScatterplotPopover();
         break;
     }
-    this.scatterplotPopover = D(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${a} .referenceElement=${s} open .contentKind=${this.contentKind} .layerFieldsInfo=${t} .selectedContent=${o} .placement=${p} @arcgisChartsConfigPopoverClose=${this.closeScatterplotPopover} @arcgisChartsConfigScatterplotFillColorChange=${this.setFixedSymbolRGBAColor} @arcgisChartsConfigScatterplotLineStyleChange=${this.setTrendLineSymbol} @arcgisChartsConfigScatterplotXYFieldChange=${this.setXYField} @arcgisChartsConfigScatterplotSizeVariableFieldChange=${this.setSizeVariableField} @arcgisChartsConfigScatterplotAdditionalTooltipFieldChange=${this.setAdditionalTooltipField}></arcgis-charts-config-scatter-plot-popover>`), !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
+    this.scatterplotPopover = D(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${o} .referenceElement=${l} open .contentKind=${this.contentKind} .layerFieldsInfo=${i} .selectedContent=${a} .placement=${p} @arcgisChartsConfigPopoverClose=${this.closeScatterplotPopover} @arcgisChartsConfigScatterplotFillColorChange=${this.setFixedSymbolRGBAColor} @arcgisChartsConfigScatterplotLineStyleChange=${this.setTrendLineSymbol} @arcgisChartsConfigScatterplotXYFieldChange=${this.setXYField} @arcgisChartsConfigScatterplotSizeVariableFieldChange=${this.setSizeVariableField} @arcgisChartsConfigScatterplotAdditionalTooltipFieldChange=${this.setAdditionalTooltipField}></arcgis-charts-config-scatter-plot-popover>`), !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
   }
   removeScatterplotPopover() {
-    this.scatterplotPopover !== null && (this.scatterplotPopover = P(this.scatterplotPopover)), this.selectedElement = void 0;
+    this.scatterplotPopover !== null && (this.scatterplotPopover = T(this.scatterplotPopover)), this.selectedElement = void 0;
   }
   getCurrentSymbolSizeType() {
     const e = this.model.sizePolicy;
     return e === void 0 || e.field === "" ? d.Fixed : d.Proportional;
   }
+  handleImageryScatterplotAoiChange(e) {
+    const { tool: i, newGeometry: l } = e.detail;
+    this.aoiTool = i, this.aoiGeometry = l, this.aoiGeometry && (this.model.locationsOfInterest = [
+      {
+        type: f.LocationOfInterest,
+        geometry: this.aoiGeometry,
+        enabled: !0
+      }
+    ]);
+  }
+  handleImageryScatterplotToggleUseAoi(e) {
+    this.isAoiEnabled = e.target.checked, this.model.locationsOfInterest = this.model.locationsOfInterest?.map((i) => ({
+      ...i,
+      enabled: this.isAoiEnabled
+    }));
+  }
+  handleImageryScatterplotAoiDeleteClick() {
+    this.aoiGeometry = void 0, this.aoiTool = void 0, this.model.locationsOfInterest = void 0;
+  }
   renderXVariable() {
     return r`<arcgis-charts-config-field-picker .label=${b(this.layerFieldsInfo, this.model.xAxisField ?? "")} @click=${this.onXVariableSelectChange} ${c(this.xAxisElement)}></arcgis-charts-config-field-picker>`;
   }
@@ -245,36 +268,40 @@ class X extends _ {
     return r`<arcgis-charts-config-field-picker .disabled=${this.model.dataStore.aggregated} .label=${b(this.layerFieldsInfo, this.model.additionalTooltipField?.[0] ?? "")} @click=${this.onAdditionalTooltipFieldSelectChange} ${c(this.tooltipFieldElement)}></arcgis-charts-config-field-picker>`;
   }
   renderStatistics() {
-    const [e, t, s, a] = [...this.model.linearTrendSymbol?.color ?? I(0)];
-    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(l.switchElement)} .checked=${this.model.showLinearTrend} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.showLinearTrend} .selected=${this.selectedElement?.type === T.SLS} @click=${this.changeElementStyle} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${E({ color: `rgba(${e},${t},${s},${a / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(l.r2)} .hidden=${!this.model.showLinearTrend}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, w)}`}</div></div>`;
+    const [e, i, l, o] = [...this.model.linearTrendSymbol?.color ?? E(0)];
+    return r`<div class=${t(s.sectionContainer)}><calcite-label class=${t(s.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${t(s.switchElement)} .checked=${this.model.showLinearTrend} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.showLinearTrend} .selected=${this.selectedElement?.type === P.SLS} @click=${this.changeElementStyle} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${C({ color: `rgba(${e},${i},${l},${o / 255})` })} class=${t(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${t(s.r2)} .hidden=${!this.model.showLinearTrend}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : L(this.r2, w)}`}</div></div>`;
   }
   renderFixedSymbol() {
-    return r`<calcite-label class=${i(l.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${i(l.numberInput)} min=1 max=100 step=1 .value=${y(this.model.fixedMarkerSymbol?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
+    return r`<calcite-label class=${t(s.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${t(s.numberInput)} min=1 max=100 step=1 .value=${u(this.model.fixedMarkerSymbol?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input><arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidSymbolSize} .isInvalid=${this.isFixedSymbolSizeInvalid}></arcgis-charts-config-invalid-input-message></calcite-label>`;
   }
   renderSizeVariable() {
     return r`<arcgis-charts-config-field-picker .label=${b(this.layerFieldsInfo, this.model.sizePolicy?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.sizePolicy?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${c(this.sizeVariableElement)}></arcgis-charts-config-field-picker>`;
   }
   renderMinSizeInput() {
-    return r`<calcite-input type=number name=proportional-symbol-min-size class=${i(l.numberInput)} min=1 .max=${this.model.sizePolicy?.maxSize ?? 100} step=1 .value=${y(this.model.sizePolicy?.minSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.minSizeInputElement)}></calcite-input>`;
+    return r`<calcite-input type=number name=proportional-symbol-min-size class=${t(s.numberInput)} min=1 .max=${this.model.sizePolicy?.maxSize ?? 100} step=1 .value=${u(this.model.sizePolicy?.minSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.minSizeInputElement)}></calcite-input>`;
   }
   renderMaxSizeInput() {
-    return r`<calcite-input type=number name=proportional-symbol-max-size class=${i(l.numberInput)} .min=${this.model.sizePolicy?.minSize ?? 1} max=100 step=1 .value=${y(this.model.sizePolicy?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.maxSizeInputElement)}></calcite-input>`;
+    return r`<calcite-input type=number name=proportional-symbol-max-size class=${t(s.numberInput)} .min=${this.model.sizePolicy?.minSize ?? 1} max=100 step=1 .value=${u(this.model.sizePolicy?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${c(this.maxSizeInputElement)}></calcite-input>`;
   }
   renderProportionalSymbol() {
-    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(l.multiInputSection)}><calcite-label class=${i(l.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${v(y(this.model.sizePolicy?.minSize))} .maxValue=${v(y(this.model.sizePolicy?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
+    return r`<div class=${t(s.sectionContainer)}><calcite-label class=${t(s.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${t(s.multiInputSection)}><calcite-label class=${t(s.label)}>${this._messages.minSize}${this.renderMinSizeInput()}<arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidSymbolSize} .isInvalid=${this.isMinSizeInvalid}></arcgis-charts-config-invalid-input-message></calcite-label><calcite-label class=${t(s.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}<arcgis-charts-config-invalid-input-message .invalidInputMessage=${this._messages.invalidSymbolSize} .isInvalid=${this.isMaxSizeInvalid}></arcgis-charts-config-invalid-input-message></calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${z(u(this.model.sizePolicy?.minSize))} .maxValue=${z(u(this.model.sizePolicy?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
   }
   renderSymbolSizeType() {
-    return r`<calcite-label class=${i(l.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${c(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${d.Fixed} .checked=${d.Fixed === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${d.Proportional} .checked=${d.Proportional === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
+    return r`<calcite-label class=${t(s.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${c(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${d.Fixed} .checked=${d.Fixed === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${d.Proportional} .checked=${d.Proportional === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
   }
   renderSymbol() {
-    const e = z(this.model.layer), [t, s, a, o] = [...this.model.fixedMarkerSymbol?.color ?? I(0)];
-    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${!this.isTableLayer && !e ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>` : null}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.colorMatch && !this.isTableLayer && !e} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${E({ color: `rgba(${t},${s},${a},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+    const e = $(this.model.layer), [i, l, o, a] = [...this.model.fixedMarkerSymbol?.color ?? E(0)];
+    return r`<div class=${t(s.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${t(s.label)}>${this._messages.color}${!this.isTableLayer && !e ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.colorMatch} ${c(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>` : null}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.colorMatch && !this.isTableLayer && !e} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${C({ color: `rgba(${i},${l},${o},${a / 255})` })} class=${t(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+  }
+  renderDefineAnAoiSection() {
+    const e = $(this.model.layer), i = this.aoiTool ?? N(this.aoiGeometry), l = i ? this.commonStrings.imageryAoiToolsStrings[i] : "";
+    return e ? r`<h3 class=${t(s.sectionLabel)}>${this._messages.defineAnAoi}</h3><div class=${t(s.sectionContainer)}><arcgis-charts-config-scatter-plot-aoi class=${t(s.aoiTools)} .view=${this.view} @arcgisImageryScatterplotAoiChange=${this.handleImageryScatterplotAoiChange}></arcgis-charts-config-scatter-plot-aoi><calcite-label class=${t(s.label)} layout=inline-space-between>${this._messages.useAoi}<calcite-switch class=${t(s.switchElement)} id=charts-config-scatter-plot-aoi-use-switch .checked=${this.isAoiEnabled && !!this.aoiGeometry} .disabled=${!this.aoiGeometry} @calciteSwitchChange=${this.handleImageryScatterplotToggleUseAoi}></calcite-switch></calcite-label><calcite-block class=${t(s.currentAoiBlock)} expanded .hidden=${!this.isAoiEnabled || !this.aoiGeometry}><calcite-label>${this._messages.currentAoi}</calcite-label><calcite-label layout=inline-space-between scale=s>${l}<calcite-button id=charts-config-scatter-plot-aoi-delete icon-start=trash appearance=transparent scale=s .disabled=${!this.aoiGeometry} @click=${this.handleImageryScatterplotAoiDeleteClick}></calcite-button></calcite-label></calcite-block></div>` : null;
   }
   render() {
-    return r`<h3 class=${i(l.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(l.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><calcite-label class=${i(l.label)}><span class=${i(this.model.dataStore.aggregated ? l.dimText : "")}>${this._messages.additionalTooltipFields}</span>${this.renderTooltipField()}</calcite-label><h3 class=${i(l.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(l.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}`;
+    return r`${this.renderDefineAnAoiSection()}<h3 class=${t(s.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${t(s.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${t(s.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><calcite-label class=${t(s.label)}><span class=${t(this.model.dataStore.aggregated ? s.dimText : "")}>${this._messages.additionalTooltipFields}</span>${this.renderTooltipField()}</calcite-label><h3 class=${t(s.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${t(s.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}`;
   }
 }
-F("arcgis-charts-config-scatter-plot-data", X);
+F("arcgis-charts-config-scatter-plot-data", O);
 export {
-  X as ArcgisChartsConfigScatterplotData
+  O as ArcgisChartsConfigScatterplotData
 };

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

@@ -6,7 +6,11 @@ import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-input";
+import "../arcgis-charts-config-invalid-input-message/index.js";
 import "@esri/calcite-components/components/calcite-slider";
 import "@esri/calcite-components/components/calcite-segmented-control";
 import "@esri/calcite-components/components/calcite-segmented-control-item";
+import "../arcgis-charts-config-scatter-plot-aoi/index.js";
+import "@esri/calcite-components/components/calcite-block";
+import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

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

@@ -10,7 +10,7 @@ import { LitElement as S, createEvent as l, safeClassMap as r } from "@arcgis/lu
 import { b as m } from "../../chunks/rest-js-object-literals.js";
 import { e as $ } from "../../chunks/popover-ui-utils.js";
 import { b as P } from "../../chunks/index2.js";
-import { aN as b } from "../../chunks/index.js";
+import { aQ as b } from "../../chunks/index.js";
 const n = {
   scatterplotPopover: "scatter-plot-popover",
   fillColor: "fill-color",