@arcgis/charts-components 5.2.0-next.11 → 5.2.0-next.111

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

@@ -1,16 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as T } from "../../chunks/runtime.js";
+import { c as L } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
-import { debounce as C, isEmpty as E, toNumber as x } from "lodash-es";
-import { b as $, a as N, s as p } from "../../chunks/chart-ui-utils2.js";
-import { u as G } from "../../chunks/useT9n.js";
-import { css as _, html as d } from "lit";
+import { debounce as $, isEmpty as E, toNumber as x } from "lodash-es";
+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 { 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 { b as h } from "../../chunks/common.js";
-import { aw as I, ax as y } from "../../chunks/index.js";
+import { a4 as I, p as y } from "../../chunks/index3.js";
 import { r as P } from "../../chunks/popover-ui-utils.js";
-import { i as z } from "../../chunks/rest-js-object-literals.js";
+import { b as M } from "../../chunks/rest-js-object-literals.js";
 const a = {
   sectionLabel: "section-label",
   label: "label",
@@ -20,46 +20,50 @@ const a = {
   sliderInputContainer: "slider-input-container",
   groupingLabelContainer: "grouping-label-container",
   numberInput: "number-input"
-}, 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{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{display:flex}.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}.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 k extends w {
+}, 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 {
   constructor() {
-    super(...arguments), this._messages = G(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = C(() => {
+    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);
-    }, $.SliderTimer), this.onGroupingThresholdSliderChange = C(() => {
+    }, 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;
-    }, $.SliderTimer), this.sliceNameChange = (e) => {
+    }, C.SliderTimer), this.sliceNameChange = (e) => {
       if (e.detail !== null || e.detail !== void 0) {
-        const l = e.detail?.name, i = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
-        i != null && i >= 0 ? this.model.setSliceName(l, i) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.sliceGrouping = {
+        const i = e.detail?.name, l = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
+        l != null && l >= 0 ? this.model.setSliceName(i, l) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.sliceGrouping = {
           ...t,
-          label: l
+          label: i
         });
       }
     }, this.sliceColorChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
-        const { color: l } = e.detail, i = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
-        i != null && i >= 0 ? (this.model.colorMatch = !1, this.model.setSliceColor(l, i)) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.colorMatch = !1, this.model.sliceGrouping = {
+        const { color: i } = e.detail, l = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
+        l != null && l >= 0 ? (this.model.colorMatch = !1, this.model.setSliceColor(i, l)) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.colorMatch = !1, this.model.sliceGrouping = {
           ...t,
           fillSymbol: {
             ...t.fillSymbol,
-            type: z.SFS,
-            color: l
+            type: M.SFS,
+            color: i
           }
         });
       }
     }, this.slicesPopoverClose = (e) => {
-      const { selectedSliceId: l } = e.detail;
-      l === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = P(this.slicesPopover));
+      const { selectedSliceId: i } = e.detail;
+      i === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = P(this.slicesPopover));
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.popoverPlacement = "leading";
+    }, this.onGroupingThresholdChange = $(() => {
+      const e = this.groupingThresholdElement.value?.value ?? "";
+      let i = Number.parseInt(e);
+      i > 100 ? i = 100 : i < 0 && (i = 0), Number.isNaN(i) ? this.model.groupingThreshold = 0 : (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = i.toString()), this.model.groupingThreshold = i, this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = i));
+    }, C.DebounceTimer), this.popoverPlacement = "leading";
   }
   static {
     this.properties = { selectedSliceId: 16, messageOverrides: 0, model: 0, popoverPlacement: 1, chartData: 0 };
   }
   static {
-    this.styles = M;
+    this.styles = k;
   }
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
@@ -70,114 +74,109 @@ class k extends w {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeSlicesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  modelChange(e, l) {
-    l?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+  modelChange(e, i) {
+    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   selectedSliceIdChange() {
     if (!E(this.selectedSliceId)) {
-      const e = this.model.slices, l = this.model.sliceGrouping;
-      let i, t;
-      if (this.selectedSliceId === l?.sliceId)
-        i = l?.label, t = l?.fillSymbol?.color;
+      const e = this.model.slices, i = this.model.sliceGrouping;
+      let l, t;
+      if (this.selectedSliceId === i?.sliceId)
+        l = i?.label, t = i?.fillSymbol?.color;
       else if (e !== void 0) {
         const r = e.findIndex((n) => n.sliceId === this.selectedSliceId);
-        i = this.model.getSliceName(r), t = this.model.getSliceColor(r);
+        l = this.model.getSliceName(r), t = this.model.getSliceColor(r);
       }
-      this.slicesPopover = S(d`<arcgis-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${i} .selectedColor=${t} @arcgisChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @arcgisChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @arcgisChartsConfigPopoverClose=${this.slicesPopoverClose}></arcgis-charts-config-pie-chart-slices-popover>`), this.slicesPopover && !document.body.contains(this.slicesPopover) && document.body.appendChild(this.slicesPopover);
+      this.slicesPopover = S(d`<arcgis-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${l} .selectedColor=${t} @arcgisChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @arcgisChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @arcgisChartsConfigPopoverClose=${this.slicesPopoverClose}></arcgis-charts-config-pie-chart-slices-popover>`), this.slicesPopover && !document.body.contains(this.slicesPopover) && document.body.appendChild(this.slicesPopover);
     }
   }
   removeSlicesPopover() {
     this.slicesPopover !== void 0 && this.slicesPopover !== null && (this.slicesPopover.open = !1, this.slicesPopover.selectedName = void 0, this.slicesPopover.selectedColor = void 0, this.slicesPopover = P(this.slicesPopover));
   }
   buildSliceListItem() {
-    let e = "#CCCCCC", l = "minus-square";
-    const i = [];
+    let e = "#CCCCCC", i = "minus-square";
+    const l = [];
     let t = this.model.slices;
     const r = this.chartData?.dataItems;
     r && (t = t?.filter((o) => r?.findIndex((c) => c.arcgis_charts_slice_id === o.sliceId) !== -1)), t?.forEach((o) => {
       if (o.fillSymbol?.color !== void 0) {
-        l = "square-f";
-        const [c, b, v, L] = [...o.fillSymbol.color];
-        e = `rgba(${c},${b},${v},${L / 255})`;
+        i = "square-f";
+        const [c, b, v, T] = [...o.fillSymbol.color];
+        e = `rgba(${c},${b},${v},${T / 255})`;
       }
       if (o !== void 0 && !this.model.groupedSliceIds.includes(o.sliceId)) {
         let c = o.sliceId;
-        c === y.emptySliceId ? c = this._messages.emptySlice ?? "" : c === y.nullSliceId && (c = this._messages.nullSlice ?? ""), i?.push(f(o.sliceId, d`<calcite-list-item .label=${o.label ?? o.sliceId} .description=${c} .value=${o.sliceId} .selected=${this.selectedSliceId === o.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
+        c === y.emptySliceId ? c = this._messages.emptySlice ?? "" : c === y.nullSliceId && (c = this._messages.nullSlice ?? ""), l?.push(f(o.sliceId, d`<calcite-list-item .label=${o.label ?? o.sliceId} .description=${c} .value=${o.sliceId} .selected=${this.selectedSliceId === o.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${i} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
       }
     });
     const n = this.model.sliceGrouping;
     if (n?.fillSymbol?.color !== void 0) {
-      l = "square-f";
+      i = "square-f";
       const [o, c, b, v] = [...n.fillSymbol.color];
       e = `rgba(${o},${c},${b},${v / 255})`;
     }
-    return this.model.groupedSliceIds.length > 0 && i?.push(f(n?.sliceId, d`<calcite-list-item .label=${n?.label ?? n?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${n?.sliceId ?? ""} .selected=${this.selectedSliceId === n?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`)), i;
+    return this.model.groupedSliceIds.length > 0 && l?.push(f(n?.sliceId, d`<calcite-list-item .label=${n?.label ?? n?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${n?.sliceId ?? ""} .selected=${this.selectedSliceId === n?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${i} style=${u({ color: e })}></calcite-icon></calcite-list-item>`)), l;
   }
   buildGroupedSlicesListItem() {
-    let e = "#CCCCCC", l = "minus-square";
-    const i = [];
+    let e = "#CCCCCC", i = "minus-square";
+    const l = [];
     return this.model.slices?.forEach((t) => {
       if (t.fillSymbol?.color !== void 0) {
-        l = "square-f";
+        i = "square-f";
         const [r, n, o, c] = [...t.fillSymbol.color];
         e = `rgba(${r},${n},${o},${c / 255})`;
       }
-      t !== void 0 && this.model.groupedSliceIds.includes(t.sliceId) && i?.push(f(t.sliceId, d`<calcite-list-item .label=${t.label ?? t.sliceId} .description=${t.sliceId} .value=${t.sliceId} .selected=${this.selectedSliceId === t.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
-    }), i;
+      t !== void 0 && this.model.groupedSliceIds.includes(t.sliceId) && l?.push(f(t.sliceId, d`<calcite-list-item .label=${t.label ?? t.sliceId} .description=${t.sliceId} .value=${t.sliceId} .selected=${this.selectedSliceId === t.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${i} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
+    }), l;
   }
   buildSliceList() {
-    return d`<calcite-list label class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
+    return d`<calcite-list .label=${this._messages.slices ?? ""} class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
   }
   buildGroupedSliceList() {
-    return d`<calcite-list label class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
-  }
-  onGroupingThresholdChange(e) {
-    const l = e.target.value;
-    let i = Number.parseInt(l);
-    i > 100 ? i = 100 : i < 0 && (i = 0), Number.isNaN(i) ? this.model.groupingThreshold = 0 : (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = i.toString()), this.model.groupingThreshold = i, this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = i));
+    return d`<calcite-list .label=${this._messages.groupedSlices ?? ""} class=${s(a.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
   }
   onLabelCharacterLimitChange(e) {
-    const l = e.target.value;
-    let i = Number.parseInt(l);
-    i < 1 && (i = 1), Number.isNaN(i) ? this.model.labelCharacterLimit = null : (this.labelCharacterLimitElement.value && (this.labelCharacterLimitElement.value.value = i.toString()), this.model.labelCharacterLimit = i);
+    const i = e.target.value;
+    let l = Number.parseInt(i);
+    l < 1 && (l = 1), Number.isNaN(l) ? this.model.labelCharacterLimit = null : (this.labelCharacterLimitElement.value && (this.labelCharacterLimitElement.value.value = l.toString()), this.model.labelCharacterLimit = l);
   }
   onDecimalPlacesChange(e) {
-    const l = e.target.value;
-    let i = Number.parseInt(l);
-    i < 0 ? i = 0 : i > 20 && (i = 20), Number.isNaN(i) ? this.model.decimalPlaces = 0 : (this.decimalPlacesElement.value && (this.decimalPlacesElement.value.value = i.toString()), this.model.decimalPlaces = i);
+    const i = e.target.value;
+    let l = Number.parseInt(i);
+    l < 0 ? l = 0 : l > 20 && (l = 20), Number.isNaN(l) ? this.model.decimalPlaces = 0 : (this.decimalPlacesElement.value && (this.decimalPlacesElement.value.value = l.toString()), this.model.decimalPlaces = l);
   }
   onDisplayTypeChange(e) {
-    const l = e.target.selectedItem;
-    this.model.displayType = l?.value;
+    const i = e.target.selectedItem;
+    this.model.displayType = i?.value;
   }
   resetSlicesOriginal() {
     this.selectedSliceId = void 0, this.model.colorMatch = !0, this.model.resetSlices();
   }
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
-      const { newIndex: l, oldIndex: i } = e.detail;
-      this.model.moveSeries(i ?? 0, l ?? i ?? 0);
+      const { newIndex: i, oldIndex: l } = e.detail;
+      this.model.moveSeries(l ?? 0, i ?? l ?? 0);
     }
   }
   openSlicesPopover(e) {
     e.stopImmediatePropagation(), this.removeSlicesPopover();
-    const l = e.target, i = l.localName === "calcite-list-item" ? l : l.parentNode;
-    i.value === this.model.sliceGrouping?.sliceId ? this.selectedSliceId = this.model.sliceGrouping?.sliceId : this.selectedSliceId = i.value, this.open = !0;
+    const i = e.target, l = i.localName === "calcite-list-item" ? i : i.parentNode;
+    l.value === this.model.sliceGrouping?.sliceId ? this.selectedSliceId = this.model.sliceGrouping?.sliceId : this.selectedSliceId = l.value, this.open = !0;
   }
   createTooltip(e) {
-    const l = e.target;
-    this.tooltip = S(d`<calcite-tooltip style=${u({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${l} open placement=top .innerHTML=${this._messages.groupingInfo ?? "" ?? ""}></calcite-tooltip>`), document.body.appendChild(this.tooltip);
+    const i = e.currentTarget;
+    this.tooltip = S(d`<calcite-tooltip style=${u({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${i} open placement=top .innerHTML=${this._messages.groupingInfo ?? "" ?? ""}></calcite-tooltip>`), document.body.appendChild(this.tooltip);
   }
   destroyTooltip() {
     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 @mouseover=${this.createTooltip} @mouseout=${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.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) => {
       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()}`;
   }
 }
-T("arcgis-charts-config-pie-chart-slices", k);
+L("arcgis-charts-config-pie-chart-slices", D);
 export {
-  k as ArcgisChartsConfigPieChartSlices
+  D as ArcgisChartsConfigPieChartSlices
 };

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

@@ -5,10 +5,10 @@ import { u as m } from "../../chunks/useT9n.js";
 import { createRef as d, ref as g } from "lit/directives/ref.js";
 import { LitElement as C, createEvent as s, safeClassMap as r } from "@arcgis/lumina";
 import { e as v } from "../../chunks/popover-ui-utils.js";
-import { aB as f } from "../../chunks/index.js";
+import { r as f } from "../../chunks/index3.js";
 const c = {
   panelChildrenContainer: "panel-children-container"
-}, u = p`.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;width:min-content}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
+}, u = p`.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;width:min-content}.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 y extends C {
   constructor() {
     super(...arguments), this._messages = m(), this.popoverElement = d(), this.selectedSliceId = "", this.open = !1, this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSlicesPopoverColorChange = s(), this.arcgisChartsConfigSlicesPopoverNameChange = s();
@@ -40,7 +40,7 @@ class y extends C {
   }
   render() {
     const e = this.selectedColor !== void 0 ? [...this.selectedColor] : void 0;
-    return h`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${r(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${r(c.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return h`<div><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} .label=${this._messages.sliceStyle ?? ""} auto-close ${g(this.popoverElement)}><calcite-panel .heading=${this._messages.sliceStyle} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${r(c.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.sliceNameChange}></calcite-input></calcite-label></div><div class=${r(c.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 n("arcgis-charts-config-pie-chart-slices-popover", y);

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

@@ -2,12 +2,12 @@
 import { c as r } from "../../chunks/runtime.js";
 import { isEqual as l } from "lodash-es";
 import { LitElement as n, createEvent as d } from "@arcgis/lumina";
-import { css as c, html as i } from "lit";
-import { C as s } from "../../chunks/interfaces.js";
-import { ac as h, bw as f, I as p, ak as g } from "../../chunks/index2.js";
-import { h as m } from "../../chunks/index5.js";
-const u = 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 y extends n {
+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 { 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 {
   constructor() {
     super(...arguments), this.onModelConfigChange = async (e) => {
       const t = e?.detail.config ?? this.model.config;
@@ -18,7 +18,7 @@ class y extends n {
     this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 1, r2: 9, calculatedDataMinMaxBounds: 0, calculatedMinMaxBounds: 0, page: 1, layer: 0, usePopupTemplateFieldsInfo: 5, popupTemplateFieldInfosEnabled: 5 };
   }
   static {
-    this.styles = u;
+    this.styles = b;
   }
   async load() {
     await this.updateFetchLayerFieldsInfo(this.model?.config), this.modelChange(this.model);
@@ -37,29 +37,33 @@ class y extends n {
     const a = e ?? this.model.config;
     let t = this.layer;
     if (!t) {
-      const o = m(a) ? a.iLayer : void 0;
-      o && (t = await h(o));
+      const i = h(a) ? a.iLayer : void 0;
+      i && (t = await p(i));
+    }
+    if (t) {
+      await f(t);
+      const i = this.usePopupTemplateFieldsInfo || this.popupTemplateFieldInfosEnabled;
+      this.layerFieldsInfo = y(t) ? g({ layer: t, popupTemplateFieldInfosEnabled: i, chartType: a?.type }) : m(t, i);
     }
-    t && (await f(t), this.layerFieldsInfo = p(t, this.usePopupTemplateFieldsInfo || this.popupTemplateFieldInfosEnabled));
   }
   render() {
     let e;
     switch (this.page) {
-      case s.Data:
-        const a = g(this.layer), t = a && "isTable" in a ? a.isTable : !1;
-        e = i`<arcgis-charts-config-scatter-plot-data .model=${this.model} .r2=${this.r2} .layerFieldsInfo=${this.layerFieldsInfo} .isTableLayer=${t}></arcgis-charts-config-scatter-plot-data>`;
+      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>`;
         break;
-      case s.Axes:
-        e = i`<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>`;
+      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>`;
         break;
-      case s.Guides:
-        e = i`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
+      case o.Guides:
+        e = s`<arcgis-charts-config-guides .model=${this.model} enable-x-axis-guide enable-y-axis-guide></arcgis-charts-config-guides>`;
         break;
-      case s.Format:
-        e = i`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
+      case o.Format:
+        e = s`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
         break;
-      case s.General:
-        e = i`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
+      case o.General:
+        e = s`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         e = "";
@@ -68,7 +72,7 @@ class y extends n {
     return e;
   }
 }
-r("arcgis-charts-config-scatter-plot", y);
+r("arcgis-charts-config-scatter-plot", F);
 export {
-  y as ArcgisChartsConfigScatterplot
+  F as ArcgisChartsConfigScatterplot
 };

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

@@ -1,19 +1,19 @@
 /* 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 { S as n, g as d } from "../../chunks/interfaces.js";
+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, n as M, s as y, D as w, U as u } from "../../chunks/chart-ui-utils2.js";
-import { c as z } from "../../chunks/type-guards.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 _, html as r } from "lit";
+import { css as V, html as r } from "lit";
 import { createRef as h, ref as c } from "lit/directives/ref.js";
-import { LitElement as V, createEvent as x, renderElement as D, safeClassMap as i, safeStyleMap as E } from "@arcgis/lumina";
-import { _ as N, F as I, aB as R } from "../../chunks/index.js";
-import { d as b } from "../../chunks/index3.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 { b } from "../../chunks/index2.js";
 import { r as P } from "../../chunks/popover-ui-utils.js";
-import { i as T } from "../../chunks/rest-js-object-literals.js";
-import { u as $ } from "../../chunks/chart-object-literals.js";
+import { b as T } from "../../chunks/rest-js-object-literals.js";
+import { a as $ } from "../../chunks/chart-object-literals.js";
 const l = {
   label: "label",
   r2: "r2",
@@ -24,8 +24,8 @@ const l = {
   sectionContainer: "section-container",
   multiInputSection: "multi-input-section",
   dimText: "dim-text"
-}, 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}`;
-class X extends V {
+}, 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 _ {
   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;
@@ -236,13 +236,13 @@ class X extends V {
     return e === void 0 || e.field === "" ? d.Fixed : d.Proportional;
   }
   renderXVariable() {
-    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>`;
+    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>`;
   }
   renderYVariable() {
-    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>`;
+    return r`<arcgis-charts-config-field-picker .label=${b(this.layerFieldsInfo, this.model.yAxisField ?? "")} @click=${this.onYVariableSelectChange} ${c(this.yAxisElement)}></arcgis-charts-config-field-picker>`;
   }
   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>`;
+    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)];
@@ -252,7 +252,7 @@ class X extends V {
     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=${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>`;
+    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>`;

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

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

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

@@ -2,25 +2,25 @@
 import { c as g } from "../../chunks/runtime.js";
 import { css as f, html as o } from "lit";
 import { keyed as c } from "lit/directives/keyed.js";
-import { S as a } from "../../chunks/interfaces.js";
-import { b as v, o as y, e as p } from "../../chunks/chart-ui-utils2.js";
-import { u as S } from "../../chunks/useT9n.js";
+import { f as a } from "../../chunks/interfaces.js";
+import { b as v, o as y, e as p } from "../../chunks/chart-ui-utils.js";
+import { u } from "../../chunks/useT9n.js";
 import { createRef as h, ref as d } from "lit/directives/ref.js";
-import { LitElement as u, createEvent as l, safeClassMap as r } from "@arcgis/lumina";
-import { i as m } from "../../chunks/rest-js-object-literals.js";
+import { LitElement as S, createEvent as l, safeClassMap as r } from "@arcgis/lumina";
+import { b as m } from "../../chunks/rest-js-object-literals.js";
 import { e as $ } from "../../chunks/popover-ui-utils.js";
-import { d as b } from "../../chunks/index3.js";
-import { bk as P } from "../../chunks/index2.js";
+import { b as P } from "../../chunks/index2.js";
+import { aN as b } from "../../chunks/index.js";
 const n = {
   scatterplotPopover: "scatter-plot-popover",
   fillColor: "fill-color",
   header: "header",
-  pickListItemLabel: "pick-list-item-label",
+  popoverPickList: "popover-pick-list",
   pickListPanel: "pick-list-panel"
-}, F = f`.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{width:100%}.pick-list-panel{max-height:60vh}`;
-class L extends u {
+}, F = f`.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{width:100%}.pick-list-panel{max-height:60vh}.popover-pick-list{font-size:small;max-width:var(--arcgis-charts-config-popover-pick-list-max-width)}`;
+class k extends S {
   constructor() {
-    super(...arguments), this.picklist = h(), this._messages = S(), this.popoverElement = h(), this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
+    super(...arguments), this.picklist = h(), this._messages = u(), this.popoverElement = h(), this.open = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 1, contentKind: 1, selectedContent: 1, referenceElement: 0, placement: 1, open: 5, layerFieldsInfo: 0 };
@@ -54,22 +54,22 @@ class L extends u {
   }
   render() {
     const e = this.selectedContent, t = this.selectedContent;
-    return o`<div><calcite-popover class=${r(n.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${y(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${d(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${r(n.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === m.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== m.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
+    return o`<div><calcite-popover class=${r(n.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${y(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${d(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${r(n.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === m.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close use-panel .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== m.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
   }
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
     (this.contentKind === a.sizeVariable || this.contentKind === a.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${p("", this.selectedContent)}></calcite-list-item>`));
     for (let i = 0; i < e; i += 1) {
       const s = this.layerFieldsInfo?.[i] ?? void 0;
-      if (s !== void 0 && (this.contentKind === a.additionalTooltipFields || P(s))) {
-        const C = b(this.layerFieldsInfo, s.name);
+      if (s !== void 0 && (this.contentKind === a.additionalTooltipFields || b(s))) {
+        const C = P(this.layerFieldsInfo, s.name);
         t.push(c(s.name, o`<calcite-list-item .label=${C} .value=${s.name} .selected=${p(s.name, this.selectedContent)}></calcite-list-item>`));
       }
     }
-    return o`<calcite-panel class=${r(n.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${r(n.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${r(n.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${d(this.picklist)}>${t}</calcite-list></calcite-panel>`;
+    return o`<calcite-panel class=${r(n.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${r(n.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${r(n.popoverPickList)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${d(this.picklist)}>${t}</calcite-list></calcite-panel>`;
   }
 }
-g("arcgis-charts-config-scatter-plot-popover", L);
+g("arcgis-charts-config-scatter-plot-popover", k);
 export {
-  L as ArcgisChartsConfigScatterplotPopover
+  k as ArcgisChartsConfigScatterplotPopover
 };

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

@@ -5,7 +5,7 @@ import { u as r } from "../../chunks/useT9n.js";
 import { createRef as n, ref as h } from "lit/directives/ref.js";
 import { LitElement as p, createEvent as a, safeClassMap as s } from "@arcgis/lumina";
 import { e as m } from "../../chunks/popover-ui-utils.js";
-import { d } from "../../chunks/type-guards.js";
+import { b as d } from "../../chunks/type-guards.js";
 import { M as e } from "../../chunks/common.js";
 const c = {
   selectChartComponent: "select-chart-component",