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

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

@@ -1,56 +1,56 @@
-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 W } from "../../chunks/runtime.js";
+import { css as j, html as y } from "lit";
+import { ref as G } from "lit/directives/ref.js";
+import { keyed as q } from "lit/directives/keyed.js";
+import { useMedia as K } from "@arcgis/lumina/controllers";
+import { getColorsFromRenderer as J } from "@arcgis/core/renderers/support/utils.js";
+import { LitElement as Q, noShadowRoot as Z, safeClassMap as C, nothing as A } from "@arcgis/lumina";
+import { substitute as ee } 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";
+import { watch as te } from "@arcgis/core/core/reactiveUtils.js";
+import ie from "@arcgis/core/popup/FieldInfo.js";
+import P from "@arcgis/core/popup/content/support/ChartMediaInfoValueSeries.js";
+import { unsafeGetModeName as ae } from "@arcgis/components-utils";
+import { renderingSanitizer as X } from "@arcgis/core/applications/Components/sanitizerUtils.js";
+import { i as $, s as N, f as E, a as Y, g as re, b as U, c as ne, d as se, e as oe, h 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.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))
+v4.34.0-next.52 */
+const ce = j`@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 V(R) {
+  if (!$(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 {
+const I = "arcgis-feature-media", v = {
+  base: I,
+  mediaContainer: `${I}__container`,
+  mediaItemContainer: `${I}__item-container`,
+  mediaItem: `${I}__item`,
+  mediaItemText: `${I}__item-text`,
+  mediaItemTitle: `${I}__item-title`,
+  mediaItemCaption: `${I}__item-caption`,
+  mediaNavigation: `${I}__item-navigation`,
+  mediaPagination: `${I}__pagination`,
+  mediaPaginationText: `${I}__pagination-text`,
+  mediaChart: `${I}__chart`,
+  mediaPaginationButton: `${I}__pagination-button`,
+  mediaPaginationIcon: `${I}__pagination-icon`,
+  mediaChartRendered: `${I}__chart--rendered`
+}, z = 15, w = "category", T = "value", de = "rgba(50, 50, 50, 1)", me = 250, ue = 500, he = 200;
+class fe extends Q {
   constructor() {
-    super(...arguments), this._prefersReducedMotion = J("(prefers-reduced-motion)"), this.activeMediaInfoIndex = 0, this.chartAnimationDisabled = !1, this.isAggregate = !1, this.headingLevel = 2;
+    super(...arguments), this._prefersReducedMotion = K("(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 };
+    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, isAggregate: 5, formattedMediaInfoCount: 32, headingLevel: 9 };
   }
   static {
-    this.styles = de;
+    this.styles = ce;
   }
   static {
-    this.shadowRootOptions = ee;
+    this.shadowRootOptions = Z;
   }
   get activeMediaInfo() {
     return this.formattedMediaInfos[this.activeMediaInfoIndex] || null;
@@ -72,7 +72,7 @@ class pe extends Z {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      ie(() => [this.activeMediaInfo, this.activeMediaInfoIndex], () => this._setupMediaRefreshTimer(), { initial: !0 }),
+      te(() => [this.activeMediaInfo, this.activeMediaInfoIndex], () => this._setupMediaRefreshTimer(), { initial: !0 }),
       { remove: () => this._clearMediaRefreshTimer() }
     ]);
   }
@@ -85,156 +85,151 @@ class pe extends Z {
     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)
+    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 (r.title = V({
+      if (n.title = N({
         values: i,
-        fieldInfoMap: n,
+        fieldInfoMap: r,
         globalValues: a,
-        expressionValues: s,
         layer: t,
-        text: r.title
-      }), r.caption = V({
+        text: n.title
+      }), n.caption = N({
         values: i,
-        fieldInfoMap: n,
+        fieldInfoMap: r,
         globalValues: a,
-        expressionValues: s,
         layer: t,
-        text: r.caption
-      }), r.altText = V({
+        text: n.caption
+      }), n.altText = N({
         values: i,
-        fieldInfoMap: n,
+        fieldInfoMap: r,
         globalValues: a,
-        expressionValues: s,
         layer: t,
-        text: r.altText
-      }), r.type === "image") {
-        if (!r.value)
+        text: n.altText
+      }), n.type === "image") {
+        if (!n.value)
           return null;
-        const c = r.value;
+        const o = n.value;
         return this._setImageValue({
-          value: c,
+          value: o,
           formattedValues: a,
           layer: t
-        }), c.sourceURL ? r : void 0;
+        }), o.sourceURL ? n : void 0;
       }
-      if (r.type === "pie-chart" || r.type === "line-chart" || r.type === "column-chart" || r.type === "bar-chart") {
-        if (!r.value)
+      if (n.type === "pie-chart" || n.type === "line-chart" || n.type === "column-chart" || n.type === "bar-chart") {
+        if (!n.value)
           return null;
-        const c = r.value;
+        const o = n.value;
         return this._setChartValue({
-          value: c,
-          chartType: r.type,
+          value: o,
+          chartType: n.type,
           values: i,
           formattedValues: a,
-          layer: t,
-          expressionValues: s
-        }), r;
+          layer: t
+        }), n;
       }
       return null;
-    }).filter((o) => o != null) ?? [];
+    }).filter((s) => s != 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({
+    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: r,
+        template: o,
         fieldInfoMap: t
       });
     }
-    if (n) {
-      const r = Y(n, s);
-      i.linkURL = U({
+    if (s) {
+      const o = E(s, r);
+      i.linkURL = Y({
         formattedValues: a,
-        template: r,
+        template: o,
         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)))
+    const { value: t, values: i, formattedValues: a, chartType: r, layer: s } = e, { popupTemplate: n, relatedInfos: o } = this, { fields: d, normalizeField: p } = t, u = s;
+    if (t.fields = re(d, u), p && (t.normalizeField = U(p, u)), !d.some((c) => !!(a[c] != null || $(c) && o?.size)))
       return;
-    const m = r?.fieldInfos ?? [];
-    f.forEach((d, g) => {
-      const p = t.colors?.[g];
-      if (T(d)) {
+    const m = n?.fieldInfos ?? [];
+    d.forEach((c, h) => {
+      const f = t.colors?.[h];
+      if ($(c)) {
         t.series = [
           ...t.series,
-          ...this._getRelatedChartInfos({ fieldInfos: m, fieldName: d, formattedValues: a, chartType: s, value: t, color: p })
+          ...this._getRelatedChartInfos({ fieldInfos: m, fieldName: c, formattedValues: a, chartType: r, value: t, color: f })
         ];
         return;
       }
-      const _ = this._getChartOption({
+      const g = this._getChartOption({
         value: t,
         values: i,
-        chartType: s,
+        chartType: r,
         formattedValues: a,
-        expressionValues: o,
-        fieldName: d,
+        fieldName: c,
         fieldInfos: m,
-        color: p
+        color: f
       });
-      t.series.push(_);
+      t.series.push(g);
     });
   }
   _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;
+    const { fieldInfos: t, fieldName: i, formattedValues: a, chartType: r, value: s, color: n } = e, o = [], d = V(i), p = d && this.relatedInfos?.get(d.layerId);
+    if (!p)
+      return o;
+    const { relatedFeatures: u, relation: l } = p;
     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,
+      return o;
+    const { cardinality: m } = l;
+    return u.forEach((h) => {
+      const f = h.attributes;
+      f && Object.keys(f).forEach((g) => {
+        g === d.fieldName && o.push(this._getChartOption({
+          value: s,
+          values: f,
           formattedValues: a,
           fieldName: i,
-          chartType: s,
-          relatedFieldName: p,
+          chartType: r,
+          relatedFieldName: g,
           hasMultipleRelatedFeatures: u?.length > 1,
           fieldInfos: t,
-          color: o
+          color: n
         }));
       });
-    }), h && (h === "one-to-many" || h === "many-to-many") ? r : [r[0]];
+    }), 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, 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,
+    const { value: t, values: i, formattedValues: a, fieldName: r, relatedFieldName: s, fieldInfos: n, chartType: o, hasMultipleRelatedFeatures: d, color: p } = e, u = this.layer, l = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { normalizeField: m, tooltipField: c } = t, h = m ? $(m) ? i[V(m).fieldName] : i[m] : null, f = ne(r) && a?.[r] !== void 0 ? a[r] : s && i[s] !== void 0 ? i[s] : i[r] !== void 0 ? i[r] : a[r], g = f === void 0 ? null : f && h && typeof f == "number" && typeof h == "number" ? f / h : f, x = se(n, r), _ = U(r, u), M = (c && a[c] !== void 0 ? a[c] : oe(x || new ie({ fieldName: _ }), this.popupTemplate?.expressionInfos)) ?? "", F = a[_] ?? "", b = typeof g == "number" ? g : Number(g);
+    if ($(r)) {
+      const k = l.get(r.toLowerCase()), D = c ? l.get(c.toLowerCase()) : null, B = k?.fieldName ?? r, L = d && c ? V(c).fieldName : D?.fieldName ?? c, H = (d && L ? i[L] : a[L] ?? k?.label ?? k?.fieldName ?? s) ?? "", O = (d && s ? i[s] : a[B]) ?? "";
+      return new P({
+        fieldName: r,
         tooltip: this._getTooltip({
-          label: O,
-          value: W,
-          chartType: c
+          label: H,
+          value: O,
+          chartType: o
         }),
-        color: u,
-        value: P
+        color: p,
+        value: b
       });
     }
-    return new X({
-      fieldName: n,
+    return new P({
+      fieldName: r,
       tooltip: this._getTooltip({
-        label: F,
-        value: $,
-        chartType: c
+        label: M,
+        value: F,
+        chartType: o
       }),
-      color: u,
-      value: P
+      color: p,
+      value: b
     });
   }
   _getRenderer() {
@@ -251,10 +246,10 @@ class pe extends Z {
     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));
+    const r = await J(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) {
@@ -278,7 +273,7 @@ class pe extends Z {
     return this._canAnimateChart() ? me : 0;
   }
   _getChartSeriesAnimationMS() {
-    return this._canAnimateChart() ? he : 0;
+    return this._canAnimateChart() ? ue : 0;
   }
   _getDirection() {
     return S(this.el) ? "rtl" : "ltr";
@@ -288,181 +283,181 @@ class pe extends Z {
     e.setAll({
       pointerOrientation: t
     }), e.get("background")?.setAll({
-      stroke: i(ue)
+      stroke: i(de)
     }), e.label.setAll({
       direction: this._getDirection(),
       oversizedBehavior: "wrap",
-      maxWidth: fe
+      maxWidth: he
     });
   }
   async _createPieChart(e, t) {
-    const [{ Tooltip: i }, { PieChart: a, PieSeries: s }] = await Promise.all([
+    const [{ Tooltip: i }, { PieChart: a, PieSeries: r }] = 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, {
+    ]), { mediaInfo: s, root: n } = e, { title: o } = s, d = 5, p = s?.altText || s?.title || "", u = n.container.children.push(a.new(n, {
       role: "figure",
-      ariaLabel: f,
+      ariaLabel: p,
       focusable: !0,
-      paddingBottom: c,
-      paddingTop: c,
-      paddingLeft: c,
-      paddingRight: c
+      paddingBottom: d,
+      paddingTop: d,
+      paddingLeft: d,
+      paddingRight: d
     })), l = `{category}: {valuePercentTotal.formatNumber('0.00')}%
