/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as N } from "../../chunks/runtime.js";
import { repeat as V } from "lit/directives/repeat.js";
import { keyed as $ } from "lit/directives/keyed.js";
import { c as U } from "../../chunks/setup-utils.js";
import { b as S, a as b, g as _, r as v, l as T } from "../../chunks/type-guards.js";
import { i as H } from "../../chunks/rotated-state.js";
import "@arcgis/toolkit/intl";
import { isEqual as w } from "lodash-es";
import "luxon";
import { _ as D, dk as k, d6 as F, ds as z, du as O, ag as R } from "../../chunks/index.js";
import "@arcgis/core/geometry/support/jsonUtils.js";
import "@arcgis/core/rest/support/AttributeBinsQuery.js";
import "@arcgis/core/rest/support/StatisticDefinition.js";
import "@arcgis/core/time/TimeExtent.js";
import "@arcgis/toolkit/type";
import { W as o, i as W } from "../../chunks/series-types.js";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
import "d3-array";
import { substitute as G } from "@arcgis/core/intl.js";
import "@arcgis/core/layers/support/FeatureFilter.js";
import "@arcgis/core/smartMapping/statistics/histogram.js";
import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
import "simple-statistics";
import "@arcgis/core/request.js";
import "@arcgis/core/core/sql.js";
import "@arcgis/core/AttributeBinsGraphic.js";
import "@arcgis/core/core/promiseUtils.js";
import "@arcgis/toolkit/dom";
import { C as f } from "../../chunks/index5.js";
import { a as L } from "../../chunks/chart-ui-utils.js";
import { r as X } from "../../chunks/popover-ui-utils.js";
import { C as l } from "../../chunks/interfaces.js";
import { LitElement as Z, createEvent as y, renderElement as I, safeStyleMap as K, safeClassMap as d } from "@arcgis/lumina";
import { css as j, html as h } from "lit";
import { createRef as q, ref as Y } from "lit/directives/ref.js";
import { u as P } from "../../chunks/useT9n.js";
import { b as Q, s as x, g as J } from "../../chunks/store.js";
import { h as ee, a as M, s as te } from "../../chunks/web-component-utils.js";
import { A as ae } from "../../chunks/axis-model-wrapper.js";
import { d as ie } from "../../chunks/chart-ui-utils2.js";
const m = {
  chartUIComponent: "chart-ui-component",
  tabBar: "tab-bar",
  tab: "tab"
};
function B(p, e) {
  const a = /* @__PURE__ */ new Set();
  let t = e;
  return p?.forEach((i, s) => {
    const r = i.chartId;
    (a.has(r) || r === void 0 || r === "") && (i.chartId = `Chart_${Date.now()}_${s}`, e === r && (t = i.chartId)), a.add(r);
  }), t;
}
function se(p, e, a) {
  return p?.filter((t) => F(a, t.config) && t.layer?.id === e) ?? [];
}
function re(p) {
  const { modelList: e, layerList: a, activeLayerId: t, disableEditing: i } = p, s = /* @__PURE__ */ new Map();
  return e?.forEach((r) => {
    const n = r.layer;
    n && s.set(n.id, n);
  }), i || a.forEach((r) => s.set(r.id, r)), Array.from(s.values()).filter((r) => !t || r.id === t);
}
function oe(p, e) {
  p.forEach((a) => {
    e.forEach((t) => {
      a?.id === t.layer?.id && E(a, t);
    });
  });
}
function E(p, e) {
  const a = p;
  if (a) {
    const t = [...a?.charts ?? []], i = t?.findIndex((r) => r.id === e.chartId);
    let s = !1;
    i !== void 0 && i > -1 ? (s = !w(t[i], e.config), t[i] = e.config) : a && !D(e.config) && (s = !0, t.push(e.config)), s && (a.charts = t);
  }
}
function le(p, e) {
  const a = p;
  if (a) {
    const t = [...a.charts ?? []], i = t.findIndex((s) => s.id === e);
    i > -1 && (t.splice(i, 1), a.charts = t);
  }
}
function ne(p, e) {
  const a = p;
  if (a) {
    let t = [...a.charts ?? []];
    t = k({
      arrayA: t,
      arrayB: e.map((i) => i.config),
      getKey: (i) => i.id ?? i.title?.content.text ?? ""
    }), a.charts = t;
  }
}
const ce = j`:host{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;height:inherit;max-height:100%}.chart-ui-component{overflow-y:auto;overflow-x:hidden}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.text{display:flex;margin-left:1rem;width:calc(100% - 1.5rem);height:2rem;margin-bottom:.5rem;justify-content:space-between}.field-list{max-height:50vh;overflow-y:scroll}.row{padding:.5rem}.bin-count-container{display:flex;width:calc(100% - 1rem);padding:.5rem}.bin-count-slider{margin-left:1rem;width:calc(90% - 1rem)}.bin-count-input{margin-left:1rem;height:2rem;width:2rem}.bin-row{padding:.5rem 0 .5rem .5rem}.tab-bar{display:flex}.tab{flex:1;height:2.5rem}`;
class he extends Z {
  constructor() {
    super(), this.selectChartTypePopover = null, this.chartsListFlowItem = q(), this.supportedChartTypes = [
      o.BarSeries,
      o.BoxPlotSeries,
      o.LineSeries,
      o.PieSeries,
      o.HistogramSeries,
      o.ScatterSeries,
      o.HeatSeries
    ], this._messages = P(), this.commonStrings = P({ name: "common", blocking: !0 }), this.chartDataProcessComplete = (e) => {
      const a = e, { chartData: t, model: i } = a.detail, s = this.getModel(this.selectedChartId);
      if (i?.isSameChartAs(s))
        switch (s?.chartType) {
          case o.HistogramSeries:
            this.chartData = t, i && (i.dataStore.chartData = t);
            break;
          case o.PieSeries: {
            this.chartData = t, i && (i.dataStore.chartData = t);
            break;
          }
          case o.ScatterSeries: {
            const n = t, { dataItems: c, r2: u, aggregated: g } = n;
            let C = u;
            Number.isFinite(u) || (C = void 0), this.r2 = C, _(i) && (i.dataStore.r2 = C, i.dataStore.aggregated = g, g && (i.additionalTooltipField = void 0)), this.calculatedDataMinMaxBounds = this.getDataExtent(c), i && (i.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds);
            break;
          }
          case o.LineSeries:
          case o.BarSeries: {
            const { dataItems: n, timeIntervalInfo: c } = t;
            if ((S(s) || b(s) && s.binTemporalData) && (c?.size !== void 0 && s.temporalBinningSize !== c?.size && (s.temporalBinningSize = c?.size), c?.unit !== void 0 && s.temporalBinningUnit !== c?.unit && c?.unit !== W.Quarter && (s.temporalBinningUnit = c?.unit), c?.size !== void 0 && c?.unit !== void 0 && Q(x, { size: c.size, unit: c.unit })), this.calculatedDataMinMaxBounds = this.getDataExtent(n), i && (i.dataStore.calculatedDataMinMaxBounds = this.calculatedDataMinMaxBounds), b(s)) {
              const u = s.xAxisField, g = n.some((A) => A[u] === null), C = s.nullCategory;
              g && C === void 0 && (s.nullCategory = z.nullCategory);
            }
            break;
          }
        }
    }, this.chartAxesMinMaxChange = (e) => {
      const a = e, { bounds: t, model: i } = a.detail, s = this.getModel(this.selectedChartId), r = i?.isSameChartAs(s), n = s?.chartType;
      if (r)
        switch (n) {
          case o.BarSeries:
          case o.BoxPlotSeries:
          case o.LineSeries:
          case o.HistogramSeries:
          case o.ScatterSeries:
            this.calculatedMinMaxBounds = t, i && (i.dataStore.calculatedMinMaxBounds = t), this.updateAxesBoundsInAppState(t);
            break;
        }
    }, this.chartSeriesColorChange = (e) => {
      const a = e, { data: t, model: i } = a.detail, s = this.getModel(this.selectedChartId);
      if (i?.isSameChartAs(s))
        switch (s?.chartType) {
          case o.BarSeries:
          case o.BoxPlotSeries:
          case o.LineSeries:
          case o.HistogramSeries:
            this.seriesColor = t, i && (i.dataStore.seriesColor = t);
            break;
          case o.PieSeries: {
            const n = /* @__PURE__ */ new Map([[0, t]]);
            this.seriesColor = n, i && (i.dataStore.seriesColor = n);
            break;
          }
          case o.ScatterSeries:
        }
    }, this.chartNoRenderPropChange = (e) => {
      const a = e, { propName: t, value: i, model: s } = a.detail, r = this.modelList.find((n) => s?.isSameChartAs(n));
      if (r)
        switch (t) {
          case "rotation":
            typeof i == "boolean" && H(r) && (r.rotatedState = i);
            break;
          case "legendPosition":
            typeof i == "string" && v(r) && (r.legendPosition = i);
            break;
          case "legendVisibility":
            typeof i == "boolean" && v(r) && (r.legendVisibility = i);
            break;
        }
    }, this.chartLegendItemVisibilityChange = (e) => {
      const a = e, { legendItemVisibility: t, model: i } = a.detail, s = this.modelList.find((r) => i?.isSameChartAs(r));
      s?.setSeriesVisibility(t), T(s) && ((s.getMinBound(1) === null || Number.isNaN(s.getMinBound(1))) && s.setMinBound(null, 1), (s.getMaxBound(1) === null || Number.isNaN(s.getMaxBound(1))) && s.setMaxBound(null, 1), S(s) && ((s.getMinBound(0) === null || Number.isNaN(s.getMinBound(0))) && s.setMinBound(null, 0), (s.getMaxBound(0) === null || Number.isNaN(s.getMaxBound(0))) && s.setMaxBound(null, 0)));
    }, this.onSelectChartTypeChange = (e) => {
      this.currentChartTypeText = "", this.calculatedDataMinMaxBounds = void 0, this.calculatedMinMaxBounds = void 0, this.removeSelectChartTypePopover();
      const { selectedModelType: a, layerId: t } = e.target;
      a !== void 0 && (this.allowChartSyncing = !0, this.arcgisChartsConfigNewChart.emit({
        key: "key",
        chartType: a,
        layerId: t
      }));
    }, this.onAddChartClose = () => {
      this.removeSelectChartTypePopover();
    }, this.onModelConfigChange = (e) => {
      if (this.syncChartsToLayers && this.allowChartSyncing) {
        const a = e.target;
        E(a?.layer, a);
      }
      this.requestUpdate();
    }, this.allowChartSyncing = !1, this.currentChartTypeText = "", this.modelList = [], this.layerList = [], this.disableEditing = !1, this.syncChartsToLayers = !1, this.panelNumber = 0, this.arcgisChartsConfigChartViewChartClose = y(), this.arcgisChartsConfigModelListChange = y(), this.arcgisChartsConfigNewChart = y(), this.arcgisChartsConfigPanelNumberChange = y(), this.arcgisChartsConfigSelectedChartChange = y(), this.addChartEventListeners(), this.listen("arcgisChartsConfigModelListReorder", this.modelListReorderChangeListener);
  }
  static {
    this.properties = { selectedPanel: 16, currentChartTypeText: 16, messageOverrides: 0, modelList: [0, { hasChanged: M }], layerList: [0, { hasChanged: M }], selectedChartId: 1, activeLayerId: 1, disableEditing: 5, syncChartsToLayers: 5, timeZone: 1, headerTitle: 1, open: 5, chartData: [0, { hasChanged: M }], r2: 9, calculatedDataMinMaxBounds: [0, { hasChanged: M }], calculatedMinMaxBounds: [0, { hasChanged: M }], seriesColor: [0, { hasChanged: ee }], popoverPlacement: 1, usePopupTemplateFieldsInfo: 5, panelNumber: 9, filterBySelection: 5 };
  }
  static {
    this.styles = ce;
  }
  async setFocus() {
    await this.chartsListFlowItem.value?.setFocus();
  }
  async load() {
    await this.layerListChange();
    const e = this.getModel(this.selectedChartId);
    this.setEventBasedPropsFromModelData(e);
  }
  willUpdate(e) {
    e.has("layerList") && this.layerListChange(), e.has("panelNumber") && this.panelNumberChange(this.panelNumber), e.has("modelList") && this.modelListChange(this.modelList, e.get("modelList")), e.has("selectedChartId") && this.selectedChartIdChange(this.selectedChartId);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.clearPartialModels(), this.removeSelectChartTypePopover();
  }
  modelListReorderChangeListener(e) {
    const { modelList: a } = e.detail;
    if (this.modelList = k({
      arrayA: this.modelList,
      arrayB: a,
      getKey: (t) => t.chartId ?? t.titleText ?? ""
    }), this.syncChartsToLayers) {
      const t = a.find((i) => i.layer?.id !== void 0)?.layer?.id;
      if (t) {
        const i = this.layerList.find((s) => s.id.toString() === t);
        i && ne(i, a);
      }
    }
  }
  async layerListChange() {
    const e = [], a = this.layerList.map((i) => i.id.toString());
    let t = [...this.modelList.filter((i) => a.includes(i.layer?.id ?? ""))];
    for (let i of this.layerList ?? []) {
      if (i.type === "sublayer") {
        const n = await i.createFeatureLayer();
        if (!n)
          continue;
        i = n;
      }
      const r = i.charts;
      for (const n of r ?? []) {
        const c = await U({
          layer: i,
          config: n
        });
        c !== void 0 && e.push(c);
      }
    }
    B(e), e.forEach((i) => {
      t.find((r) => r.isSameChartAs(i)) === void 0 && t.push(i);
    }), t = t.filter((i) => !O(i.config)), this.modelList = t;
  }
  modelListChange(e, a) {
    this.selectedChartId = B(e, this.selectedChartId), a?.forEach((i) => {
      i.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
    }), e.forEach((i) => {
      i.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
    });
    const t = this.getModel(this.selectedChartId);
    this.currentChartTypeText = t?.chartType !== void 0 ? L({
      chartType: t.chartType,
      commonStrings: this.commonStrings,
      config: t.config
    }) : "", this.syncChartsToLayers && this.allowChartSyncing && oe(this.layerList, e), this.arcgisChartsConfigModelListChange.emit({ modelList: e });
  }
  selectedChartIdChange(e) {
    this.selectedChartId === void 0 && (this.panelNumber = 0), this.selectedPanel = l.Data;
    const a = this.getModel(e);
    this.setEventBasedPropsFromModelData(a), this.currentChartTypeText = a?.chartType !== void 0 ? L({
      chartType: a.chartType,
      commonStrings: this.commonStrings,
      config: a.config
    }) : "", e !== void 0 && e !== x.selectedChartId && (x.selectedChartId = e), this.allowChartSyncing = !0, this.arcgisChartsConfigSelectedChartChange.emit({
      key: "key",
      model: a
    });
  }
  panelNumberChange(e) {
    e === 0 ? this.clearPartialModels() : e === 1 && this.removeSelectChartTypePopover(), this.arcgisChartsConfigPanelNumberChange.emit({ panelNumber: e, modelList: this.modelList });
  }
  addChartEventListeners() {
    this.listenOn(document, f.DataProcessComplete, this.chartDataProcessComplete), this.listenOn(document, f.AxesMinMaxChange, this.chartAxesMinMaxChange), this.listenOn(document, f.SeriesColorChange, this.chartSeriesColorChange), this.listenOn(document, f.NoRenderPropChange, this.chartNoRenderPropChange), this.listenOn(document, f.LegendItemVisibilityChange, this.chartLegendItemVisibilityChange);
  }
  getDataExtent(e) {
    const a = this.getModel(this.selectedChartId)?.config;
    let t = [];
    if (a !== void 0 && e !== void 0) {
      const i = R({
        chartConfig: a,
        chartData: e
      }), { minY: s, maxY: r, minX: n, maxX: c } = i;
      t = [
        { isXAxis: !0, minimum: n, maximum: c },
        { isXAxis: !1, minimum: s, maximum: r }
      ];
    }
    return t;
  }
  updateAxesBoundsInAppState(e) {
    e?.forEach((a) => {
      const { isXAxis: t, maximum: i, minimum: s } = a, r = this.getModel(this.selectedChartId);
      if (r !== void 0 && T(r) && this.selectedChartId !== void 0) {
        const n = new ae(r, t), c = J({
          chartId: this.selectedChartId,
          isXAxis: t,
          isLogarithmic: n.getLogarithmic()
        }), u = x.chartAxesBoundDataMap;
        u[this.selectedChartId] === void 0 && (u[this.selectedChartId] = {});
        const g = u[this.selectedChartId]?.[c], C = {
          defaultMinBound: g?.defaultMinBound === g?.currMinBound ? s : g?.defaultMinBound,
          currMinBound: s,
          defaultMaxBound: g?.defaultMaxBound === g?.currMaxBound ? i : g?.defaultMaxBound,
          currMaxBound: i
        };
        !w(g, C) && this.selectedChartId !== void 0 && u?.[this.selectedChartId] !== void 0 && (u[this.selectedChartId][c] = C);
      }
    });
  }
  getPlacement() {
    let e;
    return this.popoverPlacement !== void 0 ? e = this.popoverPlacement : e = this.modelList?.filter((i) => F(te, i.config)).length <= 2 ? "bottom" : "top", e;
  }
  onBackFlow() {
    this.panelNumber -= 1;
  }
  onAddChartClick(e) {
    const { referenceElement: a, layerId: t } = e.detail;
    this.setupSelectChartTypePopover(a, t);
  }
  setupSelectChartTypePopover(e, a) {
    const t = this.getPlacement();
    this.removeSelectChartTypePopover(), this.selectChartTypePopover = I(h`<arcgis-charts-config-select-chart-type-popover .referenceElement=${e} open .layerId=${a} .popoverPlacement=${t} @arcgisChartsConfigPopoverClose=${this.onAddChartClose} @arcgisChartsConfigSelectChartTypeChange=${this.onSelectChartTypeChange}></arcgis-charts-config-select-chart-type-popover>`), !document.body.contains(this.selectChartTypePopover) && this.selectChartTypePopover !== null && document.body.appendChild(this.selectChartTypePopover);
  }
  getModel(e) {
    return this.modelList?.find((a) => a.chartId === e);
  }
  removeSelectChartTypePopover() {
    this.selectChartTypePopover !== void 0 && (this.selectChartTypePopover?.remove(), this.selectChartTypePopover = X(this.selectChartTypePopover));
  }
  clearPartialModels() {
    this.modelList = this.modelList.filter((e) => !D(e.config));
  }
  onViewChartDelete(e) {
    const { chartId: a } = e.detail;
    if (a !== void 0) {
      const t = this.modelList.find((s) => s.chartId === a), i = this.layerList.find((s) => s.id === t?.layer?.id);
      this.modelList = [...this.modelList.filter((s) => s.chartId !== a)], i && this.syncChartsToLayers && this.allowChartSyncing && le(i, a);
    }
  }
  onViewChartsSelect(e) {
    this.selectedChartId === e.detail.chartId && (this.allowChartSyncing = !0, this.arcgisChartsConfigSelectedChartChange.emit({
      key: "key",
      model: this.getModel(this.selectedChartId)
    })), this.selectedChartId = e.detail.chartId;
  }
  onViewChartsEdit(e) {
    this.onViewChartsSelect(e), this.panelNumber = 1;
  }
  onViewChartClose() {
    this.open = !1, this.removeSelectChartTypePopover(), this.arcgisChartsConfigChartViewChartClose.emit();
  }
  setEventBasedPropsFromModelData(e) {
    this.chartData = e?.dataStore.chartData, this.r2 = e?.dataStore.r2, this.seriesColor = e?.dataStore.seriesColor, this.calculatedMinMaxBounds = e?.dataStore.calculatedMinMaxBounds, this.calculatedDataMinMaxBounds = e?.dataStore.calculatedDataMinMaxBounds;
  }
  createTooltip(e) {
    const a = e.target;
    let t = "";
    switch (a.icon) {
      case "configure":
        t = this._messages.data ?? "";
        break;
      case "graph-bar-stacked":
      case "graph-line-series":
      case "box-chart-series":
        t = this._messages.series ?? "";
        break;
      case "graph-pie-slice":
        t = this._messages.slices ?? "";
        break;
      case "graph-axis":
        t = this._messages.axes ?? "";
        break;
      case "graph-guides":
        t = this._messages.guides ?? "";
        break;
      case "palette":
        t = this._messages.format ?? "";
        break;
      case "text":
        t = this._messages.general ?? "";
        break;
      default:
        t = "";
        break;
    }
    this.tooltip = I(h`<calcite-tooltip style=${K({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${a} open placement=top>${t}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
  }
  destroyTooltip() {
    ie(this.tooltip);
  }
  renderViewCharts() {
    const e = re({
      modelList: this.modelList,
      layerList: this.layerList,
      activeLayerId: this.activeLayerId,
      disableEditing: this.disableEditing
    });
    return V(e, (a) => a.id, (a) => h`<arcgis-charts-config-view-charts .noGroup=${this.activeLayerId !== void 0} .modelList=${se(this.modelList, a.id.toString(), this.supportedChartTypes)} .selectedChartId=${this.selectedChartId ?? ""} .layer=${a} .disableEditing=${this.disableEditing} @arcgisChartsConfigViewChartSelect=${this.onViewChartsSelect} @arcgisChartsConfigViewChartEdit=${this.onViewChartsEdit} @arcgisChartsConfigViewChartDelete=${this.onViewChartDelete} @arcgisChartsConfigViewChartAddChart=${this.onAddChartClick}></arcgis-charts-config-view-charts>`);
  }
  render() {
    return this.open !== !1 ? h`<calcite-flow>${$("charts-list", h`<calcite-flow-item .selected=${this.panelNumber === 0 || this.disableEditing} .heading=${this.headerTitle ?? this._messages.defaultHeaderTitle} closable @calciteFlowItemClose=${this.onViewChartClose} ${Y(this.chartsListFlowItem)}>${this.renderViewCharts()}</calcite-flow-item>`)}${this.panelNumber >= 1 && !this.disableEditing ? this.renderTabs() : null}</calcite-flow>` : null;
  }
  renderTabs() {
    const e = this.getModel(this.selectedChartId);
    return $("chart-edit", h`<calcite-flow-item .selected=${this.panelNumber >= 1 && !this.disableEditing} @calciteFlowItemBack=${this.onBackFlow} .heading=${this._messages[this.selectedPanel ?? l.Data]} .description=${this.currentChartTypeText !== "" && this._messages.pageFlowTitle !== void 0 ? G(this._messages.pageFlowTitle, {
      chartName: e?.titleText ?? this.currentChartTypeText,
      layerName: e?.layer?.title ?? ""
    }) : ""}>${e?.chartType !== void 0 ? h`<calcite-action-bar class=${d(m.tabBar)} layout=horizontal expand-disabled><calcite-action class=${d(m.tab)} icon=configure scale=s alignment=center .active=${this.selectedPanel === l.Data || this.selectedPanel === void 0} @click=${() => {
      this.selectedPanel = l.Data;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>${e?.chartType === o.BarSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-bar-stacked scale=s alignment=center .active=${this.selectedPanel === l.Series} @click=${() => {
      this.selectedPanel = l.Series;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.LineSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-line-series scale=s alignment=center .active=${this.selectedPanel === l.Series} @click=${() => {
      this.selectedPanel = l.Series;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.BoxPlotSeries ? h`<calcite-action class=${d(m.tab)} icon=box-chart-series scale=s alignment=center .active=${this.selectedPanel === l.Series} @click=${() => {
      this.selectedPanel = l.Series;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType === o.PieSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-pie-slice scale=s alignment=center .active=${this.selectedPanel === l.Slices} @click=${() => {
      this.selectedPanel = l.Slices;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-axis scale=s alignment=center .active=${this.selectedPanel === l.Axes} @click=${() => {
      this.selectedPanel = l.Axes;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}${e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries ? h`<calcite-action class=${d(m.tab)} icon=graph-guides scale=s alignment=center .active=${this.selectedPanel === l.Guides} @click=${() => {
      this.selectedPanel = l.Guides;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action>` : null}<calcite-action class=${d(m.tab)} icon=palette scale=s alignment=center .active=${this.selectedPanel === l.Format} @click=${() => {
      this.selectedPanel = l.Format;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action><calcite-action class=${d(m.tab)} icon=text scale=s alignment=center .active=${this.selectedPanel === l.General} @click=${() => {
      this.selectedPanel = l.General;
    }} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip} text></calcite-action></calcite-action-bar>` : null}${this.renderChartUIComponent()}</calcite-flow-item>`);
  }
  renderChartUIComponent() {
    const e = this.getModel(this.selectedChartId), a = e?.layer;
    let t = null;
    if (e !== void 0 && !this.disableEditing)
      switch (e?.chartType) {
        case o.BarSeries:
          t = h`<arcgis-charts-config-bar-chart class=${d(m.chartUIComponent)} .model=${e} .timeZone=${this.timeZone} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .page=${this.selectedPanel ?? l.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-bar-chart>`;
          break;
        case o.LineSeries:
          t = h`<arcgis-charts-config-line-chart class=${d(m.chartUIComponent)} .model=${e} .timeZone=${this.timeZone} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .page=${this.selectedPanel ?? l.Data} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-line-chart>`;
          break;
        case o.PieSeries:
          t = h`<arcgis-charts-config-pie-chart class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .chartData=${this.chartData} .page=${this.selectedPanel ?? l.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor} .filterBySelection=${this.filterBySelection}></arcgis-charts-config-pie-chart>`;
          break;
        case o.HistogramSeries:
          t = h`<arcgis-charts-config-histogram class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .page=${this.selectedPanel ?? l.Data} .chartData=${this.chartData} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-histogram>`;
          break;
        case o.ScatterSeries:
          t = h`<arcgis-charts-config-scatter-plot class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .page=${this.selectedPanel ?? l.Data} .r2=${this.r2} .calculatedDataMinMaxBounds=${this.calculatedDataMinMaxBounds} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds}></arcgis-charts-config-scatter-plot>`;
          break;
        case o.BoxPlotSeries:
          t = h`<arcgis-charts-config-box-plot class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .page=${this.selectedPanel ?? l.Data} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .seriesColor=${this.seriesColor}></arcgis-charts-config-box-plot>`;
          break;
        case o.HeatSeries:
          t = h`<arcgis-charts-config-heat-chart class=${d(m.chartUIComponent)} .model=${e} .usePopupTemplateFieldsInfo=${this.usePopupTemplateFieldsInfo} .layer=${a} .page=${this.selectedPanel ?? l.Data}></arcgis-charts-config-heat-chart>`;
          break;
      }
    return t;
  }
}
N("arcgis-charts-config-create-flow", he);
export {
  he as ArcgisChartsConfigCreateFlow
};
