@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,198 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as f } from "../../chunks/runtime.js";
+import { css as v, html as o } from "lit";
+import { keyed as c } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { f as p } from "../../chunks/rest-js-object-literals.js";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import { bS as y, d3 as u } from "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { e as S } from "../../chunks/popover-ui-utils.js";
+import { S as n } from "../../chunks/interfaces.js";
+import { a as h, l as $, c as m } from "../../chunks/chart-ui-utils2.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { createRef as d, ref as C } from "lit/directives/ref.js";
+import {
+  LitElement as P,
+  createEvent as l,
+  safeClassMap as a,
+} from "@geoscene/lumina";
+const r = {
+    jsAppFlyout: "js-app-flyout",
+    scatterplotPopover: "scatter-plot-popover",
+    fillColor: "fill-color",
+    header: "header",
+    pickListItemLabel: "pick-list-item-label",
+    pickListPanel: "pick-list-panel",
+  },
+  F = v`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--geoscene-charts-dim-text)}:host{width:100%}.pick-list-panel{max-height:60vh}`;
+class L extends P {
+  constructor() {
+    super(...arguments),
+      (this.picklist = d()),
+      (this._messages = b()),
+      (this.popoverElement = d()),
+      (this.layerFieldsInfo = []),
+      (this.geosceneChartsConfigPopoverClose = l()),
+      (this.geosceneChartsConfigScatterplotFillColorChange = l()),
+      (this.geosceneChartsConfigScatterplotLineStyleChange = l()),
+      (this.geosceneChartsConfigScatterplotSizeVariableFieldChange = l()),
+      (this.geosceneChartsConfigScatterplotAdditionalTooltipFieldChange = l()),
+      (this.geosceneChartsConfigScatterplotXYFieldChange = l());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      headingTitle: 1,
+      contentKind: 1,
+      selectedContent: 1,
+      referenceElement: 0,
+      placement: 1,
+      open: 5,
+      layerFieldsInfo: 0,
+    };
+  }
+  static {
+    this.styles = F;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  updated() {
+    setTimeout(() => {
+      this.picklist.value?.setFocus();
+    }, h.PopoverTimer),
+      S(this.popoverElement.value, this.open),
+      this.hasUpdated ||
+        setTimeout(() => {
+          this.popoverElement.value?.reposition();
+        }, h.PopoverTimer);
+  }
+  seriesPopoverClose() {
+    (this.open = !1), this.geosceneChartsConfigPopoverClose.emit();
+  }
+  closePopover() {
+    (this.open = !1), this.geosceneChartsConfigPopoverClose.emit();
+  }
+  updateSymbolProperties(e) {
+    (this.selectedContent = e.target.lineStyle),
+      this.geosceneChartsConfigScatterplotLineStyleChange.emit(e.detail);
+  }
+  updateColorProperties(e) {
+    (this.selectedContent = e.detail),
+      this.geosceneChartsConfigScatterplotFillColorChange.emit(e.detail);
+  }
+  onFieldSelectionChange(e) {
+    const t = e.target.selectedItems;
+    this.contentKind === n.sizeVariable
+      ? this.geosceneChartsConfigScatterplotSizeVariableFieldChange.emit(
+          t.map((i) => i.value)[0]
+        )
+      : this.contentKind === n.additionalTooltipFields
+      ? this.geosceneChartsConfigScatterplotAdditionalTooltipFieldChange.emit(
+          t.map((i) => i.value)[0]
+        )
+      : this.geosceneChartsConfigScatterplotXYFieldChange.emit(
+          t.map((i) => i.value)[0]
+        ),
+      (this.open = !1);
+  }
+  render() {
+    const e = this.selectedContent,
+      t = this.selectedContent;
+    return o`<div class=${a({
+      [r.jsAppFlyout]: !0,
+    })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${
+      this.referenceElement ?? document.body
+    } .placement=${this.placement} .offsetDistance=${$(
+      this.placement
+    )} @calcitePopoverClose=${this.closePopover} .open=${
+      this.open
+    } label auto-close ${C(this.popoverElement)}>${
+      Array.isArray(e)
+        ? o`<geoscene-charts-config-color-style .header=${
+            this._messages.fillColor
+          } class=${a(r.fillColor)} enable-close .open=${
+            this.open
+          } .selectedColor=${e} @geosceneChartsConfigColorStyleClose=${
+            this.seriesPopoverClose
+          } @geosceneChartsConfigColorStyleChange=${
+            this.updateColorProperties
+          }></geoscene-charts-config-color-style>`
+        : null
+    }${
+      t?.type === p.SLS
+        ? o`<geoscene-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @geosceneChartsConfigLineStyleClose=${this.seriesPopoverClose} @geosceneChartsConfigLineStyleChange=${this.updateSymbolProperties}></geoscene-charts-config-line-style>`
+        : null
+    }${
+      !Array.isArray(e) && t?.type !== p.SLS
+        ? this.renderVariablePickList()
+        : null
+    }</calcite-popover></div>`;
+  }
+  renderVariablePickList() {
+    const e = this.layerFieldsInfo?.length ?? 0,
+      t = [];
+    (this.contentKind === n.sizeVariable ||
+      this.contentKind === n.additionalTooltipFields) &&
+      t.push(
+        c(
+          " ",
+          o`<calcite-list-item label=" " value=" " .selected=${m(
+            "",
+            this.selectedContent
+          )}></calcite-list-item>`
+        )
+      );
+    for (let i = 0; i < e; i += 1) {
+      const s = this.layerFieldsInfo?.[i] ?? void 0;
+      if (
+        s !== void 0 &&
+        (this.contentKind === n.additionalTooltipFields || y(s))
+      ) {
+        const g = u(this.layerFieldsInfo, s.name);
+        t.push(
+          c(
+            s.name,
+            o`<calcite-list-item .label=${g} .value=${s.name} .selected=${m(
+              s.name,
+              this.selectedContent
+            )}></calcite-list-item>`
+          )
+        );
+      }
+    }
+    return o`<calcite-panel class=${a(r.pickListPanel)} closable .closed=${!this
+      .open} @calcitePanelClose=${
+      this.closePopover
+    }><div slot=header-content class=${a(r.header)}>${
+      this.headingTitle ?? ""
+    }</div><calcite-list label class=${a(
+      r.pickListItemLabel
+    )} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${
+      this.onFieldSelectionChange
+    } ${C(this.picklist)}>${t}</calcite-list></calcite-panel>`;
+  }
+}
+f("geoscene-charts-config-scatter-plot-popover", L);
+export { L as GeosceneChartsConfigScatterplotPopover };

