import { c as W } from "../../chunks/runtime.js";
import { css as G, html as y } from "lit";
import { ref as q } from "lit/directives/ref.js";
import { keyed as K } from "lit/directives/keyed.js";
import { useDirection as J, useMedia as Q } from "@arcgis/lumina/controllers";
import { getColorsFromRenderer as Z } from "@arcgis/core/renderers/support/utils.js";
import { LitElement as ee, safeClassMap as C, nothing as b } from "@arcgis/lumina";
import { substitute as te } from "@arcgis/core/intl.js";
import { watch as ie } from "@arcgis/core/core/reactiveUtils.js";
import ae from "@arcgis/core/popup/FieldInfo.js";
import P from "@arcgis/core/popup/content/support/ChartMediaInfoValueSeries.js";
import { unsafeGetCalciteModeName as re } from "@arcgis/toolkit/dom";
import { renderingSanitizer as X } from "@arcgis/core/applications/Components/sanitizerUtils.js";
import { i as $, s as L, f as E, b as Y, c as ne, a as U, d as se, e as oe, h as B, j as le } from "../../chunks/feature-utils.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.7 */
const ce = G`.arcgis-feature-media__container{display:flex;flex-flow:row wrap;align-items:center;margin-top:var(--calcite-spacing-xs);width:100%;min-height:150px}.arcgis-feature-media__container .arcgis-feature-media__pagination-button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding-block:var(--calcite-spacing-xs);padding-inline:var(--calcite-spacing-xs);color:var(--calcite-color-text-3)}.arcgis-feature-media__container .arcgis-feature-media__pagination-button:hover,.arcgis-feature-media__container .arcgis-feature-media__pagination-button:focus{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1);fill:var(--calcite-color-text-1)}.arcgis-feature-media__item-title{margin:0;font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-relative-snug)}.arcgis-feature-media__item-caption{padding-block-start:var(--calcite-spacing-xxs);font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-relative-snug)}.arcgis-feature-media__item{display:flex;align-items:flex-start;justify-content:center;margin-block:var(--calcite-spacing-xs);width:100%;height:auto}.arcgis-feature-media__item-navigation{display:flex;flex:0 1 100%;align-items:flex-start;justify-content:space-between;margin-block-end:var(--calcite-spacing-xs)}.arcgis-feature-media__item-text{margin-inline-end:var(--calcite-spacing-xs)}.arcgis-feature-media__pagination{display:flex;flex:0 0 auto;align-items:center;overflow:hidden}.arcgis-feature-media__pagination:only-child{margin-inline-start:auto}.arcgis-feature-media__pagination-text{padding-inline:var(--calcite-spacing-xxs);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-relative-normal)}.arcgis-feature-media__item-container{flex:0 1 auto;width:100%}.arcgis-feature-media__item-container img{max-width:100%}.arcgis-feature-media__item-container img[src$=".SVG"],.arcgis-feature-media__item-container img[src$=".svg"]{width:100%}.arcgis-feature-media__chart{width:100%;height:155px}`;
function N(F) {
  if (!$(F))
    return null;
  const [e, t] = F.split("/").slice(1);
  return { layerId: e, fieldName: t };
}
const M = "arcgis-feature-media", v = {
  base: M,
  mediaContainer: `${M}__container`,
  mediaItemContainer: `${M}__item-container`,
  mediaItem: `${M}__item`,
  mediaItemText: `${M}__item-text`,
  mediaItemTitle: `${M}__item-title`,
  mediaItemCaption: `${M}__item-caption`,
  mediaNavigation: `${M}__item-navigation`,
  mediaPagination: `${M}__pagination`,
  mediaPaginationText: `${M}__pagination-text`,
  mediaChart: `${M}__chart`,
  mediaPaginationButton: `${M}__pagination-button`,
  mediaPaginationIcon: `${M}__pagination-icon`,
  mediaChartRendered: `${M}__chart--rendered`
}, V = 15, w = "category", T = "value", de = "rgba(50, 50, 50, 1)", ue = 250, me = 500, he = 200;
class fe extends ee {
  constructor() {
    super(...arguments), this._direction = J(), this._prefersReducedMotion = Q("(prefers-reduced-motion)"), this.activeMediaInfoIndex = 0, this.chartAnimationDisabled = !1, this.headingLevel = 2;
  }
  static {
    this.properties = { _refreshIntervalInfo: 16, messages: 0, values: 0, activeMediaInfoIndex: 9, chartAnimationDisabled: 5, activeMediaInfo: 32, formattedMediaInfos: 32, description: 1, fieldInfoMap: 0, layer: 0, mediaInfos: 0, popupTemplate: 0, relatedInfos: 0, formattedValues: 0, heading: 1, graphic: 0, formattedMediaInfoCount: 32, headingLevel: 9 };
  }
  static {
    this.styles = ce;
  }
  get activeMediaInfo() {
    return this.formattedMediaInfos[this.activeMediaInfoIndex] || null;
  }
  get formattedMediaInfos() {
    return this._formatMediaInfos() || [];
  }
  get formattedMediaInfoCount() {
    return this.formattedMediaInfos.length;
  }
  next() {
    this._pageContentElementMedia(1);
  }
  previous() {
    this._pageContentElementMedia(-1);
  }
  setActiveMedia(e) {
    this._setContentElementMedia(e);
  }
  loaded() {
    this.manager.onLifecycle(() => [
      ie(() => [this.activeMediaInfo, this.activeMediaInfoIndex], () => this._setupMediaRefreshTimer(), { initial: !0 }),
      { remove: () => this._clearMediaRefreshTimer() }
    ]);
  }
  _setContentElementMedia(e) {
    const { formattedMediaInfoCount: t } = this, i = (e + t) % t;
    this.activeMediaInfoIndex = i;
  }
  _pageContentElementMedia(e) {
    const { activeMediaInfoIndex: t } = this, i = t + e;
    this._setContentElementMedia(i);
  }
  _formatMediaInfos() {
    const { mediaInfos: e, layer: t } = this, i = this.values ?? {}, a = this.formattedValues ?? {}, r = this.fieldInfoMap ?? /* @__PURE__ */ new Map();
    return e?.map((s) => {
      const n = s?.clone();
      if (!n)
        return null;
      if (n.title = L({
        values: i,
        fieldInfoMap: r,
        globalValues: a,
        layer: t,
        text: n.title
      }), n.caption = L({
        values: i,
        fieldInfoMap: r,
        globalValues: a,
        layer: t,
        text: n.caption
      }), n.altText = L({
        values: i,
        fieldInfoMap: r,
        globalValues: a,
        layer: t,
        text: n.altText
      }), n.type === "image") {
        if (!n.value)
          return null;
        const o = n.value;
        return this._setImageValue({
          value: o,
          formattedValues: a,
          layer: t
        }), o.sourceURL ? n : void 0;
      }
      if (n.type === "pie-chart" || n.type === "line-chart" || n.type === "column-chart" || n.type === "bar-chart") {
        if (!n.value)
          return null;
        const o = n.value;
        return this._setChartValue({
          value: o,
          chartType: n.type,
          values: i,
          formattedValues: a,
          layer: t
        }), n;
      }
      return null;
    }).filter((s) => s != null) ?? [];
  }
  _setImageValue(e) {
    const t = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { value: i, formattedValues: a, layer: r } = e, { linkURL: s, sourceURL: n } = i;
    if (n) {
      const o = E(n, r);
      i.sourceURL = Y({
        formattedValues: a,
        template: o,
        fieldInfoMap: t
      });
    }
    if (s) {
      const o = E(s, r);
      i.linkURL = Y({
        formattedValues: a,
        template: o,
        fieldInfoMap: t
      });
    }
  }
  _setChartValue(e) {
    const { value: t, values: i, formattedValues: a, chartType: r, layer: s } = e, { popupTemplate: n, relatedInfos: o } = this, { fields: c, normalizeField: _ } = t, d = s;
    if (t.fields = ne(c, d), _ && (t.normalizeField = U(_, d)), !c.some((u) => !!(a[u] != null || $(u) && o?.size)))
      return;
    const m = n?.fieldInfos ?? [];
    t.series = [], c.forEach((u, h) => {
      const f = t.colors?.[h];
      if ($(u)) {
        t.series = [
          ...t.series,
          ...this._getRelatedChartInfos({ fieldInfos: m, fieldName: u, formattedValues: a, chartType: r, value: t, color: f })
        ];
        return;
      }
      const p = this._getChartOption({
        value: t,
        values: i,
        chartType: r,
        formattedValues: a,
        fieldName: u,
        fieldInfos: m,
        color: f
      });
      t.series.push(p);
    });
  }
  _getRelatedChartInfos(e) {
    const { fieldInfos: t, fieldName: i, formattedValues: a, chartType: r, value: s, color: n } = e, o = [], c = N(i), _ = c && this.relatedInfos?.get(c.layerId);
    if (!_)
      return o;
    const { relatedFeatures: d, relation: l } = _;
    if (!l || !d)
      return o;
    const { cardinality: m } = l;
    return d.forEach((h) => {
      const f = h.attributes;
      f && Object.keys(f).forEach((p) => {
        p === c.fieldName && o.push(this._getChartOption({
          value: s,
          values: f,
          formattedValues: a,
          fieldName: i,
          chartType: r,
          relatedFieldName: p,
          hasMultipleRelatedFeatures: d?.length > 1,
          fieldInfos: t,
          color: n
        }));
      });
    }), m && (m === "one-to-many" || m === "many-to-many") ? o : [o[0]];
  }
  _getTooltip({ label: e, value: t, chartType: i }) {
    return i === "pie-chart" ? `${e}` : `${e}: ${t}`;
  }
  _getChartOption(e) {
    const { value: t, values: i, formattedValues: a, fieldName: r, relatedFieldName: s, fieldInfos: n, chartType: o, hasMultipleRelatedFeatures: c, color: _ } = e, { layer: d, graphic: l } = this, m = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { normalizeField: u, tooltipField: h } = t, f = u ? $(u) ? i[N(u).fieldName] : i[u] : null, p = se(r) && a?.[r] !== void 0 ? a[r] : s && i[s] !== void 0 ? i[s] : i[r] !== void 0 ? i[r] : a[r], I = p === void 0 ? null : p && f && typeof p == "number" && typeof f == "number" ? p / f : p, x = oe(n, r), g = U(r, d), A = (h && a[h] !== void 0 ? a[h] : B({
      fieldInfo: x || new ae({ fieldName: g }),
      expressionInfos: this.popupTemplate?.expressionInfos,
      graphic: l,
      layer: d
    })) ?? "", S = a[g] ?? "", z = I != null ? typeof I == "number" ? I : Number(I) : null;
    if ($(r)) {
      const R = m.get(r.toLowerCase()), H = h ? m.get(h.toLowerCase()) : null, D = R?.fieldName ?? r, k = c && h ? N(h).fieldName : H?.fieldName ?? h, O = (c && k ? i[k] : a[k] ?? (R && B({ fieldInfo: R, layer: d, graphic: l })) ?? R?.fieldName ?? s) ?? "", j = (c && s ? i[s] : a[D]) ?? "";
      return new P({
        fieldName: r,
        tooltip: this._getTooltip({
          label: O,
          value: j,
          chartType: o
        }),
        color: _,
        value: z
      });
    }
    return new P({
      fieldName: r,
      tooltip: this._getTooltip({
        label: A,
        value: S,
        chartType: o
      }),
      color: _,
      value: z
    });
  }
  _getRenderer() {
    const e = this.layer;
    return this.graphic?.isAggregate && e?.featureReduction && "renderer" in e.featureReduction ? e.featureReduction.renderer : e?.renderer;
  }
  async _getSeriesColors(e) {
    const { color: t } = await import("@amcharts/amcharts5/index.js"), i = /* @__PURE__ */ new Map();
    return e.forEach((a) => {
      a.color && i.set(a, t(a.color.toCss(!0)));
    }), i;
  }
  async _getRendererColors() {
    const { color: e } = await import("@amcharts/amcharts5/index.js"), t = /* @__PURE__ */ new Map(), i = this._getRenderer(), a = "default";
    if (!i)
      return t;
    const r = await Z(i);
    return r.delete(a), Array.from(r.values()).every((n) => n?.length === 1) && Array.from(r.keys()).forEach((n) => {
      const o = r.get(n)?.[0]?.toCss(!0);
      o && t.set(n, e(o));
    }), t;
  }
  async _createChart(e) {
    const { activeMediaInfo: t } = this;
    if (!e || !t)
      return;
    const { createRoot: i } = await import("../../chunks/chart-utils.js"), a = await i(e);
    this._chartRoot = a, this._renderChart({
      mediaInfo: t,
      root: a
    });
  }
  _handleMediaKeyup(e) {
    const { key: t } = e;
    t === "ArrowLeft" && (e.stopPropagation(), this.previous()), t === "ArrowRight" && (e.stopPropagation(), this.next());
  }
  _canAnimateChart() {
    return !this.chartAnimationDisabled && !this._prefersReducedMotion;
  }
  _getChartAnimationMS() {
    return this._canAnimateChart() ? ue : 0;
  }
  _getChartSeriesAnimationMS() {
    return this._canAnimateChart() ? me : 0;
  }
  async _customizeChartTooltip(e, t = "horizontal") {
    const { color: i } = await import("@amcharts/amcharts5/index.js");
    e.setAll({
      pointerOrientation: t
    }), e.get("background")?.setAll({
      stroke: i(de)
    }), e.label.setAll({
      direction: this._direction,
      oversizedBehavior: "wrap",
      maxWidth: he
    });
  }
  async _createPieChart(e, t) {
    const [{ Tooltip: i }, { PieChart: a, PieSeries: r }] = await Promise.all([
      import("@amcharts/amcharts5/index.js"),
      import("@amcharts/amcharts5/percent.js")
    ]), { mediaInfo: s, root: n } = e, { title: o } = s, c = 5, _ = s?.altText || s?.title || "", d = n.container.children.push(a.new(n, {
      role: "figure",
      ariaLabel: _,
      focusable: !0,
      paddingBottom: c,
      paddingTop: c,
      paddingLeft: c,
      paddingRight: c
    })), l = `{category}: {valuePercentTotal.formatNumber('0.00')}%
 ({value})`, m = i.new(n, {
      labelText: l
    }), u = d.series.push(r.new(n, {
      name: o,
      valueField: T,
      categoryField: w,
      tooltip: m
    }));
    u.ticks.template.set("forceHidden", !0), u.labels.template.set("forceHidden", !0), u.slices.template.states.create("active", {
      shiftRadius: c
    }), this._customizeChartTooltip(m), u.slices.template.setAll({
      ariaLabel: l,
      focusable: !0,
      templateField: "columnSettings"
    }), u.data.setAll(t), u.appear(this._getChartSeriesAnimationMS()), d.appear(this._getChartAnimationMS()), d.root.dom.classList.toggle(v.mediaChartRendered, !0);
  }
  _getMinSeriesValue(e) {
    let t = 0;
    return e.forEach((i) => t = Math.min(i.value, t)), t;
  }
  async _createColumnChart(e, t, i) {
    const [{ Tooltip: a, Scrollbar: r }, { CategoryAxis: s, AxisRendererX: n, AxisRendererY: o, ValueAxis: c, ColumnSeries: _ }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: d, root: l } = t, { value: m, title: u } = d, { _direction: h } = this;
    e.setAll({
      wheelX: "panX",
      wheelY: "zoomX"
    });
    const f = e.xAxes.push(s.new(l, {
      renderer: n.new(l, {
        inversed: h === "rtl"
      }),
      categoryField: w
    }));
    f.get("renderer").labels.template.setAll({
      forceHidden: !0
    });
    const p = e.yAxes.push(c.new(l, {
      renderer: o.new(l, { inside: !1 }),
      min: this._getMinSeriesValue(m.series)
    }));
    p.get("renderer").labels.template.setAll({
      direction: h
    });
    const I = "{categoryX}", x = a.new(l, {
      labelText: I
    }), g = e.series.push(_.new(l, {
      name: u,
      xAxis: f,
      yAxis: p,
      valueYField: T,
      categoryXField: w,
      tooltip: x
    }));
    this._customizeChartTooltip(x), g.columns.template.setAll({
      ariaLabel: I,
      focusable: !0,
      templateField: "columnSettings"
    }), m.series.length > V && e.set("scrollbarX", r.new(l, {
      orientation: "horizontal"
    })), f.data.setAll(i), g.data.setAll(i), g.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
  }
  async _createBarChart(e, t, i) {
    const [{ Tooltip: a, Scrollbar: r }, { CategoryAxis: s, AxisRendererX: n, AxisRendererY: o, ValueAxis: c, ColumnSeries: _ }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: d, root: l } = t, { value: m, title: u } = d, { _direction: h } = this;
    e.setAll({
      wheelX: "panY",
      wheelY: "zoomY"
    });
    const f = e.yAxes.push(s.new(l, {
      renderer: o.new(l, {
        inversed: !0
      }),
      categoryField: w
    }));
    f.get("renderer").labels.template.setAll({
      forceHidden: !0
    });
    const p = e.xAxes.push(c.new(l, {
      renderer: n.new(l, {
        inside: !1,
        inversed: h === "rtl"
      }),
      min: this._getMinSeriesValue(m.series)
    }));
    p.get("renderer").labels.template.setAll({
      direction: h
    });
    const I = "{categoryY}", x = a.new(l, {
      labelText: I
    }), g = e.series.push(_.new(l, {
      name: u,
      xAxis: p,
      yAxis: f,
      valueXField: T,
      categoryYField: w,
      tooltip: x
    }));
    this._customizeChartTooltip(x, "vertical"), g.columns.template.setAll({
      ariaLabel: I,
      focusable: !0,
      templateField: "columnSettings"
    }), m.series.length > V && e.set("scrollbarY", r.new(l, {
      orientation: "vertical"
    })), f.data.setAll(i), g.data.setAll(i), g.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
  }
  async _createLineChart(e, t, i) {
    const [{ Tooltip: a, Scrollbar: r }, { CategoryAxis: s, AxisRendererX: n, AxisRendererY: o, ValueAxis: c, LineSeries: _ }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { root: d, mediaInfo: l } = t, { value: m, title: u } = l, { _direction: h } = this;
    e.setAll({
      wheelX: "panX",
      wheelY: "zoomX"
    });
    const f = e.xAxes.push(s.new(d, {
      renderer: n.new(d, {
        inversed: h === "rtl"
      }),
      categoryField: w
    }));
    f.get("renderer").labels.template.setAll({
      forceHidden: !0
    });
    const p = e.yAxes.push(c.new(d, {
      renderer: o.new(d, { inside: !1 }),
      min: this._getMinSeriesValue(m.series)
    }));
    p.get("renderer").labels.template.setAll({
      direction: h
    });
    const I = "{categoryX}", x = i[0]?.lineSettings?.stroke, g = a.new(d, {
      getFillFromSprite: !x,
      labelText: I
    });
    x && g.get("background")?.setAll({
      fill: x
    });
    const A = e.series.push(_.new(d, {
      name: u,
      xAxis: f,
      yAxis: p,
      valueYField: T,
      categoryXField: w,
      tooltip: g
    }));
    A.strokes.template.setAll({
      templateField: "lineSettings"
    }), this._customizeChartTooltip(g, "vertical"), m.series.length > V && e.set("scrollbarX", r.new(d, {
      orientation: "horizontal"
    })), f.data.setAll(i), A.data.setAll(i), A.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
  }
  async _createXYChart(e, t) {
    const { XYChart: i, XYCursor: a } = await import("@amcharts/amcharts5/xy.js"), { root: r, mediaInfo: s } = e, { type: n } = s, o = s?.altText || s?.title || "", c = r.container.children.push(i.new(r, {
      role: "figure",
      ariaLabel: o,
      focusable: !0,
      panX: !0,
      panY: !0
    }));
    c.set("cursor", a.new(r, {})), n === "column-chart" && await this._createColumnChart(c, e, t), n === "bar-chart" && await this._createBarChart(c, e, t), n === "line-chart" && await this._createLineChart(c, e, t), c.root.dom.classList.toggle(v.mediaChartRendered, !0);
  }
  _clearMediaRefreshTimer() {
    const { _refreshTimer: e } = this;
    e && (clearTimeout(e), this._refreshTimer = void 0);
  }
  _updateMediaInfoTimestamp(e) {
    const t = Date.now();
    this._refreshIntervalInfo = {
      timestamp: t,
      sourceURL: e && this._getImageSource(e, t)
    };
  }
  _setupMediaRefreshTimer() {
    this._clearMediaRefreshTimer();
    const { activeMediaInfo: e } = this;
    e?.type === "image" && e.refreshInterval > 0 && this._setRefreshTimeout(e);
  }
  _setRefreshTimeout(e) {
    const { refreshInterval: t, value: i } = e, a = t * 6e4;
    this._updateMediaInfoTimestamp(i.sourceURL);
    const r = window.setInterval(() => {
      this._updateMediaInfoTimestamp(i.sourceURL);
    }, a);
    this._refreshTimer = r;
  }
  _getImageSource(e, t) {
    const i = e.includes("?") ? "&" : "?", [a, r = ""] = e.split("#");
    return `${a}${i}timestamp=${t}${r ? "#" : ""}${r}`;
  }
  _updateChartElement(e) {
    this._chartRoot?.dispose(), this._chartRoot = void 0, e && this._createChart(e);
  }
  render() {
    return y`<div class=${C(v.base)} @keyup=${this._handleMediaKeyup}><arcgis-feature-element-info .heading=${this.heading} .description=${this.description} .headingLevel=${this.headingLevel}></arcgis-feature-element-info>${this._renderMedia()}</div>`;
  }
  _renderMedia() {
    const { formattedMediaInfoCount: e, activeMediaInfoIndex: t } = this, i = this._renderMediaText();
    return e ? y`<div class=${C(v.mediaContainer)}>${this._renderMediaInfo()}<div class=${C(v.mediaNavigation)}>${i}${e > 1 ? y`<div class=${C(v.mediaPagination)}>${this._renderMediaPageButton("previous")}<span class=${C(v.mediaPaginationText)}>${te(this.messages?.pageText ?? "", {
      index: t + 1,
      total: e
    })}</span>${this._renderMediaPageButton("next")}</div>` : null}</div></div>` : null;
  }
  _renderMediaText() {
    const { activeMediaInfo: e } = this;
    if (!e)
      return null;
    const t = e?.title ? y`<div class=${C(v.mediaItemTitle)} .innerHTML=${X.sanitize(e.title) ?? ""}></div>` : null, i = e?.caption ? y`<div class=${C(v.mediaItemCaption)} .innerHTML=${X.sanitize(e.caption) ?? ""}></div>` : null;
    return t || i ? y`<div class=${C(v.mediaItemText)}>${t}${i}</div>` : null;
  }
  _renderImageMediaInfo(e) {
    if (!e.value)
      return null;
    const { _refreshIntervalInfo: t } = this, { value: i, refreshInterval: a, altText: r, title: s } = e, { sourceURL: n, linkURL: o } = i, _ = le(o ?? void 0) ? "_blank" : "_self", d = _ === "_blank" ? "noreferrer" : "", l = a ? t : null, m = l ? l.sourceURL : n, u = y`<img alt=${(r || s) ?? b} src=${m ?? void 0 ?? b}>`;
    return (o ? y`<a href=${o ?? b} rel=${d ?? b} target=${_} title=${s ?? b}>${u}</a>` : null) ?? u;
  }
  _renderChartMediaInfo(e) {
    const { activeMediaInfoIndex: t, formattedMediaInfoCount: i } = this;
    return K(`media-${e.type}-${t}-${i}`, y`<div class=${C(v.mediaChart)} ${q(this._updateChartElement)}></div>`);
  }
  _renderMediaInfoType() {
    const { activeMediaInfo: e } = this;
    return e ? e.type === "image" ? this._renderImageMediaInfo(e) : e.type.includes("chart") ? this._renderChartMediaInfo(e) : null : null;
  }
  _renderMediaInfo() {
    const { activeMediaInfo: e } = this;
    return e ? y`<div class=${C(v.mediaItemContainer)}><div class=${C(v.mediaItem)}>${this._renderMediaInfoType()}</div></div>` : null;
  }
  _renderMediaPageButton(e) {
    if (this.formattedMediaInfoCount < 2)
      return null;
    const t = e === "previous", i = t ? this.messages?.previous ?? "" : this.messages?.next ?? "", a = t ? "chevron-left" : "chevron-right", r = t ? this.previous : this.next;
    return y`<button .ariaLabel=${i} class=${C(v.mediaPaginationButton)} @click=${r} tabindex=0 title=${i ?? b} type=button><calcite-icon flip-rtl class=${C(v.mediaPaginationIcon)} .icon=${a} scale=s></calcite-icon></button>`;
  }
  async _renderChart(e) {
    const { root: t, mediaInfo: i } = e, { value: a, type: r } = i, [{ default: s }, { default: n }, { default: o }, { esriChartColorSet: c }, { ColorSet: _, Theme: d }] = await Promise.all([
      import("@amcharts/amcharts5/themes/Animated.js"),
      import("@amcharts/amcharts5/themes/Dark.js"),
      import("@amcharts/amcharts5/themes/Responsive.js"),
      import("../../chunks/chartCommon.js"),
      import("@amcharts/amcharts5/index.js")
    ]), l = d.new(t);
    l.rule("ColorSet").set("colors", c), l.rule("ColorSet").set("reuse", !0);
    const m = [o.new(t), l];
    re(this.el) === "dark" && m.push(n.new(t)), this._canAnimateChart() && m.push(s.new(t)), t.setThemes(m);
    const u = await this._getRendererColors(), h = await this._getSeriesColors(a.series), f = _.new(t, {}), p = h.get(a.series[0]), I = p ? {
      lineSettings: {
        stroke: p
      }
    } : void 0, x = a.series.map((g, A) => {
      const S = h.get(g) || u.get(g.fieldName) || f.getIndex(A);
      return {
        [w]: g.tooltip,
        [T]: g.value,
        columnSettings: {
          fill: S,
          stroke: S
        },
        ...I
      };
    }).filter((g) => r === "pie-chart" ? g.value != null && g.value > 0 : !0);
    r === "pie-chart" ? this._createPieChart(e, x) : this._createXYChart(e, x);
  }
}
W("arcgis-feature-media", fe);
export {
  fe as ArcgisFeatureMedia
};