- ({value})`, h = i.new(o, {
+ ({value})`, m = i.new(n, {
       labelText: l
-    }), m = u.series.push(s.new(o, {
-      name: r,
-      valueField: b,
+    }), c = u.series.push(r.new(n, {
+      name: o,
+      valueField: T,
       categoryField: w,
-      tooltip: h
+      tooltip: m
     }));
-    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({
+    c.ticks.template.set("forceHidden", !0), c.labels.template.set("forceHidden", !0), c.slices.template.states.create("active", {
+      shiftRadius: d
+    }), this._customizeChartTooltip(m), c.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);
+    }), c.data.setAll(t), c.appear(this._getChartSeriesAnimationMS()), u.appear(this._getChartAnimationMS()), u.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: 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;
+    const [{ Tooltip: a, Scrollbar: r }, { CategoryAxis: s, AxisRendererX: n, AxisRendererY: o, ValueAxis: d, ColumnSeries: p }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: u, root: l } = t, { value: m, title: c } = u;
     e.setAll({
       wheelX: "panX",
       wheelY: "zoomX"
     });
-    const d = e.xAxes.push(n.new(l, {
-      renderer: o.new(l, {
+    const h = e.xAxes.push(s.new(l, {
+      renderer: n.new(l, {
         inversed: S(this.el)
       }),
       categoryField: w
     }));
-    d.get("renderer").labels.template.setAll({
+    h.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)
+    const f = e.yAxes.push(d.new(l, {
+      renderer: o.new(l, { inside: !1 }),
+      min: this._getMinSeriesValue(m.series)
     }));
-    g.get("renderer").labels.template.setAll({
+    f.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,
+    const g = "{categoryX}", x = a.new(l, {
+      labelText: g
+    }), _ = e.series.push(p.new(l, {
+      name: c,
+      xAxis: h,
+      yAxis: f,
+      valueYField: T,
       categoryXField: w,
-      tooltip: _
+      tooltip: x
     }));
-    this._customizeChartTooltip(_), v.columns.template.setAll({
-      ariaLabel: p,
+    this._customizeChartTooltip(x), _.columns.template.setAll({
+      ariaLabel: g,
       focusable: !0,
       templateField: "columnSettings"
-    }), h.series.length > z && e.set("scrollbarX", s.new(l, {
+    }), m.series.length > z && e.set("scrollbarX", r.new(l, {
       orientation: "horizontal"
-    })), d.data.setAll(i), v.data.setAll(i), v.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
+    })), h.data.setAll(i), _.data.setAll(i), _.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;
+    const [{ Tooltip: a, Scrollbar: r }, { CategoryAxis: s, AxisRendererX: n, AxisRendererY: o, ValueAxis: d, ColumnSeries: p }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: u, root: l } = t, { value: m, title: c } = u;
     e.setAll({
       wheelX: "panY",
       wheelY: "zoomY"
     });
-    const d = e.yAxes.push(n.new(l, {
-      renderer: r.new(l, {
+    const h = e.yAxes.push(s.new(l, {
+      renderer: o.new(l, {
         inversed: !0
       }),
       categoryField: w
     }));
-    d.get("renderer").labels.template.setAll({
+    h.get("renderer").labels.template.setAll({
       forceHidden: !0
     });
-    const g = e.xAxes.push(c.new(l, {
-      renderer: o.new(l, {
+    const f = e.xAxes.push(d.new(l, {
+      renderer: n.new(l, {
         inside: !1,
         inversed: S(this.el)
       }),
-      min: this._getMinSeriesValue(h.series)
+      min: this._getMinSeriesValue(m.series)
     }));
-    g.get("renderer").labels.template.setAll({
+    f.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,
+    const g = "{categoryY}", x = a.new(l, {
+      labelText: g
+    }), _ = e.series.push(p.new(l, {
+      name: c,
+      xAxis: f,
+      yAxis: h,
+      valueXField: T,
       categoryYField: w,
-      tooltip: _
+      tooltip: x
     }));
-    this._customizeChartTooltip(_, "vertical"), v.columns.template.setAll({
-      ariaLabel: p,
+    this._customizeChartTooltip(x, "vertical"), _.columns.template.setAll({
+      ariaLabel: g,
       focusable: !0,
       templateField: "columnSettings"
-    }), h.series.length > z && e.set("scrollbarY", s.new(l, {
+    }), m.series.length > z && e.set("scrollbarY", r.new(l, {
       orientation: "vertical"
-    })), d.data.setAll(i), v.data.setAll(i), v.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
+    })), h.data.setAll(i), _.data.setAll(i), _.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;
+    const [{ Tooltip: a, Scrollbar: r }, { CategoryAxis: s, AxisRendererX: n, AxisRendererY: o, ValueAxis: d, LineSeries: p }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { root: u, mediaInfo: l } = t, { value: m, title: c } = l;
     e.setAll({
       wheelX: "panX",
       wheelY: "zoomX"
     });
-    const d = e.xAxes.push(n.new(u, {
-      renderer: o.new(u, {
+    const h = e.xAxes.push(s.new(u, {
+      renderer: n.new(u, {
         inversed: S(this.el)
       }),
       categoryField: w
     }));
-    d.get("renderer").labels.template.setAll({
+    h.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)
+    const f = e.yAxes.push(d.new(u, {
+      renderer: o.new(u, { inside: !1 }),
+      min: this._getMinSeriesValue(m.series)
     }));
-    g.get("renderer").labels.template.setAll({
+    f.get("renderer").labels.template.setAll({
       direction: this._getDirection()
     });
-    const p = "{categoryX}", _ = i[0]?.lineSettings?.stroke, v = a.new(u, {
-      getFillFromSprite: !_,
-      labelText: p
+    const g = "{categoryX}", x = i[0]?.lineSettings?.stroke, _ = a.new(u, {
+      getFillFromSprite: !x,
+      labelText: g
     });
-    _ && v.get("background")?.setAll({
-      fill: _
+    x && _.get("background")?.setAll({
+      fill: x
     });
-    const x = e.series.push(f.new(u, {
-      name: m,
-      xAxis: d,
-      yAxis: g,
-      valueYField: b,
+    const M = e.series.push(p.new(u, {
+      name: c,
+      xAxis: h,
+      yAxis: f,
+      valueYField: T,
       categoryXField: w,
-      tooltip: v
+      tooltip: _
     }));
-    x.strokes.template.setAll({
+    M.strokes.template.setAll({
       templateField: "lineSettings"
-    }), this._customizeChartTooltip(v, "vertical"), h.series.length > z && e.set("scrollbarX", s.new(u, {
+    }), this._customizeChartTooltip(_, "vertical"), m.series.length > z && e.set("scrollbarX", r.new(u, {
       orientation: "horizontal"
-    })), d.data.setAll(i), x.data.setAll(i), x.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
+    })), h.data.setAll(i), M.data.setAll(i), M.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, {
+    const { XYChart: i, XYCursor: a } = await import("@amcharts/amcharts5/xy.js"), { root: r, mediaInfo: s } = e, { type: n } = s, o = s?.altText || s?.title || "", d = r.container.children.push(i.new(r, {
       role: "figure",
-      ariaLabel: r,
+      ariaLabel: o,
       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);
+    d.set("cursor", a.new(r, {})), n === "column-chart" && await this._createColumnChart(d, e, t), n === "bar-chart" && await this._createBarChart(d, e, t), n === "line-chart" && await this._createLineChart(d, e, t), d.root.dom.classList.toggle(v.mediaChartRendered, !0);
   }
   _clearMediaRefreshTimer() {
     const { _refreshTimer: e } = this;
@@ -483,14 +478,14 @@ class pe extends Z {
   _setRefreshTimeout(e) {
     const { refreshInterval: t, value: i } = e, a = t * 6e4;
     this._updateMediaInfoTimestamp(i.sourceURL);
-    const s = window.setInterval(() => {
+    const r = window.setInterval(() => {
       this._updateMediaInfoTimestamp(i.sourceURL);
     }, a);
-    this._refreshTimer = s;
+    this._refreshTimer = r;
   }
   _getImageSource(e, t) {
-    const i = e.includes("?") ? "&" : "?", [a, s = ""] = e.split("#");
-    return `${a}${i}timestamp=${t}${s ? "#" : ""}${s}`;
+    const i = e.includes("?") ? "&" : "?", [a, r = ""] = e.split("#");
+    return `${a}${i}timestamp=${t}${r ? "#" : ""}${r}`;
   }
   _updateChartElement(e) {
     if (!e) {
@@ -500,11 +495,11 @@ class pe extends Z {
     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>`;
+    return y`<div class=${C(v.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 ?? "", {
+    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)}>${ee(this.messages?.pageText ?? "", {
       index: t + 1,
       total: e
     })}</span>${this._renderMediaPageButton("next")}</div>` : null}</div></div>` : null;
@@ -513,18 +508,18 @@ class pe extends Z {
     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;
+    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: 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;
+    const { _refreshIntervalInfo: t } = this, { value: i, refreshInterval: a, altText: r, title: s } = e, { sourceURL: n, linkURL: o } = i, p = le(o ?? void 0) ? "_blank" : "_self", u = p === "_blank" ? "noreferrer" : "", l = a ? t : null, m = l ? l.sourceURL : n, c = y`<img alt=${(r || s) ?? A} src=${m ?? void 0 ?? A}>`;
+    return (o ? y`<a href=${o ?? A} rel=${u ?? A} target=${p ?? A} title=${s ?? A}>${c}</a>` : null) ?? c;
   }
   _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>`);
+    return q(`media-${e.type}-${t}-${i}`, y`<div class=${C(v.mediaChart)} ${G(this._updateChartElement)}></div>`);
   }
   _renderMediaInfoType() {
     const { activeMediaInfo: e } = this;
@@ -532,45 +527,45 @@ class pe extends Z {
   }
   _renderMediaInfo() {
     const { activeMediaInfo: e } = this;
-    return e ? y`<div class=${C(I.mediaItemContainer)}><div class=${C(I.mediaItem)}>${this._renderMediaInfoType()}</div></div>` : null;
+    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", 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>`;
+    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 ?? A} 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: s } = i, [{ default: n }, { default: o }, { default: r }, { esriChartColorSet: c }, { ColorSet: f, Theme: u }] = await Promise.all([
+    const { root: t, mediaInfo: i } = e, { value: a, type: r } = i, [{ default: s }, { default: n }, { default: o }, { esriChartColorSet: d }, { ColorSet: p, 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 ? {
+    l.rule("ColorSet").set("colors", d), l.rule("ColorSet").set("reuse", !0);
+    const m = [o.new(t), l];
+    ae(this.el) === "dark" && m.push(n.new(t)), this._canAnimateChart() && m.push(s.new(t)), t.setThemes(m);
+    const c = await this._getRendererColors(), h = await this._getSeriesColors(a.series), f = p.new(t, {}), g = h.get(a.series[0]), x = g ? {
       lineSettings: {
-        stroke: p
+        stroke: g
       }
-    } : void 0, v = a.series.map((x, F) => {
-      const $ = d.get(x) || m.get(x.fieldName) || g.getIndex(F);
+    } : void 0, _ = a.series.map((M, F) => {
+      const b = h.get(M) || c.get(M.fieldName) || f.getIndex(F);
       return {
-        [w]: x.tooltip,
-        [b]: x.value,
+        [w]: M.tooltip,
+        [T]: M.value,
         columnSettings: {
-          fill: $,
-          stroke: $
+          fill: b,
+          stroke: b
         },
-        ..._
+        ...x
       };
-    }).filter((x) => s === "pie-chart" ? x.value != null && x.value > 0 : !0);
-    s === "pie-chart" ? this._createPieChart(e, v) : this._createXYChart(e, v);
+    }).filter((M) => r === "pie-chart" ? M.value != null && M.value > 0 : !0);
+    r === "pie-chart" ? this._createPieChart(e, _) : this._createXYChart(e, _);
   }
 }
-j("arcgis-feature-media", pe);
+W("arcgis-feature-media", fe);
 export {
-  pe as ArcgisFeatureMedia
+  fe as ArcgisFeatureMedia
 };