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

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

@@ -1,5 +1,5 @@
 import { c as l } from "../../chunks/runtime.js";
-import { html as a } from "lit-html";
+import { css as c, html as a } from "lit";
 import "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
@@ -11,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 r } from "../../chunks/chart-ui-utils2.js";
-import { u as n } from "../../chunks/useT9n.js";
-import { createRef as p, ref as h } from "lit-html/directives/ref.js";
-import { LitElement as m, createEvent as o, safeClassMap as s } from "@arcgis/lumina";
-import { css as d } from "@lit/reactive-element/css-tag.js";
+import { e as r } from "../../chunks/popover-ui-utils.js";
+import { U as n } from "../../chunks/chart-ui-utils2.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { createRef as h, ref as m } from "lit-html/directives/ref.js";
+import { LitElement as d, createEvent as o, safeClassMap as s } from "@arcgis/lumina";
 import { M as e } from "../../chunks/common.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 t = {
+v4.34.0-next.71 */
+const i = {
   selectChartComponent: "select-chart-component",
-  rtl: "arcgis-charts-rtl",
   jsAppFlyout: "js-app-flyout",
   panel: "panel"
-}, g = d`.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 .arcgis-charts-rtl .label{margin-left:0rem;margin-right:1rem}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
-class f extends m {
+}, g = c`.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)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
+class f extends d {
   constructor() {
-    super(...arguments), this._messages = n(), this.selectChartTypePopover = p(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSelectChartTypeChange = o();
+    super(...arguments), this._messages = p(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSelectChartTypeChange = o();
   }
   static {
-    this.properties = { messageOverrides: 0, headerTitle: 3, layerId: 3, open: 7, popoverReferenceElement: 0, popoverPlacement: 3, selectedModelType: 3 };
+    this.properties = { messageOverrides: 0, headerTitle: 3, layerId: 3, open: 7, referenceElement: 0, popoverPlacement: 3, selectedModelType: 3 };
   }
   static {
     this.styles = g;
@@ -41,28 +39,27 @@ class f extends m {
     await this.selectChartTypePopover.value?.reposition();
   }
   updated() {
-    c(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
+    r(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
       this.selectChartTypePopover.value?.reposition();
-    }, r.PopoverTimer);
+    }, n.PopoverTimer);
   }
   buildChartTypesList() {
     return a`<calcite-list label @click=${this.onChartTypeClick}><calcite-list-item .label=${this._messages.barChart} .value=${e.BarChart} .selected=${this.selectedModelType === e.BarChart}><calcite-icon slot=content-start icon=graph-bar></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.lineChart} .value=${e.LineChart} .selected=${this.selectedModelType === e.LineChart}><calcite-icon slot=content-start icon=graph-time-series></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.pieChart} .value=${e.PieChart} .selected=${this.selectedModelType === e.PieChart}><calcite-icon slot=content-start icon=pie-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.histogram} .value=${e.Histogram} .selected=${this.selectedModelType === e.Histogram}><calcite-icon slot=content-start icon=graph-histogram></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.scatterplot} .value=${e.Scatterplot} .selected=${this.selectedModelType === e.Scatterplot}><calcite-icon slot=content-start icon=graph-scatter-plot></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.boxPlot} .value=${e.BoxPlot} .selected=${this.selectedModelType === e.BoxPlot}><calcite-icon slot=content-start icon=box-chart></calcite-icon></calcite-list-item></calcite-list>`;
   }
-  onChartTypeClick(i) {
-    i.target?.localName === "calcite-list-item" ? this.selectedModelType = i.target?.value : this.selectedModelType = i.target?.parentNode?.value, this.arcgisChartsConfigSelectChartTypeChange.emit();
+  onChartTypeClick(t) {
+    t.target?.localName === "calcite-list-item" ? this.selectedModelType = t.target?.value : this.selectedModelType = t.target?.parentNode?.value, this.arcgisChartsConfigSelectChartTypeChange.emit();
   }
   popoverOpen() {
     setTimeout(async () => await this.selectChartTypePopover.value?.setFocus(), 250);
   }
   popoverClose() {
-    this.open = !1, this.arcgisChartsConfigPopoverClose.emit(), setTimeout(async () => await this.popoverReferenceElement?.setFocus(), 250);
+    this.open = !1, this.arcgisChartsConfigPopoverClose.emit(), setTimeout(async () => await this.referenceElement?.setFocus(), 250);
   }
   render() {
     return a`<div class=${s({
-      [t.rtl]: this.direction === "rtl",
-      [t.selectChartComponent]: !0,
-      [t.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.popoverReferenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} label ${h(this.selectChartTypePopover)}><calcite-panel class=${s(t.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+      [i.selectChartComponent]: !0,
+      [i.jsAppFlyout]: !0
+    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${m(this.selectChartTypePopover)}><calcite-panel class=${s(i.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
   }
 }
 l("arcgis-charts-config-select-chart-type-popover", f);

package/dist/components/arcgis-charts-config-select-chart-type-popover/resource.d.ts

@@ -1,7 +1,6 @@
 export declare const HTMLClasses: {
     readonly selectChartComponent: "select-chart-component";
     readonly header: "header";
-    readonly rtl: "arcgis-charts-rtl";
     readonly jsAppFlyout: "js-app-flyout";
     readonly panel: "panel";
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { ChartModel } from '../../model';
 import { SupportedLayer } from '@arcgis/charts-spec';
 import { default as Sublayer } from '@arcgis/core/layers/support/Sublayer';
@@ -21,7 +21,7 @@ export declare class ArcgisChartsConfigViewCharts extends LitElement {
      *
      * @category Public
      */
-    layer: Sublayer | SupportedLayer | undefined;
+    layer?: Sublayer | SupportedLayer;
     /**
      * Array of chart models passed to this component to view the different charts
      *
@@ -36,7 +36,7 @@ export declare class ArcgisChartsConfigViewCharts extends LitElement {
      */
     noGroup: boolean;
     /**
-     * Disable the three-dot menu for editing, renaming, and deleting charts. Useful if the list is only intended for viewing.
+     * Disable the three-dot menu for editing, renaming & deleting charts and disable re-ordering charts position in the charts list. Useful if the list is only intended for viewing.
      *
      * @category Public
      * @default false

package/dist/components/arcgis-charts-config-view-charts/customElement.js

@@ -1,8 +1,8 @@
-import { c as h } from "../../chunks/runtime.js";
+import { c as d } from "../../chunks/runtime.js";
 import "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
-import { bR as d } from "../../chunks/interfaces.js";
+import { bV as m } 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,43 +10,42 @@ 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 { g as m } from "../../chunks/chart-ui-utils.js";
-import { c as p, r as C, P as g } from "../../chunks/popover-ui-utils.js";
-import { u as f } from "../../chunks/useT9n.js";
-import { html as o } from "lit";
-import { LitElement as v, createEvent as r, safeClassMap as n } from "@arcgis/lumina";
-import { repeat as u } from "lit-html/directives/repeat.js";
-import { css as w } from "@lit/reactive-element/css-tag.js";
+import { g as p } from "../../chunks/chart-ui-utils.js";
+import { r as C } from "../../chunks/popover-ui-utils.js";
+import { u as g } from "../../chunks/useT9n.js";
+import { css as f, html as s } from "lit";
+import { LitElement as v, createEvent as o, safeClassMap as c, renderElement as u } from "@arcgis/lumina";
+import { repeat as w } from "lit-html/directives/repeat.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 c = {
+v4.34.0-next.71 */
+const n = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",
   header: "header",
   dropdownPopup: "dropdown-popup"
-}, I = w`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
-class R extends v {
+}, I = f`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
+class $ extends v {
   constructor() {
-    super(...arguments), this._messages = f(), this.chartRenamePopover = null, this.popoverClose = () => {
+    super(...arguments), this._messages = g(), this.chartRenamePopover = null, this.popoverClose = () => {
       const e = this.modelList?.find((t) => t.getChartId() === this.selectedChartId);
-      this.chartTitle = e?.getTitleText() ?? "", this.selectedActionChartId = "", this.renameOpen = !1, this.removeChartRenamePopover();
+      this.chartTitle = e?.getTitleText() ?? "", this.selectedActionChartId = "", this.removeChartRenamePopover();
     }, this.onChartRename = (e) => {
-      this.disableEditing || (this.chartTitle = e.detail.name, this.modelList?.find((i) => i.getChartId() === this.selectedActionChartId)?.setTitleText(this.chartTitle), this.selectedActionChartId = "", this.renameOpen = !1, this.removeChartRenamePopover());
+      this.disableEditing || (this.chartTitle = e.detail.name, this.modelList?.find((i) => i.getChartId() === this.selectedActionChartId)?.setTitleText(this.chartTitle), this.selectedActionChartId = "", this.removeChartRenamePopover());
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
     }, this.onCalciteListOrderChange = (e) => {
       if (e.detail !== null && e.detail !== void 0) {
         const { newIndex: t, oldIndex: i } = e.detail;
         if (this.modelList !== void 0 && this.modelList?.length > 0) {
-          const a = [...this.modelList], s = a?.[i], l = a?.[t];
-          s && l && (a.splice(i, 1), a.splice(t, 0, s)), this.arcgisChartsConfigModelListReorder.emit({ modelList: a });
+          const a = [...this.modelList], r = a?.[i], h = a?.[t];
+          r && h && (a.splice(i, 1), a.splice(t, 0, r)), this.arcgisChartsConfigModelListReorder.emit({ modelList: a });
         }
       }
-    }, this.chartTitle = "", this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = r(), this.arcgisChartsConfigViewChartAddChart = r(), this.arcgisChartsConfigViewChartDelete = r(), this.arcgisChartsConfigViewChartEdit = r(), this.arcgisChartsConfigViewChartSelect = r();
+    }, this.chartTitle = "", this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = o(), this.arcgisChartsConfigViewChartAddChart = o(), this.arcgisChartsConfigViewChartDelete = o(), this.arcgisChartsConfigViewChartEdit = o(), this.arcgisChartsConfigViewChartSelect = o();
   }
   static {
-    this.properties = { chartTitle: 16, renameOpen: 16, selectedActionChartId: 16, messageOverrides: 0, selectedChartId: 3, layer: 0, modelList: 2, noGroup: 7, disableEditing: 7 };
+    this.properties = { isChartRenamePopoverOpen: 16, chartTitle: 16, selectedActionChartId: 16, messageOverrides: 0, selectedChartId: 3, layer: 0, modelList: 2, noGroup: 7, disableEditing: 7 };
   }
   static {
     this.styles = I;
@@ -65,17 +64,17 @@ class R extends v {
     });
   }
   onAddChartClick(e) {
-    this.arcgisChartsConfigViewChartAddChart.emit({
+    e.stopImmediatePropagation(), this.arcgisChartsConfigViewChartAddChart.emit({
       referenceElement: e.target,
       layerId: this.layer?.id.toString()
     });
   }
   buildChartList() {
-    const e = this.modelList ? u(this.modelList, (t) => t.getChartId(), (t, i) => {
-      const a = t.getChartId(), s = t.getTitleText(), l = m(t.getConfig());
-      return o`<calcite-list-item .label=${s ?? a ?? d(this._messages.chartTitle ?? "", { index: i.toString() })} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${l}></calcite-icon>${this.disableEditing ? null : o`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${n(c.dropdownPopup)}><calcite-action scale=l .text=${this._messages.chartActions ?? ""} slot=trigger .active=${a === this.selectedActionChartId}><calcite-icon icon=ellipsis></calcite-icon></calcite-action><calcite-dropdown-group selection-mode=none><calcite-dropdown-item accesskey=edit @calciteDropdownItemSelect=${this.chartEditSelect}>${this._messages.edit}</calcite-dropdown-item><calcite-dropdown-item accesskey=rename @calciteDropdownItemSelect=${this.chartRenameSelect}>${this._messages.rename}</calcite-dropdown-item><calcite-dropdown-item accesskey=delete @calciteDropdownItemSelect=${this.chartDeleteSelect}>${this._messages.delete}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`}</calcite-list-item>`;
+    const e = this.modelList ? w(this.modelList, (t) => t.getChartId(), (t, i) => {
+      const a = t.getChartId(), r = t.getTitleText(), h = p(t.getConfig());
+      return s`<calcite-list-item .label=${r ?? a ?? m(this._messages.chartTitle ?? "", { index: i.toString() })} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${h}></calcite-icon>${this.disableEditing ? null : s`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${c(n.dropdownPopup)}><calcite-action scale=l .text=${this._messages.chartActions ?? ""} slot=trigger .active=${a === this.selectedActionChartId}><calcite-icon icon=ellipsis></calcite-icon></calcite-action><calcite-dropdown-group selection-mode=none><calcite-dropdown-item accesskey=edit @calciteDropdownItemSelect=${this.chartEditSelect}>${this._messages.edit}</calcite-dropdown-item><calcite-dropdown-item accesskey=rename @click=${(l) => l.stopPropagation()} @calciteDropdownItemSelect=${this.chartRenameSelect}>${this._messages.rename}</calcite-dropdown-item><calcite-dropdown-item accesskey=delete @calciteDropdownItemSelect=${this.chartDeleteSelect}>${this._messages.delete}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`}</calcite-list-item>`;
     }) : null;
-    return this.layer ? o`<div>${this.noGroup ? null : o`<p class=${n(c.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : o`<div class=${n(c.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list></div>` : null;
+    return this.layer ? s`<div>${this.noGroup ? null : s`<p class=${c(n.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : s`<div class=${c(n.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list></div>` : null;
   }
   onChartSelect(e) {
     const t = e.currentTarget;
@@ -89,10 +88,10 @@ class R extends v {
   }
   chartRenameSelect(e) {
     if (!this.disableEditing) {
-      const i = e.target.closest("calcite-list-item"), a = this.modelList?.find((s) => s.getChartId() === this.selectedActionChartId);
+      const i = e.target.closest("calcite-list-item"), a = this.modelList?.find((r) => r.getChartId() === this.selectedActionChartId);
       i !== null && (this.renameReferenceElement = i), this.arcgisChartsConfigViewChartSelect.emit({
         chartId: this.selectedActionChartId
-      }), this.chartTitle = a?.getTitleText() ?? "", this.renameOpen = !0, this.setupRenamePopover();
+      }), this.chartTitle = a?.getTitleText() ?? "", this.setupRenamePopover();
     }
   }
   chartDeleteSelect() {
@@ -101,31 +100,22 @@ class R extends v {
     }), this.selectedActionChartId = "");
   }
   chartActionClosed(e) {
-    e === this.selectedActionChartId && !this.renameOpen && (this.selectedActionChartId = "");
+    e === this.selectedActionChartId && !this.isChartRenamePopoverOpen && (this.selectedActionChartId = "");
   }
   chartActionOpened(e) {
     this.selectedActionChartId = e;
   }
   setupRenamePopover() {
-    if (this.chartRenamePopover === null) {
-      const e = {
-        name: this.chartTitle,
-        popoverReferenceElement: this.renameReferenceElement,
-        onChartRename: this.onChartRename,
-        popoverClose: this.popoverClose
-      };
-      this.chartRenamePopover = p(g.ChartRenamePopover, e), document.body.appendChild(this.chartRenamePopover);
-    }
-    this.chartRenamePopover !== null && (this.chartRenamePopover.open = this.renameOpen, this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.popoverReferenceElement = this.renameReferenceElement);
+    this.isChartRenamePopoverOpen = !0, this.chartRenamePopover !== null && (this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.referenceElement = this.renameReferenceElement), this.chartRenamePopover = u(s`<arcgis-charts-config-chart-rename-popover .name=${this.chartTitle} .referenceElement=${this.renameReferenceElement} .open=${this.isChartRenamePopoverOpen} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigChartRenamePopoverChange=${this.onChartRename}></arcgis-charts-config-chart-rename-popover>`), !document.body.contains(this.chartRenamePopover) && this.chartRenamePopover !== null && document.body.appendChild(this.chartRenamePopover);
   }
   removeChartRenamePopover() {
-    this.chartRenamePopover !== null && (this.chartRenamePopover.open = !1, this.chartRenamePopover = C(this.chartRenamePopover));
+    this.chartRenamePopover !== null && (this.isChartRenamePopoverOpen = !1, this.chartRenamePopover = C(this.chartRenamePopover));
   }
   render() {
-    return o`<div class=${n(c.viewChartComponent)}>${this.buildChartList()}</div>`;
+    return s`<div class=${c(n.viewChartComponent)}>${this.buildChartList()}</div>`;
   }
 }
-h("arcgis-charts-config-view-charts", R);
+d("arcgis-charts-config-view-charts", $);
 export {
-  R as ArcgisChartsConfigViewCharts
+  $ as ArcgisChartsConfigViewCharts
 };

package/dist/components/arcgis-charts-config-view-charts/index.d.ts

@@ -6,4 +6,5 @@ import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-fab";
+import "../arcgis-charts-config-chart-rename-popover/index.js";
 export * from "./customElement.js";

package/dist/components/arcgis-charts-config-view-charts/index.js

@@ -6,4 +6,5 @@ import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-fab";
+import "../arcgis-charts-config-chart-rename-popover/index.js";
 export * from "./customElement.js";

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-05-28T06:00:04",
+  "timestamp": "2025-07-26T04:45:50",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.34.0-next.7",
+    "version": "4.34.0-next.71",
     "typescriptVersion": "5.8.3"
   },
   "schemaVersion": "1.0.0",
@@ -16,7 +16,7 @@
           "customElement": true,
           "name": "ArcgisChart",
           "tagName": "arcgis-chart",
-          "description": "Chart component renders various chart types based on the provided model, including bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, and histograms.",
+          "description": "The ArcGIS Chart component renders various chart types based on the provided model.\n\nSupported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.\n\nThe Chart component can be rendered using an [existing model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#use-an-existing-model-from-a-webmap-or-feature-layer) from a web map or feature layer,\nor by [creating a new model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#create-a-new-model).\n\nSee also:\n- [Introduction to Charts components](https://developers.arcgis.com/javascript/latest/charts-components-intro/)\n- [Tutorial: Display and create charts components](https://developers.arcgis.com/javascript/latest/tutorials/display-and-create-charts-components/)",
           "demos": [
             {
               "description": "Docs",
@@ -27,7 +27,7 @@
               "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--bar-chart&singleStory=true"
             },
             {
-              "description": "Box Plot\nBox plots visualize and compares the distribution and central tendency of numeric values through their quartiles.",
+              "description": "Box Plot\nBox plots visualize and compare the distribution and central tendency of numeric values through their quartiles.",
               "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--box-plot&singleStory=true"
             },
             {
@@ -135,6 +135,35 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "autoInverseDataLabelTextColor",
+              "description": "When `true`, the data label text color is automatically inverted based on the data label background color.\nFor example if the data label is dark, and it's on top of a dark color series area, the text color will eventually\nbe set to either the chart's background color or white.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "attribute": "auto-inverse-data-label-text-color",
+              "docsTags": [
+                {
+                  "name": "remarks",
+                  "text": "This feature is currently only available for bar chart."
+                },
+                {
+                  "name": "type",
+                  "text": "{boolean | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "chartLimits",
@@ -247,7 +276,7 @@
               "docsTags": [
                 {
                   "name": "example",
-                  "text": "const arcgisChart = document.createElement(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\narcgisChart.componentOnReady().then(() => {\n  console.log(\"arcgis-chart is ready to go!\");\n});"
+                  "text": "```js\nconst arcgisChart = document.querySelector(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\nawait arcgisChart.componentOnReady();\nconsole.log(\"arcgis-chart is ready to go!\");\n```"
                 }
               ]
             },
@@ -589,7 +618,7 @@
               "docsTags": [
                 {
                   "name": "param",
-                  "text": "options The options to use when exporting the data.\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
+                  "text": "options The options to use when exporting the data.\n\nNOTE: This method won't work for scatter plot series. The support charts for this method are:\n- Bar chart\n- Line chart\n- Combo bar-line chart\n- Box plot\n- Histogram\n- Pie chart\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
                 },
                 {
                   "name": "category",
@@ -2180,6 +2209,20 @@
               "default": "undefined",
               "fieldName": "autoDisposeChart"
             },
+            {
+              "name": "auto-inverse-data-label-text-color",
+              "description": "When `true`, the data label text color is automatically inverted based on the data label background color.\nFor example if the data label is dark, and it's on top of a dark color series area, the text color will eventually\nbe set to either the chart's background color or white.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "fieldName": "autoInverseDataLabelTextColor"
+            },
             {
               "name": "component-version",
               "description": "Whether to use the stable version of the component or the beta version.",
@@ -2875,7 +2918,7 @@
               "name": "arcgisNoRenderPropChange",
               "description": "Event triggered when a no-render prop is changed",
               "type": {
-                "text": "{\n    propName: string;\n    value: boolean | WebChartLegendPositions;\n    model: ChartModel | undefined;\n}"
+                "text": "{\n    propName: string;\n    value: number | boolean | MapView | SceneView | WebChartLegendPositions | undefined;\n    model: ChartModel | undefined;\n}"
               },
               "docsTags": [
                 {
@@ -2984,7 +3027,7 @@
           "slots": [
             {
               "name": "action-bar",
-              "description": "A slot for adding charts-action-bar component or calcite-action-bar."
+              "description": "Slot for adding a `charts-action-bar` component or `calcite-action-bar`."
             }
           ]
         }
@@ -3009,7 +3052,7 @@
           "customElement": true,
           "name": "ArcgisChartsActionBar",
           "tagName": "arcgis-charts-action-bar",
-          "description": "The charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It is designed to be used in conjunction with a chart component and is not intended for standalone use.",
+          "description": "The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering.\nIt also supports general actions like exporting the chart as an image or CSV.\nThis component is designed to be used with a chart component and is not intended for standalone use.\n\nSee also:\n- [Tutorial: Charts components with Map components using charts action bar](https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/)",
           "demos": [
             {
               "description": "Docs",
@@ -3264,7 +3307,7 @@
               "docsTags": [
                 {
                   "name": "example",
-                  "text": "const arcgisChartsActionBar = document.createElement(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\narcgisChartsActionBar.componentOnReady().then(() => {\n  console.log(\"arcgis-charts-action-bar is ready to go!\");\n});"
+                  "text": "```js\nconst arcgisChartsActionBar = document.querySelector(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\nawait arcgisChartsActionBar.componentOnReady();\nconsole.log(\"arcgis-charts-action-bar is ready to go!\");\n```"
                 }
               ]
             },
@@ -3297,32 +3340,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "disabledExportAction",
-              "description": "When `true`, the export action is disabled.",
-              "type": {
-                "text": "boolean",
-                "values": [
-                  {
-                    "type": "boolean"
-                  }
-                ]
-              },
-              "default": "false",
-              "attribute": "disabled-export-action",
-              "reflects": true,
-              "docsTags": [
-                {
-                  "name": "category",
-                  "text": "Public"
-                },
-                {
-                  "name": "type",
-                  "text": "{boolean}"
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "editChartState",
@@ -3437,6 +3454,37 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "exportActionState",
+              "description": "When disabled, interaction with the export action is prevented and the component is displayed with lower opacity.",
+              "type": {
+                "text": "\"disabled\" | \"enabled\"",
+                "values": [
+                  {
+                    "value": "disabled",
+                    "type": "string"
+                  },
+                  {
+                    "value": "enabled",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"enabled\"",
+              "attribute": "export-action-state",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "category",
+                  "text": "Public"
+                },
+                {
+                  "name": "type",
+                  "text": "{ActionState}"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "exportAsCSVState",
@@ -3842,7 +3890,7 @@
               "name": "hiddenActions",
               "description": "Holds a list of actions to hide from the action bar.\n\n**Note:** The edit chart action is hidden by default. To show it, remove its value from this array.",
               "type": {
-                "text": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
+                "text": "Array<\"zoom\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
                 "references": [
                   {
                     "name": "Array",
@@ -4437,20 +4485,6 @@
               "default": "\"inactive\"",
               "fieldName": "clearSelectionToggle"
             },
-            {
-              "name": "disabled-export-action",
-              "description": "When `true`, the export action is disabled.",
-              "type": {
-                "text": "boolean",
-                "values": [
-                  {
-                    "type": "boolean"
-                  }
-                ]
-              },
-              "default": "false",
-              "fieldName": "disabledExportAction"
-            },
             {
               "name": "edit-chart-state",
               "description": "When disabled, interaction with the edit chart action is prevented and the component is displayed with lower opacity.",
@@ -4517,6 +4551,25 @@
               "default": "false",
               "fieldName": "expanded"
             },
+            {
+              "name": "export-action-state",
+              "description": "When disabled, interaction with the export action is prevented and the component is displayed with lower opacity.",
+              "type": {
+                "text": "\"disabled\" | \"enabled\"",
+                "values": [
+                  {
+                    "value": "disabled",
+                    "type": "string"
+                  },
+                  {
+                    "value": "enabled",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"enabled\"",
+              "fieldName": "exportActionState"
+            },
             {
               "name": "export-as-csv-state",
               "description": "When disabled, interaction with the download CSV is prevented and the component is displayed with lower opacity.",