@arcgis/charts-components 4.34.0-next.7 → 4.34.0-next.71

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

@@ -1,9 +1,9 @@
 import { c as f } from "../../chunks/runtime.js";
-import { keyed as u } from "lit-html/directives/keyed.js";
+import { keyed as u } from "lit/directives/keyed.js";
 import "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
-import { cs as P } from "../../chunks/interfaces.js";
+import { cx as I } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -11,20 +11,19 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { r as L, c as I, P as y } from "../../chunks/popover-ui-utils.js";
-import { LitElement as x, createEvent as h, safeStyleMap as b } from "@arcgis/lumina";
-import { html as o } from "lit";
-import { repeat as O } from "lit-html/directives/repeat.js";
-import { u as $ } from "../../chunks/useT9n.js";
+import { r as d } from "../../chunks/popover-ui-utils.js";
+import { LitElement as $, renderElement as x, safeStyleMap as L } from "@arcgis/lumina";
+import { css as P, html as o } from "lit";
+import { repeat as y } from "lit-html/directives/repeat.js";
+import { u as b } from "../../chunks/useT9n.js";
 import { g as M } from "../../chunks/chart-ui-utils2.js";
-import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.7 */
-const N = k`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}`;
-class T extends x {
+v4.34.0-next.71 */
+const O = P`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}`;
+class k extends $ {
   constructor() {
-    super(...arguments), this._messages = $(), this.seriesPopover = null, this.seriesNameChange = (e) => {
+    super(...arguments), this._messages = b(), this.seriesPopover = null, this.open = !1, this.seriesNameChange = (e) => {
       if (e.detail !== null || e.detail !== void 0) {
         const s = e.detail?.name;
         this.model.setSeriesName(s, this.selectedSeriesIndex ?? -1);
@@ -44,19 +43,18 @@ class T extends x {
         const { lineWidth: s } = e.detail;
         s !== void 0 && (this.model.setSeriesLineWidth(s, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerSize(s * 2, this.selectedSeriesIndex ?? -1));
       }
-    }, this.seriesPopoverClose = () => {
-      this.selectedSeriesIndex = void 0, this.configSeriesOpen = !1;
+    }, this.seriesPopoverClose = (e) => {
+      const { selectedSeriesIndex: s } = e.detail;
+      this.selectedSeriesIndex === s && (this.seriesPopover = d(this.seriesPopover), this.selectedSeriesIndex = void 0);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.openChange = (e) => {
-      this.arcgisChartsConfigPopoverOpenChange.emit(e.detail);
-    }, this.seriesOrderResetCounter = 0, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigLineChartSeriesPopoverChange = h(), this.arcgisChartsConfigPopoverOpenChange = h();
+    }, this.seriesOrderResetCounter = 0, this.activeColorMatch = !1, this.popoverPlacement = "leading";
   }
   static {
-    this.properties = { selectedSeriesIndex: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
+    this.properties = { selectedSeriesIndex: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, activeColorMatch: 5, popoverPlacement: 1 };
   }
   static {
-    this.styles = N;
+    this.styles = O;
   }
   load() {
     this.modelChange(this.model), this.onModelConfigChange();
@@ -71,29 +69,29 @@ class T extends x {
     s?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   selectedSeriesIndexChange() {
-    this.selectedSeriesIndex !== void 0 && this.configSeriesOpen ? (this.setupSeriesPopover(), this.seriesPopover !== null && (this.seriesPopover.selectedName = this.model.getSeriesName(this.selectedSeriesIndex), this.seriesPopover.selectedColor = this.model.getSeriesColor(this.selectedSeriesIndex), this.seriesPopover.selectedLineStyle = this.model.getSeriesLineStyle(this.selectedSeriesIndex), this.seriesPopover.selectedLineWidth = this.model.getSeriesLineWidth(this.selectedSeriesIndex), this.seriesPopover.open || (this.seriesPopover.open = !0)), this.addSeriesPopover()) : this.removeSeriesPopover();
+    this.selectedSeriesIndex !== void 0 && (this.seriesPopover = x(o`<arcgis-charts-config-line-chart-series-popover .referenceElement=${this.el} .selectedName=${this.model.getSeriesName(this.selectedSeriesIndex)} .selectedColor=${this.model.getSeriesColor(this.selectedSeriesIndex)} .selectedLineStyle=${this.model.getSeriesLineStyle(this.selectedSeriesIndex)} .selectedLineWidth=${this.model.getSeriesLineWidth(this.selectedSeriesIndex)} .placement=${this.popoverPlacement} .open=${this.open} .selectedSeriesIndex=${this.selectedSeriesIndex} @arcgisChartsConfigSeriesPopoverNameChange=${this.seriesNameChange} @arcgisChartsConfigSeriesPopoverColorChange=${this.seriesColorChange} @arcgisChartsConfigSeriesPopoverLineStyleChange=${this.seriesLineStyleChange} @arcgisChartsConfigSeriesPopoverLineWidthChange=${this.seriesLineWidthChange} @arcgisChartsConfigPopoverClose=${this.seriesPopoverClose}></arcgis-charts-config-line-chart-series-popover>`), this.seriesPopover && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover));
   }
   removeSeriesPopover() {
-    this.seriesPopover !== void 0 && this.seriesPopover !== null && (this.seriesPopover.open = !1, this.seriesPopover = L(this.seriesPopover)), this.seriesPopoverChange(!1);
+    this.seriesPopover !== void 0 && this.seriesPopover !== null && (this.seriesPopover.open = !1, this.seriesPopover = d(this.seriesPopover));
   }
   buildSeriesListItems() {
     const e = this.model.getSeriesLength(), s = Array.from({ length: e }, (i, t) => t);
-    return O(s, (i) => this.model.getSeriesId(i), (i) => {
-      const t = this.model.getSeriesId(i), n = this.model.getSeriesColor(i), d = this.model.getSeriesName(i), c = this.model.getChartSubType() === P.BarAndLineFromFields ? this._messages.series : t, p = this.model.getSeriesLineStyle(i), m = M(p);
-      let l = "#CCCCCC", a = "minus-circle";
-      if ((e > 1 || !this.activeColorMatch) && n !== void 0) {
-        a = `line-${m}`;
-        const [g, C, S, v] = [...n];
-        l = `rgba(${g},${C},${S},${v / 255})`;
+    return y(s, (i) => this.model.getSeriesId(i), (i) => {
+      const t = this.model.getSeriesId(i), l = this.model.getSeriesColor(i), h = this.model.getSeriesName(i), c = this.model.getChartSubType() === I.BarAndLineFromFields ? this._messages.series : t, m = this.model.getSeriesLineStyle(i), g = M(m);
+      let n = "#CCCCCC", a = "minus-circle";
+      if ((e > 1 || !this.activeColorMatch) && l !== void 0) {
+        a = `line-${g}`;
+        const [p, C, S, v] = [...l];
+        n = `rgba(${p},${C},${S},${v / 255})`;
       }
-      return o`<calcite-list-item .label=${d ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === i} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${b({ color: l })}></calcite-icon></calcite-list-item>`;
+      return o`<calcite-list-item .label=${h ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === i} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${L({ color: n })}></calcite-icon></calcite-list-item>`;
     });
   }
   buildSeriesList() {
     return u(this.seriesOrderResetCounter, o`<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
   }
   async resetSeriesOriginal() {
-    this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
+    this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
   }
   onCalciteListOrderChange(e) {
     if (e.detail !== null && e.detail !== void 0) {
@@ -101,39 +99,16 @@ class T extends x {
       this.model.moveSeries(r, s), this.seriesOrderResetCounter += 1;
     }
   }
-  seriesPopoverChange(e) {
-    this.arcgisChartsConfigLineChartSeriesPopoverChange.emit({
-      open: e,
-      element: this.seriesPopover
-    });
-  }
   openSeriesPopOver(e) {
-    const s = e.target, r = s.localName === "calcite-list-item" ? s : s.parentNode, i = !this.configSeriesOpen, t = this.model.getSeriesIndex(r.value);
-    this.configSeriesOpen = this.selectedSeriesIndex === t ? i : !0, this.configSeriesOpen ? this.selectedSeriesIndex = t : this.selectedSeriesIndex = void 0;
-  }
-  setupSeriesPopover() {
-    if (this.seriesPopover === null && this.el !== void 0) {
-      const e = {
-        referenceElement: this.el,
-        placement: this.popoverPlacement,
-        seriesNameChange: this.seriesNameChange,
-        seriesColorChange: this.seriesColorChange,
-        seriesLineStyleChange: this.seriesLineStyleChange,
-        seriesLineWidthChange: this.seriesLineWidthChange,
-        openChange: this.openChange,
-        popoverClose: this.seriesPopoverClose
-      };
-      this.seriesPopover = I(y.LineChartSeriesPopover, e);
-    }
-  }
-  addSeriesPopover() {
-    this.seriesPopover != null && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover), this.seriesPopoverChange(!0);
+    e.stopImmediatePropagation(), this.removeSeriesPopover();
+    const s = e.target, r = s.localName === "calcite-list-item" ? s : s.parentNode, i = this.model.getSeriesIndex(r.value);
+    this.open = this.selectedSeriesIndex !== i, this.selectedSeriesIndex = this.selectedSeriesIndex !== i ? i : void 0;
   }
   render() {
     return o`<calcite-panel .heading=${this._messages.series}><calcite-button slot=header-actions-end @click=${this.resetSeriesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent scale=s icon-end=reset>${this._messages.reset}</calcite-button>${this.buildSeriesList()}</calcite-panel>`;
   }
 }
-f("arcgis-charts-config-line-chart-series", T);
+f("arcgis-charts-config-line-chart-series", k);
 export {
-  T as ArcgisChartsConfigLineChartSeries
+  k as ArcgisChartsConfigLineChartSeries
 };

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

@@ -1,3 +1,4 @@
+import "../arcgis-charts-config-line-chart-series-popover/index.js";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-list";

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

@@ -1,3 +1,4 @@
+import "../arcgis-charts-config-line-chart-series-popover/index.js";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-list";

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

@@ -1,7 +1,5 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Color, RESTSimpleLineSymbolStyle } from '@arcgis/charts-spec';
-import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
-import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 /** @private */
@@ -32,6 +30,12 @@ export declare class ArcgisChartsConfigLineChartSeriesPopover extends LitElement
      * @category Public
      */
     selectedLineStyle?: RESTSimpleLineSymbolStyle;
+    /**
+     * Index of the selected series.
+     *
+     * @category Public
+     */
+    selectedSeriesIndex?: number;
     /**
      * selected line width to show in popover
      *
@@ -62,13 +66,9 @@ export declare class ArcgisChartsConfigLineChartSeriesPopover extends LitElement
      *
      * @category Public
      */
-    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, void>;
-    /**
-     * Event emitted when the popover is closed.
-     *
-     * @category Public
-     */
-    readonly arcgisChartsConfigPopoverOpenChange: TargetedEvent<this, PopoverOpenChangePayload>;
+    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, {
+        selectedSeriesIndex: number;
+    }>;
     /**
      * Event when there is a change in series color.
      *

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

@@ -1,8 +1,9 @@
 import { c as u } from "../../chunks/runtime.js";
+import { css as f, html as C } from "lit";
 import { RESTSimpleLineSymbolStyle as i } from "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
-import { P as f } from "../../chunks/interfaces.js";
+import { R as v } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -10,28 +11,26 @@ 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 { e as C } from "../../chunks/popover-ui-utils.js";
-import { U as v, b as y, m, s as b, c as g } from "../../chunks/chart-ui-utils2.js";
-import { u as S } from "../../chunks/useT9n.js";
-import { nothing as a, html as w } from "lit";
-import { createRef as l, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as $, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
-import { css as x } from "@lit/reactive-element/css-tag.js";
+import { e as y } from "../../chunks/popover-ui-utils.js";
+import { U as S, b, m, s as w, c as g } from "../../chunks/chart-ui-utils2.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { createRef as n, ref as a } from "lit-html/directives/ref.js";
+import { LitElement as x, createEvent as s, safeClassMap as l, nothing as r } 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.7 */
-const n = {
+v4.34.0-next.71 */
+const o = {
   jsAppFlyout: "js-app-flyout",
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   panelChildrenContainer: "panel-children-container"
-}, E = x`.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 calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
-class I extends $ {
+}, E = f`.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 calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
+class I extends x {
   constructor() {
-    super(...arguments), this._messages = S(), this.popoverElement = l(), this.lineWidthInputElement = l(), this.lineStyleDropdownElement = l(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigPopoverOpenChange = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
+    super(...arguments), this._messages = $(), this.popoverElement = n(), this.lineWidthInputElement = n(), this.lineStyleDropdownElement = n(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSeriesPopoverColorChange = s(), this.arcgisChartsConfigSeriesPopoverLineStyleChange = s(), this.arcgisChartsConfigSeriesPopoverLineWidthChange = s(), this.arcgisChartsConfigSeriesPopoverNameChange = s();
   }
   static {
-    this.properties = { messageOverrides: 0, referenceElement: 2, selectedName: 3, selectedColor: 2, selectedLineStyle: 3, selectedLineWidth: 11, placement: 3, open: 7 };
+    this.properties = { messageOverrides: 0, referenceElement: 2, selectedName: 3, selectedColor: 2, selectedLineStyle: 3, selectedSeriesIndex: 11, selectedLineWidth: 11, placement: 3, open: 7 };
   }
   static {
     this.styles = E;
@@ -39,30 +38,23 @@ class I extends $ {
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
-  willUpdate(e) {
-    e.has("open") && (this.hasUpdated || !this.open) && this.openChange();
-  }
   updated() {
-    C(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
+    y(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
       this.popoverElement.value?.reposition();
-    }, v.PopoverTimer);
-  }
-  loaded() {
-    this.openChange();
-  }
-  openChange() {
-    this.arcgisChartsConfigPopoverOpenChange.emit({ open: this.open });
+    }, S.PopoverTimer);
   }
   seriesNameChange(e) {
     const t = e.target.value;
     this.selectedName !== t && (this.selectedName = t, this.arcgisChartsConfigSeriesPopoverNameChange.emit({ name: t }));
   }
   closePopover() {
-    this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
+    this.open = !1, this.arcgisChartsConfigPopoverClose.emit({
+      selectedSeriesIndex: this.selectedSeriesIndex ?? -1
+    });
   }
   colorChange(e) {
-    const t = e instanceof CustomEvent ? e.detail : e, [c, p, d] = t, h = f * 255;
-    this.selectedColor = [c, p, d, h], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [c, p, d, h] });
+    const t = e instanceof CustomEvent ? e.detail : e, [c, d, p] = t, h = v * 255;
+    this.selectedColor = [c, d, p, h], this.arcgisChartsConfigSeriesPopoverColorChange.emit({ color: [c, d, p, h] });
   }
   lineStyleChange() {
     const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
@@ -70,7 +62,7 @@ class I extends $ {
   }
   lineWidthChange() {
     const e = Number.parseInt(this.lineWidthInputElement.value?.value ?? "");
-    this.lineWidthInputElement.value?.value !== void 0 && y(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
+    this.lineWidthInputElement.value?.value !== void 0 && b(e, this.lineWidthInputElement.value.min, this.lineWidthInputElement.value.max) ? (this.selectedLineWidth = e, this.arcgisChartsConfigSeriesPopoverLineWidthChange.emit({ lineWidth: e }), m({
       inputElement: this.lineWidthInputElement.value,
       status: g.IDLE
     })) : this.lineWidthInputElement.value && m({
@@ -96,7 +88,7 @@ class I extends $ {
   }
   render() {
     const e = this.selectedColor;
-    return w`<div class=${o({ [n.jsAppFlyout]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label ${r(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${o(n.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${o(n.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${r(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${o(n.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? a}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? a}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? a}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${b(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${r(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${o(n.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+    return C`<div class=${l({ [o.jsAppFlyout]: !0 })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${a(this.popoverElement)}><calcite-panel .heading=${this._messages.seriesElement} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div class=${l(o.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${this.seriesNameChange}></calcite-input></calcite-label></div><div class=${l(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${a(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.getSelectedLineStyleInfo().icon} slot=trigger kind=neutral appearance=outline-fill><label class=${l(o.dropdownText)}>${this.getSelectedLineStyleInfo().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.selectedLineStyle === i.Solid} accesskey=${i.Solid ?? r}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.selectedLineStyle === i.Dot} accesskey=${i.Dot ?? r}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.selectedLineStyle === i.Dash} accesskey=${i.Dash ?? r}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${w(this.selectedLineWidth)} @calciteInputInput=${this.lineWidthChange} ${a(this.lineWidthInputElement)}></calcite-input></calcite-label></div><div class=${l(o.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages.lineColor} .rgba=${e} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
   }
 }
 u("arcgis-charts-config-line-chart-series-popover", I);

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

@@ -1,4 +1,4 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { ISimpleLineSymbol } from '@arcgis/charts-spec';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 

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

@@ -1,23 +1,22 @@
 import { c as p } from "../../chunks/runtime.js";
-import { html as l } from "lit-html";
-import { RESTSymbolType as m, RESTSimpleLineSymbolStyle as t } from "@arcgis/charts-spec";
-import { b as u, m as a, s as g, c } from "../../chunks/chart-ui-utils2.js";
-import { u as y } from "../../chunks/useT9n.js";
+import { css as m, html as l } from "lit";
+import { RESTSymbolType as u, RESTSimpleLineSymbolStyle as t } from "@arcgis/charts-spec";
+import { b as g, m as a, s as y, c } from "../../chunks/chart-ui-utils2.js";
+import { u as f } from "../../chunks/useT9n.js";
 import { createRef as r, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as h, safeClassMap as s, nothing as n } from "@arcgis/lumina";
-import { css as S } from "@lit/reactive-element/css-tag.js";
+import { LitElement as S, createEvent as h, safeClassMap as s, nothing as n } 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.7 */
+v4.34.0-next.71 */
 const o = {
   sizeSection: "size-section",
   dropdownText: "dropdown-text",
   colorPickerContainer: "color-picker-container"
-}, w = S`.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{overflow-y:auto}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}`;
-class b extends f {
+}, w = m`.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{overflow-y:auto}:host arcgis-charts-config-colors{padding:var(--arcgis-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
+class b extends S {
   constructor() {
-    super(...arguments), this._messages = y(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
-      type: m.SLS
+    super(...arguments), this._messages = f(), this.lineWidthInputElement = r(), this.lineStyleDropdownElement = r(), this.lineStyle = {
+      type: u.SLS
     }, this.arcgisChartsConfigLineStyleChange = h(), this.arcgisChartsConfigLineStyleClose = h();
   }
   static {
@@ -54,7 +53,7 @@ class b extends f {
   }
   widthChange() {
     const e = this.lineWidthInputElement.value?.value;
-    e !== void 0 && u(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && a({
+    e !== void 0 && g(e, this.lineWidthInputElement.value?.min, this.lineWidthInputElement.value?.max) ? (this.lineStyle.width = Number.parseInt(e), this.emitLineStyleEvent(), this.lineWidthInputElement.value && a({
       inputElement: this.lineWidthInputElement.value,
       status: c.IDLE
     })) : this.lineWidthInputElement.value && a({
@@ -67,7 +66,7 @@ class b extends f {
   }
   render() {
     const e = [
-      l`<div class=${s(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${s(o.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${g(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
+      l`<div class=${s(o.sizeSection)}><calcite-label>${this._messages.style}<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(this.lineStyleDropdownElement)}><calcite-button .iconEnd=${this.selectedLineStyle().icon} slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${s(o.dropdownText)}>${this.selectedLineStyle().style}</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${this.lineStyle?.style === t.Solid} accesskey=${t.Solid ?? n}>${this._messages.solid}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${this.lineStyle?.style === t.Dot} accesskey=${t.Dot ?? n}>${this._messages.dot}</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${this.lineStyle?.style === t.Dash} accesskey=${t.Dash ?? n}>${this._messages.dash}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${this._messages.width}<calcite-input type=number min=1 step=any .value=${y(this.lineStyle?.width)} @calciteInputInput=${this.widthChange} ${d(this.lineWidthInputElement)}></calcite-input></calcite-label></div>`,
       l`<div class=${s(o.colorPickerContainer)}><arcgis-charts-config-colors .rgba=${this.lineStyle?.color ?? void 0} @colorSelect=${this.colorChange}></arcgis-charts-config-colors></div>`
     ];
     return this.usePanel !== !1 ? l`<calcite-panel .heading=${this.header ?? this._messages.header} .closed=${this.open === !1} .closable=${this.enableClose} @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>` : e;

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

@@ -1,4 +1,4 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 /** @private */

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

@@ -1,22 +1,20 @@
 import { c as l } from "../../chunks/runtime.js";
-import { html as u } from "lit-html";
-import { b as h, m as r, s as d, c } from "../../chunks/chart-ui-utils2.js";
-import { u as p } from "../../chunks/useT9n.js";
-import { createRef as g, ref as b } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as v, safeClassMap as a } from "@arcgis/lumina";
-import { css as x } from "@lit/reactive-element/css-tag.js";
+import { css as u, html as h } from "lit";
+import { b as d, m as r, s as p, c } from "../../chunks/chart-ui-utils2.js";
+import { u as g } from "../../chunks/useT9n.js";
+import { createRef as b, ref as f } from "lit-html/directives/ref.js";
+import { LitElement as v, createEvent as x, safeClassMap 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.7 */
-const i = {
+v4.34.0-next.71 */
+const n = {
   container: "container",
   label: "label",
-  numberInput: "number-input",
-  rtl: "arcgis-charts-rtl"
-}, F = x`.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)}.container{width:var(--arcgis-charts-config-calcite-block-width, var(--arcgis-charts-config-calcite-block-default-width));height:var(--arcgis-charts-config-calcite-block-height, var(--arcgis-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
-class w extends f {
+  numberInput: "number-input"
+}, F = u`.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)}.container{width:var(--arcgis-charts-config-calcite-block-width, var(--arcgis-charts-config-calcite-block-default-width));height:var(--arcgis-charts-config-calcite-block-height, var(--arcgis-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
+class w extends v {
   constructor() {
-    super(...arguments), this._messages = p(), this.decimalPlacesInputElement = g(), this.arcgisChartsConfigNumberFormatChange = v();
+    super(...arguments), this._messages = g(), this.decimalPlacesInputElement = b(), this.arcgisChartsConfigNumberFormatChange = x();
   }
   static {
     this.properties = { messageOverrides: 0, numberFormat: 0 };
@@ -25,8 +23,8 @@ class w extends f {
     this.styles = F;
   }
   onDecimalPlacesChange() {
-    const t = this.decimalPlacesInputElement.value?.value, s = Math.floor(Number(t)), n = s === Number(t) && s >= 0;
-    if (t !== void 0 && n && h(t, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
+    const t = this.decimalPlacesInputElement.value?.value, a = Math.floor(Number(t)), s = a === Number(t) && a >= 0;
+    if (t !== void 0 && s && d(t, this.decimalPlacesInputElement.value?.min, this.decimalPlacesInputElement.value?.max)) {
       const m = Number.parseInt(t), e = {
         minimumFractionDigits: this.numberFormat?.minimumFractionDigits,
         maximumFractionDigits: m
@@ -43,10 +41,10 @@ class w extends f {
     });
   }
   onShowThousandsSeparatorChange(t) {
-    const s = t.target.checked, n = this.getUpdatedNumberFormat({
-      useGrouping: s
+    const a = t.target.checked, s = this.getUpdatedNumberFormat({
+      useGrouping: a
     });
-    this.arcgisChartsConfigNumberFormatChange.emit(n);
+    this.arcgisChartsConfigNumberFormatChange.emit(s);
   }
   getUpdatedNumberFormat(t) {
     return {
@@ -55,7 +53,7 @@ class w extends f {
     };
   }
   render() {
-    return u`<div class=${a({ [i.rtl]: this.direction === "rtl" })}><div class=${a(i.container)}><calcite-label class=${a(i.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${a(i.numberInput)} min=0 max=20 step=1 .value=${d(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${b(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${a(i.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div></div>`;
+    return h`<div><div class=${i(n.container)}><calcite-label class=${i(n.label)}>${this._messages.decimalPlaces}<calcite-input type=number class=${i(n.numberInput)} min=0 max=20 step=1 .value=${p(this.numberFormat?.maximumFractionDigits, 2)} @calciteInputInput=${this.onDecimalPlacesChange} ${f(this.decimalPlacesInputElement)}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${i(n.label)}>${this._messages.showThousandSeparators}<calcite-switch name=useGrouping .checked=${!!(this.numberFormat?.useGrouping ?? !0)} @calciteSwitchChange=${this.onShowThousandsSeparatorChange}></calcite-switch></calcite-label></div></div>`;
   }
 }
 l("arcgis-charts-config-number-format", w);

package/dist/components/arcgis-charts-config-number-format/resource.d.ts

@@ -2,5 +2,4 @@ export declare const HTMLClasses: {
     readonly container: "container";
     readonly label: "label";
     readonly numberInput: "number-input";
-    readonly rtl: "arcgis-charts-rtl";
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { PieSlicesSymbols } from '../../utils';
 import { CalculatedMinMaxBoundsPayload, SupportedLayer, WebChartGenericDataItem } from '@arcgis/charts-spec';
 import { PieChartModel } from '../../model';

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

@@ -1,8 +1,8 @@
 import { c as C } from "../../chunks/runtime.js";
 import { RESTSymbolType as u } from "@arcgis/charts-spec";
-import { isEqual as n, cloneDeep as p } from "lodash-es";
+import { isEqual as n, cloneDeep as d } from "lodash-es";
 import "d3-array";
-import { g as y, a_ as v } from "../../chunks/interfaces.js";
+import { g as y, b0 as I } 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,21 +10,20 @@ 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 { h as I } from "../../chunks/index4.js";
-import { LitElement as F, createEvent as m } from "@arcgis/lumina";
-import { html as h } from "lit";
-import { C as c } from "../../chunks/interfaces2.js";
-import { css as S } from "@lit/reactive-element/css-tag.js";
+import { h as F } from "../../chunks/index4.js";
+import { LitElement as v, createEvent as p } from "@arcgis/lumina";
+import { css as S, html as c } from "lit";
+import { C as h } from "../../chunks/interfaces2.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.7 */
+v4.34.0-next.71 */
 const P = S`: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 E extends F {
+class L extends v {
   constructor() {
-    super(...arguments), this.popoverElement = null, this.onModelConfigChange = async (e) => {
+    super(...arguments), this.onModelConfigChange = async (e) => {
       const t = e?.detail.config ?? this.model.getConfig();
       this.layer === void 0 && await this.updateFetchLayerFieldsInfo(t);
-    }, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = m(), this.arcgisChartsConfigWebChartChange = m();
+    }, this.popoverPlacement = "leading", this.arcgisChartsConfigNoSeriesUpdate = p(), this.arcgisChartsConfigWebChartChange = p();
   }
   static {
     this.properties = { layerFieldsInfo: 16, model: 0, popoverPlacement: 3, seriesColor: 2, calculatedMinMaxBounds: 2, page: 3, layer: 0, usePopupTemplateFieldsInfo: 5, filterBySelection: 5, chartData: 0 };
@@ -52,47 +51,43 @@ class E extends F {
   }
   seriesColorChange(e) {
     const { slices: i, groupedSlices: t, groupOfSlices: a } = e?.get(0) ?? {};
-    let o = [];
-    this.filterBySelection === !0 ? o = this.model.getSlices()?.map((r) => i?.find((s) => s.sliceId === r.sliceId) ?? t?.find((s) => s.sliceId === r.sliceId) ?? r) ?? [] : o = (i ?? []).concat(t ?? []), o.forEach((r, s) => {
-      const f = this.model.getSlices()?.find((g) => g.sliceId === o[s].sliceId);
-      f && (o[s] = { ...o[s], ...f });
-      const l = o[s].fillSymbol;
+    let s = [];
+    this.filterBySelection === !0 ? s = this.model.getSlices()?.map((r) => i?.find((o) => o.sliceId === r.sliceId) ?? t?.find((o) => o.sliceId === r.sliceId) ?? r) ?? [] : s = (i ?? []).concat(t ?? []), s.forEach((r, o) => {
+      const g = this.model.getSlices()?.find((m) => m.sliceId === s[o].sliceId);
+      g && (s[o] = { ...s[o], ...g });
+      const l = s[o].fillSymbol;
       l !== void 0 && !n(l?.outline?.color, l?.color) && (l.outline = {
         ...l.outline ?? {},
         type: u.SLS,
         color: l.color
       });
     });
-    const d = (t ?? []).map((r) => r.sliceId);
-    t !== void 0 && !n(d, this.model.getGroupedSliceIds()) && this.model.setGroupedSliceIds(p(d)), n(o, this.model.getSlices()) || this.model.setSlices(p(o)), a !== void 0 && !n(a, this.model.getSliceGrouping()) && this.model.setSliceGrouping(p(a));
+    const f = (t ?? []).map((r) => r.sliceId);
+    t !== void 0 && !n(f, this.model.getGroupedSliceIds()) && this.model.setGroupedSliceIds(d(f)), n(s, this.model.getSlices()) || this.model.setSlices(d(s)), a !== void 0 && !n(a, this.model.getSliceGrouping()) && this.model.setSliceGrouping(d(a));
   }
   async updateFetchLayerFieldsInfo(e) {
     const i = e ?? this.model.getConfig();
     let t = this.layer;
     if (!t) {
-      const a = I(i) ? i.iLayer : void 0;
+      const a = F(i) ? i.iLayer : void 0;
       a && (t = await y(a));
     }
-    t && (this.layerFieldsInfo = await v(t, this.usePopupTemplateFieldsInfo));
-  }
-  popoverOpen(e) {
-    const { open: i = !1, element: t = null } = { ...e.detail };
-    i === !0 && this.popoverElement !== t ? (this.popoverElement !== null && (this.popoverElement.open = !1), this.popoverElement = t) : i === !1 && this.popoverElement === t && (this.popoverElement = null);
+    t && (this.layerFieldsInfo = await I(t, this.usePopupTemplateFieldsInfo));
   }
   render() {
     let e;
     switch (this.page) {
-      case c.Data:
-        e = h`<arcgis-charts-config-pie-chart-data .model=${this.model} .layerFieldsInfo=${this.layerFieldsInfo}></arcgis-charts-config-pie-chart-data>`;
+      case h.Data:
+        e = c`<arcgis-charts-config-pie-chart-data .model=${this.model} .layerFieldsInfo=${this.layerFieldsInfo}></arcgis-charts-config-pie-chart-data>`;
         break;
-      case c.Slices:
-        e = h`<arcgis-charts-config-pie-chart-slices .model=${this.model} .chartData=${this.chartData} @arcgisChartsConfigPieChartSlicesPopoverChange=${this.popoverOpen} .popoverPlacement=${this.popoverPlacement}></arcgis-charts-config-pie-chart-slices>`;
+      case h.Slices:
+        e = c`<arcgis-charts-config-pie-chart-slices .model=${this.model} .chartData=${this.chartData} .popoverPlacement=${this.popoverPlacement}></arcgis-charts-config-pie-chart-slices>`;
         break;
-      case c.Format:
-        e = h`<arcgis-charts-config-format .model=${this.model} @arcgisChartsConfigFormatPopoverChange=${this.popoverOpen}></arcgis-charts-config-format>`;
+      case h.Format:
+        e = c`<arcgis-charts-config-format .model=${this.model}></arcgis-charts-config-format>`;
         break;
-      case c.General:
-        e = h`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
+      case h.General:
+        e = c`<arcgis-charts-config-general .model=${this.model}></arcgis-charts-config-general>`;
         break;
       default:
         e = "";
@@ -101,7 +96,7 @@ class E extends F {
     return e;
   }
 }
-C("arcgis-charts-config-pie-chart", E);
+C("arcgis-charts-config-pie-chart", L);
 export {
-  E as ArcgisChartsConfigPieChart
+  L as ArcgisChartsConfigPieChart
 };