@arcgis/map-components 4.34.0-next.5 → 4.34.0-next.50

package/dist/components/arcgis-feature-media/customElement.js

@@ -0,0 +1,576 @@
+import { c as j } 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 { useMedia as J } from "@arcgis/lumina/controllers";
+import { getColorsFromRenderer as Q } from "@arcgis/core/renderers/support/utils.js";
+import { LitElement as Z, noShadowRoot as ee, safeClassMap as C, nothing as A } from "@arcgis/lumina";
+import { substitute as te } from "@arcgis/core/intl.js";
+import { c as S } from "../../chunks/utils.js";
+import { watch as ie } from "@arcgis/core/core/reactiveUtils.js";
+import ae from "@arcgis/core/popup/FieldInfo.js";
+import X from "@arcgis/core/popup/content/support/ChartMediaInfoValueSeries.js";
+import { unsafeGetModeName as re } from "@arcgis/components-utils";
+import { renderingSanitizer as E } from "@arcgis/core/applications/Components/sanitizerUtils.js";
+import { i as T, s as V, f as Y, a as U, g as ne, b as D, c as se, d as oe, e as le, h as ce } 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.0-next.50 */
+const de = G`@layer{arcgis-feature-media{display:block}.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)}.arcgis-feature-media__item-caption{padding-block-start:var(--calcite-spacing-xxs);font-size:var(--calcite-font-size)}.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)}.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(R) {
+  if (!T(R))
+    return null;
+  const [e, t] = R.split("/").slice(1);
+  return { layerId: e, fieldName: t };
+}
+const M = "arcgis-feature-media", I = {
+  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`
+}, z = 15, w = "category", b = "value", ue = "rgba(50, 50, 50, 1)", me = 250, he = 500, fe = 200;
+class pe extends Z {
+  constructor() {
+    super(...arguments), this._prefersReducedMotion = J("(prefers-reduced-motion)"), this.activeMediaInfoIndex = 0, this.chartAnimationDisabled = !1, this.isAggregate = !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, expressionValues: 0, heading: 1, isAggregate: 5, formattedMediaInfoCount: 32, headingLevel: 9 };
+  }
+  static {
+    this.styles = de;
+  }
+  static {
+    this.shadowRootOptions = ee;
+  }
+  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 ?? {}, s = this.expressionValues ?? {}, n = this.fieldInfoMap ?? /* @__PURE__ */ new Map();
+    return e?.map((o) => {
+      const r = o?.clone();
+      if (!r)
+        return null;
+      if (r.title = V({
+        values: i,
+        fieldInfoMap: n,
+        globalValues: a,
+        expressionValues: s,
+        layer: t,
+        text: r.title
+      }), r.caption = V({
+        values: i,
+        fieldInfoMap: n,
+        globalValues: a,
+        expressionValues: s,
+        layer: t,
+        text: r.caption
+      }), r.altText = V({
+        values: i,
+        fieldInfoMap: n,
+        globalValues: a,
+        expressionValues: s,
+        layer: t,
+        text: r.altText
+      }), r.type === "image") {
+        if (!r.value)
+          return null;
+        const c = r.value;
+        return this._setImageValue({
+          value: c,
+          formattedValues: a,
+          layer: t
+        }), c.sourceURL ? r : void 0;
+      }
+      if (r.type === "pie-chart" || r.type === "line-chart" || r.type === "column-chart" || r.type === "bar-chart") {
+        if (!r.value)
+          return null;
+        const c = r.value;
+        return this._setChartValue({
+          value: c,
+          chartType: r.type,
+          values: i,
+          formattedValues: a,
+          layer: t,
+          expressionValues: s
+        }), r;
+      }
+      return null;
+    }).filter((o) => o != null) ?? [];
+  }
+  _setImageValue(e) {
+    const t = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { value: i, formattedValues: a, layer: s } = e, { linkURL: n, sourceURL: o } = i;
+    if (o) {
+      const r = Y(o, s);
+      i.sourceURL = U({
+        formattedValues: a,
+        template: r,
+        fieldInfoMap: t
+      });
+    }
+    if (n) {
+      const r = Y(n, s);
+      i.linkURL = U({
+        formattedValues: a,
+        template: r,
+        fieldInfoMap: t
+      });
+    }
+  }
+  _setChartValue(e) {
+    const { value: t, values: i, formattedValues: a, chartType: s, layer: n, expressionValues: o } = e, { popupTemplate: r, relatedInfos: c } = this, { fields: f, normalizeField: u } = t, l = n;
+    if (t.fields = ne(f, l), u && (t.normalizeField = D(u, l)), !f.some((d) => !!(a[d] != null || T(d) && c?.size)))
+      return;
+    const m = r?.fieldInfos ?? [];
+    f.forEach((d, g) => {
+      const p = t.colors?.[g];
+      if (T(d)) {
+        t.series = [
+          ...t.series,
+          ...this._getRelatedChartInfos({ fieldInfos: m, fieldName: d, formattedValues: a, chartType: s, value: t, color: p })
+        ];
+        return;
+      }
+      const _ = this._getChartOption({
+        value: t,
+        values: i,
+        chartType: s,
+        formattedValues: a,
+        expressionValues: o,
+        fieldName: d,
+        fieldInfos: m,
+        color: p
+      });
+      t.series.push(_);
+    });
+  }
+  _getRelatedChartInfos(e) {
+    const { fieldInfos: t, fieldName: i, formattedValues: a, chartType: s, value: n, color: o } = e, r = [], c = N(i), f = c && this.relatedInfos?.get(c.layerId.toString());
+    if (!f)
+      return r;
+    const { relatedFeatures: u, relation: l } = f;
+    if (!l || !u)
+      return r;
+    const { cardinality: h } = l;
+    return u.forEach((d) => {
+      const g = d.attributes;
+      g && Object.keys(g).forEach((p) => {
+        p === c.fieldName && r.push(this._getChartOption({
+          value: n,
+          values: g,
+          formattedValues: a,
+          fieldName: i,
+          chartType: s,
+          relatedFieldName: p,
+          hasMultipleRelatedFeatures: u?.length > 1,
+          fieldInfos: t,
+          color: o
+        }));
+      });
+    }), h && (h === "one-to-many" || h === "many-to-many") ? r : [r[0]];
+  }
+  _getTooltip({ label: e, value: t, chartType: i }) {
+    return i === "pie-chart" ? `${e}` : `${e}: ${t}`;
+  }
+  _getChartOption(e) {
+    const { value: t, values: i, formattedValues: a, expressionValues: s, fieldName: n, relatedFieldName: o, fieldInfos: r, chartType: c, hasMultipleRelatedFeatures: f, color: u } = e, l = this.layer, h = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { normalizeField: m, tooltipField: d } = t, g = m ? T(m) ? i[N(m).fieldName] : i[m] : null, p = se(n) && s?.[n] !== void 0 ? s[n] : o && i[o] !== void 0 ? i[o] : i[n] !== void 0 ? i[n] : a[n], _ = p === void 0 ? null : p && g && typeof p == "number" && typeof g == "number" ? p / g : p, v = oe(r, n), x = D(n, l), F = (d && a[d] !== void 0 ? a[d] : le(v || new ae({ fieldName: x }), this.popupTemplate?.expressionInfos)) ?? "", $ = a[x] ?? "", P = typeof _ == "number" ? _ : Number(_);
+    if (T(n)) {
+      const k = h.get(n.toLowerCase()), B = d ? h.get(d.toLowerCase()) : null, H = k?.fieldName ?? n, L = f && d ? N(d).fieldName : B?.fieldName ?? d, O = (f && L ? i[L] : a[L] ?? k?.label ?? k?.fieldName ?? o) ?? "", W = (f && o ? i[o] : a[H]) ?? "";
+      return new X({
+        fieldName: n,
+        tooltip: this._getTooltip({
+          label: O,
+          value: W,
+          chartType: c
+        }),
+        color: u,
+        value: P
+      });
+    }
+    return new X({
+      fieldName: n,
+      tooltip: this._getTooltip({
+        label: F,
+        value: $,
+        chartType: c
+      }),
+      color: u,
+      value: P
+    });
+  }
+  _getRenderer() {
+    const e = this.layer;
+    return this.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 s = await Q(i);
+    return s.delete(a), Array.from(s.values()).every((o) => o?.length === 1) && Array.from(s.keys()).forEach((o) => {
+      const r = s.get(o)?.[0]?.toCss(!0);
+      r && t.set(o, e(r));
+    }), 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() ? me : 0;
+  }
+  _getChartSeriesAnimationMS() {
+    return this._canAnimateChart() ? he : 0;
+  }
+  _getDirection() {
+    return S(this.el) ? "rtl" : "ltr";
+  }
+  async _customizeChartTooltip(e, t = "horizontal") {
+    const { color: i } = await import("@amcharts/amcharts5/index.js");
+    e.setAll({
+      pointerOrientation: t
+    }), e.get("background")?.setAll({
+      stroke: i(ue)
+    }), e.label.setAll({
+      direction: this._getDirection(),
+      oversizedBehavior: "wrap",
+      maxWidth: fe
+    });
+  }
+  async _createPieChart(e, t) {
+    const [{ Tooltip: i }, { PieChart: a, PieSeries: s }] = await Promise.all([
+      import("@amcharts/amcharts5/index.js"),
+      import("@amcharts/amcharts5/percent.js")
+    ]), { mediaInfo: n, root: o } = e, { title: r } = n, c = 5, f = n?.altText || n?.title || "", u = o.container.children.push(a.new(o, {
+      role: "figure",
+      ariaLabel: f,
+      focusable: !0,
+      paddingBottom: c,
+      paddingTop: c,
+      paddingLeft: c,
+      paddingRight: c
+    })), l = `{category}: {valuePercentTotal.formatNumber('0.00')}%
+ ({value})`, h = i.new(o, {
+      labelText: l
+    }), m = u.series.push(s.new(o, {
+      name: r,
+      valueField: b,
+      categoryField: w,
+      tooltip: h
+    }));
+    m.ticks.template.set("forceHidden", !0), m.labels.template.set("forceHidden", !0), m.slices.template.states.create("active", {
+      shiftRadius: c
+    }), this._customizeChartTooltip(h), m.slices.template.setAll({
+      ariaLabel: l,
+      focusable: !0,
+      templateField: "columnSettings"
+    }), m.data.setAll(t), m.appear(this._getChartSeriesAnimationMS()), u.appear(this._getChartAnimationMS()), u.root.dom.classList.toggle(I.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: s }, { CategoryAxis: n, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, ColumnSeries: f }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: u, root: l } = t, { value: h, title: m } = u;
+    e.setAll({
+      wheelX: "panX",
+      wheelY: "zoomX"
+    });
+    const d = e.xAxes.push(n.new(l, {
+      renderer: o.new(l, {
+        inversed: S(this.el)
+      }),
+      categoryField: w
+    }));
+    d.get("renderer").labels.template.setAll({
+      forceHidden: !0
+    });
+    const g = e.yAxes.push(c.new(l, {
+      renderer: r.new(l, { inside: !1 }),
+      min: this._getMinSeriesValue(h.series)
+    }));
+    g.get("renderer").labels.template.setAll({
+      direction: this._getDirection()
+    });
+    const p = "{categoryX}", _ = a.new(l, {
+      labelText: p
+    }), v = e.series.push(f.new(l, {
+      name: m,
+      xAxis: d,
+      yAxis: g,
+      valueYField: b,
+      categoryXField: w,
+      tooltip: _
+    }));
+    this._customizeChartTooltip(_), v.columns.template.setAll({
+      ariaLabel: p,
+      focusable: !0,
+      templateField: "columnSettings"
+    }), h.series.length > z && e.set("scrollbarX", s.new(l, {
+      orientation: "horizontal"
+    })), d.data.setAll(i), v.data.setAll(i), v.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
+  }
+  async _createBarChart(e, t, i) {
+    const [{ Tooltip: a, Scrollbar: s }, { CategoryAxis: n, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, ColumnSeries: f }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: u, root: l } = t, { value: h, title: m } = u;
+    e.setAll({
+      wheelX: "panY",
+      wheelY: "zoomY"
+    });
+    const d = e.yAxes.push(n.new(l, {
+      renderer: r.new(l, {
+        inversed: !0
+      }),
+      categoryField: w
+    }));
+    d.get("renderer").labels.template.setAll({
+      forceHidden: !0
+    });
+    const g = e.xAxes.push(c.new(l, {
+      renderer: o.new(l, {
+        inside: !1,
+        inversed: S(this.el)
+      }),
+      min: this._getMinSeriesValue(h.series)
+    }));
+    g.get("renderer").labels.template.setAll({
+      direction: this._getDirection()
+    });
+    const p = "{categoryY}", _ = a.new(l, {
+      labelText: p
+    }), v = e.series.push(f.new(l, {
+      name: m,
+      xAxis: g,
+      yAxis: d,
+      valueXField: b,
+      categoryYField: w,
+      tooltip: _
+    }));
+    this._customizeChartTooltip(_, "vertical"), v.columns.template.setAll({
+      ariaLabel: p,
+      focusable: !0,
+      templateField: "columnSettings"
+    }), h.series.length > z && e.set("scrollbarY", s.new(l, {
+      orientation: "vertical"
+    })), d.data.setAll(i), v.data.setAll(i), v.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
+  }
+  async _createLineChart(e, t, i) {
+    const [{ Tooltip: a, Scrollbar: s }, { CategoryAxis: n, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, LineSeries: f }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { root: u, mediaInfo: l } = t, { value: h, title: m } = l;
+    e.setAll({
+      wheelX: "panX",
+      wheelY: "zoomX"
+    });
+    const d = e.xAxes.push(n.new(u, {
+      renderer: o.new(u, {
+        inversed: S(this.el)
+      }),
+      categoryField: w
+    }));
+    d.get("renderer").labels.template.setAll({
+      forceHidden: !0
+    });
+    const g = e.yAxes.push(c.new(u, {
+      renderer: r.new(u, { inside: !1 }),
+      min: this._getMinSeriesValue(h.series)
+    }));
+    g.get("renderer").labels.template.setAll({
+      direction: this._getDirection()
+    });
+    const p = "{categoryX}", _ = i[0]?.lineSettings?.stroke, v = a.new(u, {
+      getFillFromSprite: !_,
+      labelText: p
+    });
+    _ && v.get("background")?.setAll({
+      fill: _
+    });
+    const x = e.series.push(f.new(u, {
+      name: m,
+      xAxis: d,
+      yAxis: g,
+      valueYField: b,
+      categoryXField: w,
+      tooltip: v
+    }));
+    x.strokes.template.setAll({
+      templateField: "lineSettings"
+    }), this._customizeChartTooltip(v, "vertical"), h.series.length > z && e.set("scrollbarX", s.new(u, {
+      orientation: "horizontal"
+    })), d.data.setAll(i), x.data.setAll(i), x.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
+  }
+  async _createXYChart(e, t) {
+    const { XYChart: i, XYCursor: a } = await import("@amcharts/amcharts5/xy.js"), { root: s, mediaInfo: n } = e, { type: o } = n, r = n?.altText || n?.title || "", c = s.container.children.push(i.new(s, {
+      role: "figure",
+      ariaLabel: r,
+      focusable: !0,
+      panX: !0,
+      panY: !0
+    }));
+    c.set("cursor", a.new(s, {})), o === "column-chart" && await this._createColumnChart(c, e, t), o === "bar-chart" && await this._createBarChart(c, e, t), o === "line-chart" && await this._createLineChart(c, e, t), c.root.dom.classList.toggle(I.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 s = window.setInterval(() => {
+      this._updateMediaInfoTimestamp(i.sourceURL);
+    }, a);
+    this._refreshTimer = s;
+  }
+  _getImageSource(e, t) {
+    const i = e.includes("?") ? "&" : "?", [a, s = ""] = e.split("#");
+    return `${a}${i}timestamp=${t}${s ? "#" : ""}${s}`;
+  }
+  _updateChartElement(e) {
+    if (!e) {
+      this._chartRoot?.dispose(), this._chartRoot = void 0;
+      return;
+    }
+    this._createChart(e);
+  }
+  render() {
+    return y`<div class=${C(I.base)} @keyup=${this._handleMediaKeyup}><arcgis-feature-element-info .heading=${this.heading} .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(I.mediaContainer)}>${this._renderMediaInfo()}<div class=${C(I.mediaNavigation)}>${i}${e > 1 ? y`<div class=${C(I.mediaPagination)}>${this._renderMediaPageButton("previous")}<span class=${C(I.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(I.mediaItemTitle)} .innerHTML=${E.sanitize(e.title) ?? ""}></div>` : null, i = e?.caption ? y`<div class=${C(I.mediaItemCaption)} .innerHTML=${E.sanitize(e.caption) ?? ""}></div>` : null;
+    return t || i ? y`<div class=${C(I.mediaItemText)}>${t}${i}</div>` : null;
+  }
+  _renderImageMediaInfo(e) {
+    if (!e.value)
+      return null;
+    const { _refreshIntervalInfo: t } = this, { value: i, refreshInterval: a, altText: s, title: n } = e, { sourceURL: o, linkURL: r } = i, f = ce(r ?? void 0) ? "_blank" : "_self", u = f === "_blank" ? "noreferrer" : "", l = a ? t : null, h = l ? l.sourceURL : o, m = y`<img alt=${(s || n) ?? A} src=${h ?? void 0 ?? A}>`;
+    return (r ? y`<a href=${r ?? A} rel=${u ?? A} target=${f ?? A} title=${n ?? A}>${m}</a>` : null) ?? m;
+  }
+  _renderChartMediaInfo(e) {
+    const { activeMediaInfoIndex: t, formattedMediaInfoCount: i } = this;
+    return K(`media-${e.type}-${t}-${i}`, y`<div class=${C(I.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(I.mediaItemContainer)}><div class=${C(I.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", s = t ? this.previous : this.next;
+    return y`<button .ariaLabel=${i} class=${C(I.mediaPaginationButton)} @click=${s} tabindex=0 title=${i ?? A} type=button><calcite-icon flip-rtl class=${C(I.mediaPaginationIcon)} .icon=${a} scale=s></calcite-icon></button>`;
+  }
+  async _renderChart(e) {
+    const { root: t, mediaInfo: i } = e, { value: a, type: s } = i, [{ default: n }, { default: o }, { default: r }, { esriChartColorSet: c }, { ColorSet: f, Theme: u }] = 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 = u.new(t);
+    l.rule("ColorSet").set("colors", c), l.rule("ColorSet").set("reuse", !0);
+    const h = [r.new(t), l];
+    re(this.el) === "dark" && h.push(o.new(t)), this._canAnimateChart() && h.push(n.new(t)), t.setThemes(h);
+    const m = await this._getRendererColors(), d = await this._getSeriesColors(a.series), g = f.new(t, {}), p = d.get(a.series[0]), _ = p ? {
+      lineSettings: {
+        stroke: p
+      }
+    } : void 0, v = a.series.map((x, F) => {
+      const $ = d.get(x) || m.get(x.fieldName) || g.getIndex(F);
+      return {
+        [w]: x.tooltip,
+        [b]: x.value,
+        columnSettings: {
+          fill: $,
+          stroke: $
+        },
+        ..._
+      };
+    }).filter((x) => s === "pie-chart" ? x.value != null && x.value > 0 : !0);
+    s === "pie-chart" ? this._createPieChart(e, v) : this._createXYChart(e, v);
+  }
+}
+j("arcgis-feature-media", pe);
+export {
+  pe as ArcgisFeatureMedia
+};

package/dist/components/arcgis-feature-media/index.d.ts

@@ -0,0 +1,3 @@
+import "../arcgis-feature-element-info/index.js";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-feature-media/index.js

@@ -0,0 +1,3 @@
+import "../arcgis-feature-element-info/index.js";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-feature-table/customElement.d.ts

@@ -434,6 +434,11 @@ export declare class ArcgisFeatureTable extends LitElement {
     paginationEnabled: boolean;
     /** @default "manual" */
     position: __esri.UIPosition;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /**
      * Indicates whether to display any related records associated with rows within the table.
@@ -524,7 +529,8 @@ export declare class ArcgisFeatureTable extends LitElement {
      */
     readonly supportsDeleteAttachments: boolean;
     /**
-     * Indicates whether the table and associated layer support resizing attachments with the current configuration.
+     * Defines whether or not the feature supports resizing
+     * attachments.
      *
      * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html#supportsResizeAttachments)
      *

package/dist/components/arcgis-feature-table/customElement.js

@@ -6,10 +6,10 @@ import a from "@arcgis/core/widgets/FeatureTable.js";
 import { LitElement as d, createEvent as l, noShadowRoot as r } from "@arcgis/lumina";
 import { m as g } from "../../chunks/useWidget.js";
 import { e as m, g as c } from "../../chunks/component-utils.js";
-import { css as u } from "@lit/reactive-element/css-tag.js";
+import { css as u } from "lit";
 /*! 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.5 */
+v4.34.0-next.50 */
 const w = u`@layer{arcgis-feature-table{display:block}.arcgis-feature-table{width:100%;height:100%}}`, p = g(a);
 class b extends d {
   constructor() {

package/dist/components/arcgis-feature-templates/customElement.d.ts

@@ -97,6 +97,11 @@ export declare class ArcgisFeatureTemplates extends LitElement {
     layers: (__esri.FeatureLayer | __esri.SceneLayer | __esri.SubtypeGroupLayer | __esri.GeoJSONLayer | __esri.OrientedImageryLayer | __esri.SubtypeSublayer)[];
     /** @default "bottom-left" */
     position: __esri.UIPosition;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /**
      * Specifies the selection behavior of list items.

package/dist/components/arcgis-feature-templates/customElement.js

@@ -4,10 +4,10 @@ import { reEmitEvent as i } from "@arcgis/lumina/controllers/accessor";
 import s from "@arcgis/core/widgets/FeatureTemplates.js";
 import { LitElement as o, createEvent as r, noShadowRoot as l } from "@arcgis/lumina";
 import { m as a } from "../../chunks/useWidget.js";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { css as h } from "lit";
 /*! 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.5 */
+v4.34.0-next.50 */
 const n = h`@layer{arcgis-feature-templates{display:block}}`, c = a(s);
 class d extends o {
   constructor() {

package/dist/components/arcgis-features/customElement.d.ts

@@ -220,6 +220,11 @@ export declare class ArcgisFeatures extends LitElement {
      * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Features.html#promises)
      */
     promises: Promise<any>[];
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /**
      * The selected feature accessed by the Features widget.

package/dist/components/arcgis-features/customElement.js

@@ -4,11 +4,11 @@ import { reEmitEvent as a } from "@arcgis/lumina/controllers/accessor";
 import o from "@arcgis/core/widgets/Features.js";
 import { LitElement as r, createEvent as n, noShadowRoot as h } from "@arcgis/lumina";
 import { m as d } from "../../chunks/useWidget.js";
-import { css as l } from "@lit/reactive-element/css-tag.js";
+import { css as l } from "lit";
 import { c } from "../../chunks/createCloseEvent.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.5 */
+v4.34.0-next.50 */
 const g = l`@layer{arcgis-features{display:flex;flex-direction:column;overflow:hidden;.esri-features{flex:1 1 auto;overflow:hidden}}}`, u = d(o);
 class w extends r {
   constructor() {