package/dist/components/geoscene-charts-config-scatter-plot-popover/index.js

@@ -0,0 +1,7 @@
+import "@geoscene/calcite-components/components/calcite-popover";
+import "../geoscene-charts-config-color-style/index.js";
+import "../geoscene-charts-config-line-style/index.js";
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-panel";
+import "@geoscene/calcite-components/components/calcite-list";
+export * from "./customElement.js";

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

@@ -0,0 +1,148 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import { css as l, html as a } from "lit";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { e as r } from "../../chunks/popover-ui-utils.js";
+import { a as p } from "../../chunks/chart-ui-utils2.js";
+import { u as n } from "../../chunks/useT9n.js";
+import { createRef as h, ref as m } from "lit/directives/ref.js";
+import {
+  LitElement as d,
+  createEvent as s,
+  safeClassMap as o,
+} from "@geoscene/lumina";
+import { M as e } from "../../chunks/common.js";
+const i = {
+    selectChartComponent: "select-chart-component",
+    jsAppFlyout: "js-app-flyout",
+    panel: "panel",
+  },
+  g = l`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--geoscene-charts-dim-text)}.select-chart-component{width:var(--geoscene-charts-config-panel-width);height:var(--geoscene-charts-config-panel-height)}calcite-block{width:var(--geoscene-charts-config-calcite-block-default-width);height:var(--geoscene-charts-config-calcite-block-default-height);margin:var(--geoscene-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 C extends d {
+  constructor() {
+    super(...arguments),
+      (this._messages = n()),
+      (this.selectChartTypePopover = h()),
+      (this.geosceneChartsConfigPopoverClose = s()),
+      (this.geosceneChartsConfigSelectChartTypeChange = s());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      headerTitle: 1,
+      layerId: 1,
+      open: 5,
+      referenceElement: 0,
+      popoverPlacement: 1,
+      selectedModelType: 1,
+    };
+  }
+  static {
+    this.styles = g;
+  }
+  async reposition() {
+    await this.selectChartTypePopover.value?.reposition();
+  }
+  updated() {
+    r(this.selectChartTypePopover.value, this.open),
+      this.hasUpdated ||
+        setTimeout(() => {
+          this.selectChartTypePopover.value?.reposition();
+        }, p.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-item .label=${
+      this._messages.calendarHeatChart
+    } .value=${e.HeatChart} .selected=${
+      this.selectedModelType === e.HeatChart
+    }><calcite-icon slot=content-start icon=calendar-heat-chart></calcite-icon></calcite-list-item></calcite-list>`;
+  }
+  onChartTypeClick(t) {
+    t.target?.localName === "calcite-list-item"
+      ? (this.selectedModelType = t.target?.value)
+      : (this.selectedModelType = t.target?.parentNode?.value),
+      this.geosceneChartsConfigSelectChartTypeChange.emit();
+  }
+  popoverOpen() {
+    setTimeout(() => {
+      this.selectChartTypePopover.value?.setFocus();
+    }, 250);
+  }
+  popoverClose() {
+    (this.open = !1),
+      this.geosceneChartsConfigPopoverClose.emit(),
+      setTimeout(() => {
+        this.referenceElement?.setFocus();
+      }, 250);
+  }
+  render() {
+    return a`<div class=${o({
+      [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=${o(i.panel)} .heading=${
+      this.headerTitle ?? this._messages.chooseChartType
+    } closable @calcitePanelClose=${this.popoverClose} .closed=${!this
+      .open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+  }
+}
+c("geoscene-charts-config-select-chart-type-popover", C);
+export { C as GeosceneChartsConfigSelectChartTypePopover };

package/dist/components/geoscene-charts-config-select-chart-type-popover/index.js

@@ -0,0 +1,6 @@
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-popover";
+import "@geoscene/calcite-components/components/calcite-panel";
+export * from "./customElement.js";

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

@@ -0,0 +1,289 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as d } from "../../chunks/runtime.js";
+import { keyed as m } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+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 a } from "lit";
+import {
+  LitElement as v,
+  createEvent as s,
+  safeClassMap as c,
+  renderElement as u,
+} from "@geoscene/lumina";
+import { repeat as w } from "lit/directives/repeat.js";
+const n = {
+    addChartContainer: "add-chart-container",
+    viewChartComponent: "view-chart-component",
+    header: "header",
+    dropdownPopup: "dropdown-popup",
+  },
+  I = f`.view-chart-component{width:var(--geoscene-charts-config-panel-width);height:var(--geoscene-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 {
+  constructor() {
+    super(...arguments),
+      (this._messages = g()),
+      (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) => {
+        if (!this.disableEditing) {
+          this.chartTitle = e.detail.name;
+          const t = this.modelList?.find(
+            (i) => i.chartId === this.selectedActionChartId
+          );
+          t !== void 0 && (t.titleText = 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 r = [...this.modelList],
+              o = r?.[i],
+              h = r?.[t];
+            o && h && (r.splice(i, 1), r.splice(t, 0, o)),
+              (this.chartsOrderReorderCounter += 1),
+              this.geosceneChartsConfigModelListReorder.emit({ modelList: r });
+          }
+        }
+      }),
+      (this.isChartRenamePopoverOpen = !1),
+      (this.chartTitle = ""),
+      (this.chartsOrderReorderCounter = 0),
+      (this.noGroup = !1),
+      (this.disableEditing = !1),
+      (this.geosceneChartsConfigModelListReorder = s()),
+      (this.geosceneChartsConfigViewChartAddChart = s()),
+      (this.geosceneChartsConfigViewChartDelete = s()),
+      (this.geosceneChartsConfigViewChartEdit = s()),
+      (this.geosceneChartsConfigViewChartSelect = s());
+  }
+  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;
+  }
+  willUpdate(e) {
+    e.has("modelList") &&
+      this.modelListChange(this.modelList, e.get("modelList"));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeChartRenamePopover();
+  }
+  modelListChange(e, t) {
+    t?.forEach((i) => {
+      i.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+    }),
+      e?.forEach((i) => {
+        i.addEventListener(
+          "geosceneChartsModelConfigChange",
+          this.onModelConfigChange
+        );
+      });
+  }
+  onAddChartClick(e) {
+    e.stopImmediatePropagation(),
+      (this.selectedActionChartId = void 0),
+      this.isChartRenamePopoverOpen && this.removeChartRenamePopover(),
+      this.geosceneChartsConfigViewChartAddChart.emit({
+        referenceElement: e.target,
+        layerId: this.layer?.id.toString(),
+      });
+  }
+  buildChartList() {
+    const e = this.modelList
+      ? w(
+          this.modelList,
+          (t) => t.chartId,
+          (t, i) => {
+            const r = t.chartId,
+              o = t.titleText,
+              h = p(t.config);
+            return a`<calcite-list-item .label=${
+              o ?? r ?? this._messages.chartTitle
+            } .selected=${
+              this.selectedChartId === (r?.toString() ?? i.toString())
+            } .value=${r ?? i.toString()} @click=${
+              this.onChartSelect
+            }><calcite-icon slot=content-start .icon=${h}></calcite-icon>${
+              this.disableEditing
+                ? null
+                : a`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end .open=${
+                    this.selectedActionChartId === r
+                  } @calciteDropdownClose=${() =>
+                    this.chartActionClosed(
+                      r ?? ""
+                    )} @calciteDropdownOpen=${() =>
+                    this.chartActionOpened(r ?? "")} class=${c(
+                    n.dropdownPopup
+                  )}><calcite-action scale=l .text=${
+                    this._messages.chartActions ?? ""
+                  } slot=trigger .active=${
+                    r === 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
+      ? a`<div>${
+          this.noGroup
+            ? null
+            : a`<p class=${c(n.header)}>${
+                this.layer.title ?? this.layer.id.toString()
+              }</p>`
+        }${m(
+          this.chartsOrderReorderCounter,
+          a`<calcite-list label .dragEnabled=${!this
+            .disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${
+            this.onCalciteListOrderChange
+          }>${e}${
+            this.disableEditing
+              ? null
+              : a`<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;
+    let i;
+    t?.localName === "calcite-list-item"
+      ? (i = t.value)
+      : t?.localName === "calcite-icon" && (i = t.parentNode.value),
+      this.geosceneChartsConfigViewChartSelect.emit({ chartId: i });
+  }
+  chartEditSelect() {
+    this.disableEditing ||
+      (this.geosceneChartsConfigViewChartEdit.emit({
+        chartId: this.selectedActionChartId,
+      }),
+      this.chartActionClosed(this.selectedActionChartId));
+  }
+  chartRenameSelect(e) {
+    if (!this.disableEditing) {
+      const i = e.target.closest("calcite-list-item"),
+        r = this.modelList?.find(
+          (o) => o.chartId === this.selectedActionChartId
+        );
+      i !== null && (this.renameReferenceElement = i),
+        this.geosceneChartsConfigViewChartSelect.emit({
+          chartId: this.selectedActionChartId,
+        }),
+        (this.chartTitle = r?.titleText ?? ""),
+        this.setupRenamePopover();
+    }
+  }
+  chartDeleteSelect() {
+    this.disableEditing ||
+      (this.geosceneChartsConfigViewChartDelete.emit({
+        chartId: this.selectedActionChartId,
+      }),
+      (this.selectedActionChartId = ""));
+  }
+  chartActionClosed(e) {
+    e === this.selectedActionChartId &&
+      !this.isChartRenamePopoverOpen &&
+      (this.selectedActionChartId = void 0);
+  }
+  chartActionOpened(e) {
+    this.selectedActionChartId = e;
+  }
+  setupRenamePopover() {
+    (this.isChartRenamePopoverOpen = !0),
+      this.chartRenamePopover !== null &&
+        ((this.chartRenamePopover.name = this.chartTitle),
+        (this.chartRenamePopover.referenceElement =
+          this.renameReferenceElement)),
+      (this.chartRenamePopover = u(
+        a`<geoscene-charts-config-chart-rename-popover .name=${this.chartTitle} .referenceElement=${this.renameReferenceElement} .open=${this.isChartRenamePopoverOpen} @geosceneChartsConfigPopoverClose=${this.popoverClose} @geosceneChartsConfigChartRenamePopoverChange=${this.onChartRename}></geoscene-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 = C(this.chartRenamePopover)));
+  }
+  render() {
+    return a`<div class=${c(
+      n.viewChartComponent
+    )}>${this.buildChartList()}</div>`;
+  }
+}
+d("geoscene-charts-config-view-charts", R);
+export { R as GeosceneChartsConfigViewCharts };

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

@@ -0,0 +1,10 @@
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-dropdown";
+import "@geoscene/calcite-components/components/calcite-action";
+import "@geoscene/calcite-components/components/calcite-dropdown-group";
+import "@geoscene/calcite-components/components/calcite-dropdown-item";
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-fab";
+import "../geoscene-charts-config-chart-rename-popover/index.js";
+export * from "./customElement.js";