@arcgis/charts-components 5.2.0-next.45 → 5.2.0-next.47

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

@@ -1,21 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as d } from "../../chunks/runtime.js";
-import { keyed as m } from "lit/directives/keyed.js";
-import { u as p } from "../../chunks/useT9n.js";
-import { css as C, html as r } from "lit";
-import { LitElement as g, createEvent as o, safeClassMap as c, renderElement as f } from "@arcgis/lumina";
-import { repeat as v } from "lit/directives/repeat.js";
-import { g as u } from "../../chunks/chart-ui-utils.js";
-import { r as w } from "../../chunks/popover-ui-utils.js";
-const n = {
+import { c as C } from "../../chunks/runtime.js";
+import { keyed as g } from "lit/directives/keyed.js";
+import { u as f } from "../../chunks/useT9n.js";
+import { css as u, nothing as m, html as r } from "lit";
+import { LitElement as v, createEvent as c, safeClassMap as n, renderElement as w } from "@arcgis/lumina";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { g as R } from "../../chunks/chart-ui-utils.js";
+import { r as I } from "../../chunks/popover-ui-utils.js";
+import { ct as b } from "../../chunks/index2.js";
+import { c as L } from "../../chunks/model-types.js";
+import { M as s } from "../../chunks/common.js";
+const h = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",
   header: "header",
   dropdownPopup: "dropdown-popup"
-}, I = C`.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 g {
+}, P = u`.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 y extends v {
   constructor() {
-    super(...arguments), this._messages = p(), this.chartRenamePopover = null, this.popoverClose = () => {
+    super(...arguments), this._messages = f(), this.chartRenamePopover = null, this.popoverClose = () => {
       const e = this.modelList?.find((t) => t.chartId === this.selectedChartId);
       this.chartTitle = e?.titleText ?? "", this.selectedActionChartId = "", this.removeChartRenamePopover();
     }, this.onChartRename = (e) => {
@@ -30,17 +33,17 @@ class R extends g {
       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], h = a?.[t];
-          s && h && (a.splice(i, 1), a.splice(t, 0, s)), this.chartsOrderReorderCounter += 1, this.arcgisChartsConfigModelListReorder.emit({ modelList: a });
+          const a = [...this.modelList], o = a?.[i], l = a?.[t];
+          o && l && (a.splice(i, 1), a.splice(t, 0, o)), this.chartsOrderReorderCounter += 1, this.arcgisChartsConfigModelListReorder.emit({ modelList: a });
         }
       }
-    }, this.isChartRenamePopoverOpen = !1, this.chartTitle = "", this.chartsOrderReorderCounter = 0, this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = o(), this.arcgisChartsConfigViewChartAddChart = o(), this.arcgisChartsConfigViewChartDelete = o(), this.arcgisChartsConfigViewChartEdit = o(), this.arcgisChartsConfigViewChartSelect = o();
+    }, this.isChartRenamePopoverOpen = !1, this.chartTitle = "", this.chartsOrderReorderCounter = 0, this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = c(), this.arcgisChartsConfigViewChartAddChart = c(), this.arcgisChartsConfigViewChartDelete = c(), this.arcgisChartsConfigViewChartEdit = c(), this.arcgisChartsConfigViewChartSelect = c();
   }
   static {
     this.properties = { isChartRenamePopoverOpen: 16, chartTitle: 16, selectedActionChartId: 16, chartsOrderReorderCounter: 16, messageOverrides: 0, selectedChartId: 1, layer: 0, modelList: 0, noGroup: 5, disableEditing: 5 };
   }
   static {
-    this.styles = I;
+    this.styles = P;
   }
   willUpdate(e) {
     e.has("modelList") && this.modelListChange(this.modelList, e.get("modelList"));
@@ -62,12 +65,40 @@ class R extends g {
       layerType: this.layer?.type
     });
   }
