@arcgis/charts-components 4.34.0-next.16 → 4.34.0-next.160

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

@@ -1,7 +1,7 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { ScatterplotModel } from '../../model';
-import { Color, IField, ISimpleLineSymbol } from '@arcgis/charts-spec';
-import { DataChangeErrorPayload, PopoverOpenChangePayload } from '../../utils/components/event-payloads';
+import { Color, IField, ISimpleLineSymbol } from '../../spec';
+import { DataChangeErrorPayload } from '../../utils/components/event-payloads';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
@@ -10,13 +10,13 @@ export declare class ArcgisChartsConfigScatterplotData extends LitElement {
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this._messages._overrides;
     /**
-     * Scatter Plot Model.
+     * Scatterplot Model.
      *
      * @category Public
      */
     model: ScatterplotModel;
     /**
-     * r2 value for the scatter plot chart.
+     * r2 value for the scatterplot chart.
      *
      * @category Public
      */
@@ -34,21 +34,9 @@ export declare class ArcgisChartsConfigScatterplotData extends LitElement {
      * @default false
      */
     isTableLayer?: boolean;
-    /**
-     * When true, the content of the component will be displayed.
-     *
-     * @default false
-     */
-    open?: boolean;
     readonly arcgisChartsConfigDataChangeError: TargetedEvent<this, DataChangeErrorPayload>;
     /**
-     * Event emitted when the popover is closed.
-     *
-     * @category Public
-     */
-    readonly arcgisChartsConfigPopoverOpenChange: TargetedEvent<this, PopoverOpenChangePayload>;
-    /**
-     * Event when there is change in scatter plot data popover.
+     * Event when there is change in scatterplot data popover.
      *
      * @category Public
      */

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

@@ -1,8 +1,10 @@
-import { c as E } from "../../chunks/runtime.js";
-import { WebChartTypes as b, RESTSymbolType as z } from "@arcgis/charts-spec";
-import { cloneDeep as I, isEmpty as T, toNumber as $ } from "lodash-es";
+import { c as P } from "../../chunks/runtime.js";
+import "@arcgis/toolkit/intl";
+import { cloneDeep as T, isEmpty as F, toNumber as v } from "lodash-es";
+import { W as f } from "../../chunks/series-types.js";
+import { R as $ } from "../../chunks/rest-js-object-literals.js";
 import "d3-array";
-import { aO as F, c9 as y, Z as C, P as w } from "../../chunks/interfaces.js";
+import { a_ as w, cg as b, a7 as z, Y as L } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -10,19 +12,19 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { r as x, c as L, P as k } from "../../chunks/popover-ui-utils.js";
-import { S as l, b as h } from "../../chunks/interfaces2.js";
+import "@arcgis/toolkit/dom";
+import { r as x } from "../../chunks/popover-ui-utils.js";
+import { S as a, c as d } from "../../chunks/interfaces3.js";
 import { d as A, s as m } from "../../chunks/store.js";
-import { b as f, m as p, f as M, s as u, D as V, c as g } from "../../chunks/chart-ui-utils2.js";
-import { u as _ } from "../../chunks/useT9n.js";
-import { html as r } from "lit";
-import { createRef as d, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as D, createEvent as v, safeClassMap as i, safeStyleMap as P } from "@arcgis/lumina";
-import { css as N } from "@lit/reactive-element/css-tag.js";
+import { b as S, m as g, f as k, s as y, D as M, c as u } from "../../chunks/chart-ui-utils2.js";
+import { u as C } 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 V, createEvent as E, renderElement as D, safeClassMap as i, safeStyleMap as I } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.16 */
-const s = {
+v4.34.0-next.160 */
+const l = {
   label: "label",
   r2: "r2",
   numberInput: "number-input",
@@ -31,250 +33,255 @@ const s = {
   switchElement: "switch-element",
   sectionContainer: "section-container",
   multiInputSection: "multi-input-section",
-  rtl: "arcgis-charts-rtl"
-}, R = N`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}:host .arcgis-charts-rtl .text{margin-left:0rem;margin-right:var(--arcgis-charts-config-margin-minor)}:host .arcgis-charts-rtl .sub-header{margin-left:0rem;margin-right:var(--arcgis-charts-config-margin-minor)}:host .arcgis-charts-rtl .switch-element{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:0rem}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}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.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 K extends D {
+  dimText: "dim-text"
+}, N = _`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}: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}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.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 R extends V {
   constructor() {
-    super(...arguments), this._messages = _(), this.scatterplotPopover = null, this.selectColorElement = d(), this.selectTrendLineElement = d(), this.xAxisElement = d(), this.yAxisElement = d(), this.sizeVariableElement = d(), this.colorModeElement = d(), this.symbolSizeModeElement = d(), this.minSizeInputElement = d(), this.maxSizeInputElement = d(), this.items = [], this.setTrendLineSymbol = (e) => {
+    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.setLinearTrendSymbol(I(t));
+      this.model.linearTrendSymbol = T(t);
     }, this.setFixedSymbolRGBAColor = (e) => {
-      const t = e.detail, [o, n, c] = t, S = w * 255;
-      this.model.setFixedMarkerSymbol({
-        ...this.model.getFixedMarkerSymbol(),
-        color: [o, n, c, S]
-      });
-    }, this.setXYField = async (e) => {
+      const t = e.detail, [s, o, n] = t, p = L * 255;
+      this.model.fixedMarkerSymbol = {
+        ...this.model.fixedMarkerSymbol,
+        color: [s, o, n, p]
+      };
+    }, this.setXYField = (e) => {
       try {
         const t = e.detail;
-        A(m), this.contentKind === l.xAxisField ? await this.model.setXAxisField(t) : await this.model.setYAxisField(t), this.removeScatterplotPopover();
+        A(m), this.contentKind === a.xAxisField ? this.model.xAxisField = t : this.model.yAxisField = t, this.removeScatterplotPopover();
       } catch (t) {
         throw this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
       }
+    }, this.setAdditionalTooltipField = (e) => {
+      const t = e.detail;
+      this.model.additionalTooltipField = t, this.removeScatterplotPopover();
     }, this.setSizeVariableField = (e) => {
       try {
         const t = e.detail;
-        t ? this.model.setSizePolicy({
-          ...this.model.getSizePolicy(),
-          type: b.SizePolicy,
+        t ? this.model.sizePolicy = {
+          ...this.model.sizePolicy,
+          type: f.SizePolicy,
           field: t
-        }) : this.model.setSizePolicy(void 0), m.scatterplotData[m.selectedChartId] = {
+        } : this.model.sizePolicy = void 0, m.scatterplotData[m.selectedChartId] = {
           ...m.scatterplotData[m.selectedChartId],
-          sizePolicyField: this.model.getSizePolicy()?.field ?? void 0
+          sizePolicyField: this.model.sizePolicy?.field ?? void 0
         }, this.removeScatterplotPopover();
       } catch (t) {
         throw this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
       }
     }, this.closeScatterplotPopover = (e) => {
-      this.scatterplotPopover === e?.target && (this.contentKind = l.none, this.removeScatterplotPopover());
-    }, this.openChange = (e) => {
-      this.arcgisChartsConfigPopoverOpenChange.emit(e.detail);
+      this.scatterplotPopover === e?.target && (this.contentKind = a.none, this.removeScatterplotPopover());
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-      const { minSize: e, maxSize: t } = this.model.getSizePolicy() ?? {};
-      this.minSizeInputElement.value !== void 0 && e !== void 0 && (this.minSizeInputElement.value.value = `${e}`, f(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? p({
+      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({
         inputElement: this.minSizeInputElement.value,
-        status: g.IDLE
-      }) : p({
+        status: u.IDLE
+      }) : g({
         inputElement: this.minSizeInputElement.value,
-        status: g.INVALID
-      })), this.maxSizeInputElement.value !== void 0 && t !== void 0 && (this.maxSizeInputElement.value.value = `${t}`, f(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? p({
+        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({
         inputElement: this.maxSizeInputElement.value,
-        status: g.IDLE
-      }) : p({
+        status: u.IDLE
+      }) : g({
         inputElement: this.maxSizeInputElement.value,
-        status: g.INVALID
+        status: u.INVALID
       }));
     }, this.segmentedControlRef = (e) => {
       e && (e.focus = () => {
       }, this.items.push(e));
-    }, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = v(), this.arcgisChartsConfigPopoverOpenChange = v(), this.arcgisChartsConfigScatterplotPopoverChange = v();
+    }, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = E(), this.arcgisChartsConfigScatterplotPopoverChange = E();
   }
   static {
-    this.properties = { selectedElement: 16, selectedSizeType: 16, messageOverrides: 0, model: 0, r2: 11, layerFieldsInfo: 0, isTableLayer: 5, open: 7 };
+    this.properties = { selectedElement: 16, selectedSizeType: 16, messageOverrides: 0, model: 0, r2: 11, layerFieldsInfo: 0, isTableLayer: 5 };
   }
   static {
-    this.styles = R;
+    this.styles = N;
   }
-  async load() {
-    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await F(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === h.Proportional && (m.scatterplotData[m.selectedChartId] = {
-      ...m.scatterplotData[m.selectedChartId],
-      sizePolicyField: this.model.getSizePolicy()?.field
-    });
+  load() {
+    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = w(this.commonStrings);
   }
   willUpdate(e) {
-    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedElement") && this.openPopover();
+    e.has("model") && (this.updateSymbolSizeInfoInAppState(), this.modelChange(this.model, e.get("model"))), e.has("selectedElement") && this.openPopover();
   }
   async loaded() {
-    await (async (t) => await new Promise((o) => setTimeout(() => o(), t)))(250), this.items.forEach((t) => {
+    await (async (t) => await new Promise((s) => setTimeout(() => s(), t)))(250), this.items.forEach((t) => {
       delete t.focus;
     });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeScatterplotPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  modelChange(e, t) {
-    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  updateSymbolSizeInfoInAppState() {
+    this.selectedSizeType = this.getCurrentSymbolSizeType(), console.log("🚀 ~ ArcgisChartsConfigScatterplotData ~ load ~ this.selectedSizeType:", this.selectedSizeType), this.selectedSizeType === d.Proportional && (m.scatterplotData[m.selectedChartId] = {
+      ...m.scatterplotData[m.selectedChartId],
+      sizePolicyField: this.model.sizePolicy?.field
+    });
   }
   openPopover() {
-    (typeof this.selectedElement == "string" || !T(this.selectedElement)) && this.setupScatterplotPopover();
+    (typeof this.selectedElement == "string" || !F(this.selectedElement)) && this.setupPopover();
+  }
+  modelChange(e, t) {
+    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   setShowTrendLine(e) {
     const t = e.target.checked;
-    this.model.setShowLinearTrend(t), !t && this.contentKind === l.trendLine && this.closeScatterplotPopover(e);
+    this.model.showLinearTrend = t, !t && this.contentKind === a.trendLine && this.closeScatterplotPopover(e);
   }
   symbolSizeChange(e) {
-    const t = e.target, { value: o } = t;
-    if (o !== void 0 && f(o, t.min, t.max)) {
-      const n = Number.parseInt(o), c = this.model.getSizePolicy(), S = this.model.getFixedMarkerSymbol();
+    const t = e.target, { value: s } = t;
+    if (s !== void 0 && S(s, t.min, t.max)) {
+      const o = Number.parseInt(s), n = this.model.sizePolicy, p = this.model.fixedMarkerSymbol;
       switch (t.name) {
         case "fixed-symbol-size":
-          S !== void 0 && this.model.setFixedMarkerSymbol({
-            ...S,
-            size: n
+          p !== void 0 && (this.model.fixedMarkerSymbol = {
+            ...p,
+            size: o
           });
           break;
         case "proportional-symbol-min-size":
-          c !== void 0 && this.model.setSizePolicy({
-            ...c,
-            minSize: n
+          n !== void 0 && (this.model.sizePolicy = {
+            ...n,
+            minSize: o
           });
           break;
         case "proportional-symbol-max-size":
-          c !== void 0 && this.model.setSizePolicy({
-            ...c,
-            maxSize: n
+          n !== void 0 && (this.model.sizePolicy = {
+            ...n,
+            maxSize: o
           });
           break;
       }
-      p({
+      g({
         inputElement: t,
-        status: g.IDLE
+        status: u.IDLE
       });
     } else
-      p({
+      g({
         inputElement: t,
-        status: g.INVALID
+        status: u.INVALID
       });
   }
   symbolSizeRangeSliderInput(e) {
-    const t = e.target, { minValue: o, maxValue: n } = t, c = this.model.getSizePolicy();
-    c !== void 0 && (this.model.setSizePolicy({
-      ...c,
-      minSize: o,
-      maxSize: n
-    }), this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${o}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${n}`));
+    const t = e.target, { minValue: s, maxValue: o } = t, n = this.model.sizePolicy;
+    n !== void 0 && (this.model.sizePolicy = {
+      ...n,
+      minSize: s,
+      maxSize: o
+    }, this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${s}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${o}`));
   }
   changeColorTypeToggle() {
     const e = this.colorModeElement.value?.selectedItem?.value;
-    this.model.setColorMatch(e === this._messages.useLayerColors);
+    this.model.colorMatch = e === this._messages.useLayerColors;
   }
   changeSymbolSizeTypeToggle() {
     const e = this.symbolSizeModeElement.value?.value;
     this.selectedSizeType = e;
     const t = m.scatterplotData[m.selectedChartId]?.sizePolicyField;
-    e === h.Proportional && t !== void 0 ? this.model.setSizePolicy({
-      ...this.model.getSizePolicy(),
-      type: b.SizePolicy,
+    e === d.Proportional && t !== void 0 ? this.model.sizePolicy = {
+      ...this.model.sizePolicy,
+      type: f.SizePolicy,
       field: t
-    }) : e === h.Fixed && this.model.setSizePolicy({
-      ...this.model.getSizePolicy(),
-      type: b.SizePolicy,
+    } : e === d.Fixed && (this.model.sizePolicy = {
+      ...this.model.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 = l.symbol, this.selectedElement = this.model.getFixedMarkerSymbol()?.color) : t.value === "selectTrendLine" && (this.contentKind = l.trendLine, this.selectedElement = this.model.getLinearTrendSymbol());
+    t.localName === "calcite-icon" && (t = t.parentElement), t.value === "selectColor" ? (this.contentKind = a.symbol, this.selectedElement = this.model.fixedMarkerSymbol?.color) : t.value === "selectTrendLine" && (this.contentKind = a.trendLine, this.selectedElement = this.model.linearTrendSymbol);
+  }
+  onXVariableSelectChange(e) {
+    e.stopImmediatePropagation(), this.contentKind = a.xAxisField, this.selectedElement = this.model.xAxisField;
   }
-  onXVariableSelectChange() {
-    this.contentKind = l.xAxisField, this.selectedElement = this.model.getXAxisField();
+  onYVariableSelectChange(e) {
+    e.stopImmediatePropagation(), this.contentKind = a.yAxisField, this.selectedElement = this.model.yAxisField;
   }
-  onYVariableSelectChange() {
-    this.contentKind = l.yAxisField, this.selectedElement = this.model.getYAxisField();
+  onAdditionalTooltipFieldSelectChange(e) {
+    e.stopImmediatePropagation(), this.contentKind = a.additionalTooltipFields, this.selectedElement = this.model.additionalTooltipField?.[0] ?? "";
   }
-  onSizeVariableSelectChange() {
-    this.contentKind = l.sizeVariable, this.selectedElement = this.model.getSizePolicy()?.field ?? "";
+  onSizeVariableSelectChange(e) {
+    e.stopImmediatePropagation(), this.contentKind = a.sizeVariable, this.selectedElement = this.model.sizePolicy?.field ?? "";
   }
-  setupScatterplotPopover() {
+  setupPopover() {
     this.scatterplotPopover = x(this.scatterplotPopover);
-    const e = {
-      setTrendLineSymbol: this.setTrendLineSymbol,
-      setFixedSymbolRGBAColor: this.setFixedSymbolRGBAColor,
-      setXYField: this.setXYField,
-      setSizeVariableField: this.setSizeVariableField,
-      openChange: this.openChange,
-      popoverClose: this.closeScatterplotPopover
-    };
-    switch (this.scatterplotPopover = L(k.ScatterplotDataPopover, e), this.scatterplotPopover.layerFieldsInfo = [...this.layerFieldsInfo], this.scatterplotPopover.contentKind = this.contentKind, this.contentKind) {
-      case l.xAxisField:
-        this.scatterplotPopover.referenceElement = this.xAxisElement.value, this.scatterplotPopover.placement = "trailing", this.scatterplotPopover.selectedContent = this.model.getXAxisField(), this.scatterplotPopover.headingTitle = this._messages.selectAField;
+    const e = [...this.layerFieldsInfo];
+    let t, s, o, n = "trailing";
+    switch (this.contentKind) {
+      case a.xAxisField:
+        t = this.xAxisElement.value, o = this.model.xAxisField, s = this._messages.selectAField;
         break;
-      case l.yAxisField:
-        this.scatterplotPopover.referenceElement = this.yAxisElement.value, this.scatterplotPopover.placement = "trailing", this.scatterplotPopover.selectedContent = this.model.getYAxisField(), this.scatterplotPopover.headingTitle = this._messages.selectAField;
+      case a.yAxisField:
+        t = this.yAxisElement.value, o = this.model.yAxisField, s = this._messages.selectAField;
         break;
-      case l.sizeVariable:
-        this.scatterplotPopover.referenceElement = this.sizeVariableElement.value, this.scatterplotPopover.placement = "trailing", this.scatterplotPopover.selectedContent = this.model.getSizePolicy()?.field ?? "", this.scatterplotPopover.headingTitle = this._messages.selectAField;
+      case a.sizeVariable:
+        t = this.sizeVariableElement.value, o = this.model.sizePolicy?.field ?? "", s = this._messages.selectAField;
         break;
-      case l.symbol:
-      case l.trendLine: {
-        const t = this.selectedElement;
-        this.scatterplotPopover.selectedContent = this.selectedElement, this.scatterplotPopover.placement = "leading", Array.isArray(this.selectedElement) ? this.scatterplotPopover.referenceElement = this.selectColorElement.value : t?.type === z.SLS && (this.scatterplotPopover.referenceElement = this.selectTrendLineElement.value);
+      case a.additionalTooltipFields:
+        t = this.tooltipFieldElement.value, o = this.model.additionalTooltipField?.[0] ?? "", s = this._messages.selectAField;
+        break;
+      case a.symbol:
+      case a.trendLine: {
+        const p = this.selectedElement;
+        o = this.selectedElement, n = "leading", Array.isArray(this.selectedElement) ? t = this.selectColorElement.value : p?.type === $.SLS && (t = this.selectTrendLineElement.value);
         break;
       }
       default:
-        this.contentKind = l.none, this.removeScatterplotPopover();
+        this.contentKind = a.none, this.removeScatterplotPopover();
         break;
     }
-    this.contentKind !== l.none && (this.scatterplotPopover.open = !0, this.addScatterplotPopover());
+    this.scatterplotPopover = D(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${s} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .selectedContent=${o} .placement=${n} @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 = x(this.scatterplotPopover)), this.selectedElement = {};
   }
-  addScatterplotPopover() {
-    !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== void 0 && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
-  }
   getCurrentSymbolSizeType() {
-    const e = this.model.getSizePolicy();
-    return e === void 0 || e.field === "" ? h.Fixed : h.Proportional;
+    const e = this.model.sizePolicy;
+    return e === void 0 || e.field === "" ? d.Fixed : d.Proportional;
   }
   renderXVariable() {
-    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getXAxisField() ?? "")} @click=${this.onXVariableSelectChange} ${a(this.xAxisElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.xAxisField ?? "")} @click=${this.onXVariableSelectChange} ${c(this.xAxisElement)}></arcgis-charts-config-field-select>`;
   }
   renderYVariable() {
-    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getYAxisField() ?? "")} @click=${this.onYVariableSelectChange} ${a(this.yAxisElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.yAxisField ?? "")} @click=${this.onYVariableSelectChange} ${c(this.yAxisElement)}></arcgis-charts-config-field-select>`;
+  }
+  renderTooltipField() {
+    return r`<arcgis-charts-config-field-select .disabled=${this.model.dataStore.aggregated} .label=${b(this.layerFieldsInfo, this.model.additionalTooltipField?.[0] ?? "")} @click=${this.onAdditionalTooltipFieldSelectChange} ${c(this.tooltipFieldElement)}></arcgis-charts-config-field-select>`;
   }
   renderStatistics() {
-    const [e, t, o, n] = [...this.model.getLinearTrendSymbol()?.color ?? C(0)];
-    return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(s.switchElement)} .checked=${this.model.getShowLinearTrend()} @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.getShowLinearTrend()} .selected=${this.selectedElement?.type === z.SLS} @click=${this.changeElementStyle} ${a(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${P({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(s.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, V)}`}</div></div>`;
+    const [e, t, s, o] = [...this.model.linearTrendSymbol?.color ?? z(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 === $.SLS} @click=${this.changeElementStyle} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${I({ color: `rgba(${e},${t},${s},${o / 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 : k(this.r2, M)}`}</div></div>`;
   }
   renderFixedSymbol() {
-    return r`<calcite-label class=${i(s.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${i(s.numberInput)} min=1 max=100 step=1 .value=${u(this.model.getFixedMarkerSymbol()?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
+    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>`;
   }
   renderSizeVariable() {
-    return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getSizePolicy()?.field ?? "")} .invalid=${this.layerFieldsInfo.find((e) => e.name === this.model.getSizePolicy()?.field) === void 0} @click=${this.onSizeVariableSelectChange} ${a(this.sizeVariableElement)}></arcgis-charts-config-field-select>`;
+    return r`<arcgis-charts-config-field-select .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-select>`;
   }
   renderMinSizeInput() {
-    return r`<calcite-input type=number name=proportional-symbol-min-size class=${i(s.numberInput)} min=1 .max=${this.model.getSizePolicy()?.maxSize ?? 100} step=1 .value=${u(this.model.getSizePolicy()?.minSize)} @calciteInputInput=${this.symbolSizeChange} ${a(this.minSizeInputElement)}></calcite-input>`;
+    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>`;
   }
   renderMaxSizeInput() {
-    return r`<calcite-input type=number name=proportional-symbol-max-size class=${i(s.numberInput)} .min=${this.model.getSizePolicy()?.minSize ?? 1} max=100 step=1 .value=${u(this.model.getSizePolicy()?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${a(this.maxSizeInputElement)}></calcite-input>`;
+    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>`;
   }
   renderProportionalSymbol() {
-    return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(s.multiInputSection)}><calcite-label class=${i(s.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${$(u(this.model.getSizePolicy()?.minSize))} .maxValue=${$(u(this.model.getSizePolicy()?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
+    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>`;
   }
   renderSymbolSizeType() {
-    return r`<calcite-label class=${i(s.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${a(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${h.Fixed} .checked=${h.Fixed === this.selectedSizeType} ${a(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${h.Proportional} .checked=${h.Proportional === this.selectedSizeType} ${a(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
+    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>`;
   }
   renderSymbol() {
-    const [e, t, o, n] = [...this.model.getFixedMarkerSymbol()?.color ?? C(0)];
-    return r`<div class=${i(s.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === h.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(s.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${a(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.getColorMatch()} ${a(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.getColorMatch() && this.isTableLayer !== !0} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${a(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${P({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+    const [e, t, s, o] = [...this.model.fixedMarkerSymbol?.color ?? z(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 !== !0 ? 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 !== !0} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${I({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
   render() {
-    return r`<div class=${i({ [s.rtl]: this.direction === "rtl" })}><h3 class=${i(s.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(s.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><h3 class=${i(s.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(s.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}</div>`;
+    return r`<div><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()}</div>`;
   }
 }
-E("arcgis-charts-config-scatter-plot-data", K);
+P("arcgis-charts-config-scatter-plot-data", R);
 export {
-  K as ArcgisChartsConfigScatterplotData
+  R as ArcgisChartsConfigScatterplotData
 };

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

@@ -1,3 +1,4 @@
+import "../arcgis-charts-config-scatter-plot-popover/index.js";
 import "../arcgis-charts-config-field-select/index.js";
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-switch";

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

@@ -1,3 +1,4 @@
+import "../arcgis-charts-config-scatter-plot-popover/index.js";
 import "../arcgis-charts-config-field-select/index.js";
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-switch";

package/dist/components/arcgis-charts-config-scatter-plot-data/resource.d.ts

@@ -8,5 +8,5 @@ export declare const HTMLClasses: {
     readonly switchElement: "switch-element";
     readonly sectionContainer: "section-container";
     readonly multiInputSection: "multi-input-section";
-    readonly rtl: "arcgis-charts-rtl";
+    readonly dimText: "dim-text";
 };

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

@@ -1,8 +1,6 @@
-/// <reference types="../../index.d.ts" />
-import { Color, IField, ISimpleLineSymbol } from '@arcgis/charts-spec';
+/// <reference path="../../index.d.ts" />
+import { Color, IField, ISimpleLineSymbol } from '../../spec';
 import { ScatterplotDataPopoverKinds } from '../../interfaces';
-import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
-import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 /** @private */
@@ -64,35 +62,35 @@ export declare class ArcgisChartsConfigScatterplotPopover extends LitElement {
      * @category Public
      */
     readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, void>;
-    /**
-     * Event emitted when the popover is closed.
-     *
-     * @category Public
-     */
-    readonly arcgisChartsConfigPopoverOpenChange: TargetedEvent<this, PopoverOpenChangePayload>;
     /**
      * Event emitted when there is a change in text property.
      *
      * @category Public
      */
-    readonly arcgisChartsConfigScatterplotFillColorChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotFillColorChange: TargetedEvent<this, Color>;
     /**
      * Event emitted when there is a change in symbol property.
      *
-     * @category Public
+     * @category Pu
      */
-    readonly arcgisChartsConfigScatterplotLineStyleChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotLineStyleChange: TargetedEvent<this, ISimpleLineSymbol>;
     /**
      * Event emitted when there is a change in size variable field type.
      *
      * @event
      */
-    readonly arcgisChartsConfigScatterplotSizeVariableFieldChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotSizeVariableFieldChange: TargetedEvent<this, string>;
+    /**
+     * Event emitted when there is a change in tooltip display field type.
+     *
+     * @event
+     */
+    readonly arcgisChartsConfigScatterplotAdditionalTooltipFieldChange: TargetedEvent<this, string>;
     /**
      * Event emitted when there is a change in X-axis or Y-axis field type.
      *
      * @event
      */
-    readonly arcgisChartsConfigScatterplotXYFieldChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotXYFieldChange: TargetedEvent<this, string>;
     private _messages;
 }