+  buildTooltipLine(e, t) {
+    const i = typeof document < "u" && document.documentElement.dir.toLowerCase() === "rtl", a = `${b(i)} `;
+    return `${e}${a}${t}`;
+  }
+  getChartTypeLabel(e) {
+    switch (L(e.chartType)) {
+      case s.BarChart:
+        return this._messages.barChart ?? "";
+      case s.LineChart:
+        return this._messages.lineChart ?? "";
+      case s.PieChart:
+        return this._messages.pieChart ?? "";
+      case s.Histogram:
+        return this._messages.histogram ?? "";
+      case s.Scatterplot:
+        return this._messages.scatterplot ?? "";
+      case s.BoxPlot:
+        return this._messages.boxPlot ?? "";
+      case s.HeatChart:
+        return this._messages.calendarHeatChart ?? "";
+      default:
+        return "";
+    }
+  }
+  buildChartTooltip(e) {
+    const t = this.getChartTypeLabel(e);
+    return this.buildTooltipLine(this._messages.chartType ?? "", t ?? "");
+  }
   buildChartList() {
-    const e = this.modelList ? v(this.modelList, (t) => t.chartId, (t, i) => {
-      const a = t.chartId, s = t.titleText, h = u(t.config);
-      return r`<calcite-list-item .label=${s ?? a ?? this._messages.chartTitle} .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 : r`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end .open=${this.selectedActionChartId === a} @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>`;
+    const e = this.modelList ? $(this.modelList, (t) => t.chartId, (t, i) => {
+      const a = t.chartId, o = t.titleText, l = R(t.config), d = this.buildChartTooltip(t);
+      return r`<calcite-list-item .label=${o ?? a ?? this._messages.chartTitle} title=${d ?? m} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${l} title=${d ?? m}></calcite-icon>${this.disableEditing ? null : r`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end .open=${this.selectedActionChartId === a} @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${n(h.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=${(p) => p.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 ? r`<div>${this.noGroup ? null : r`<p class=${c(n.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}${m(this.chartsOrderReorderCounter, r`<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : r`<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;
+    return this.layer ? r`<div>${this.noGroup ? null : r`<p class=${n(h.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}${g(this.chartsOrderReorderCounter, r`<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : r`<div class=${n(h.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;
@@ -81,7 +112,7 @@ class R extends g {
   }
   chartRenameSelect(e) {
     if (!this.disableEditing) {
-      const i = e.target.closest("calcite-list-item"), a = this.modelList?.find((s) => s.chartId === this.selectedActionChartId);
+      const i = e.target.closest("calcite-list-item"), a = this.modelList?.find((o) => o.chartId === this.selectedActionChartId);
       i !== null && (this.renameReferenceElement = i), this.arcgisChartsConfigViewChartSelect.emit({
         chartId: this.selectedActionChartId
       }), this.chartTitle = a?.titleText ?? "", this.setupRenamePopover();
@@ -99,16 +130,16 @@ class R extends g {
     this.selectedActionChartId = e;
   }
   setupRenamePopover() {
-    this.isChartRenamePopoverOpen = !0, this.chartRenamePopover !== null && (this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.referenceElement = this.renameReferenceElement), this.chartRenamePopover = f(r`<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);
+    this.isChartRenamePopoverOpen = !0, this.chartRenamePopover !== null && (this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.referenceElement = this.renameReferenceElement), this.chartRenamePopover = w(r`<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.isChartRenamePopoverOpen = !1, this.chartRenamePopover = w(this.chartRenamePopover));
+    this.chartRenamePopover !== null && (this.isChartRenamePopoverOpen = !1, this.chartRenamePopover = I(this.chartRenamePopover));
   }
   render() {
-    return r`<div class=${c(n.viewChartComponent)}>${this.buildChartList()}</div>`;
+    return r`<div class=${n(h.viewChartComponent)}>${this.buildChartList()}</div>`;
   }
 }
-d("arcgis-charts-config-view-charts", R);
+C("arcgis-charts-config-view-charts", y);
 export {
-  R as ArcgisChartsConfigViewCharts
+  y as ArcgisChartsConfigViewCharts
 };