@arcgis/map-components 5.2.0-next.24 → 5.2.0-next.25

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

@@ -2,8 +2,8 @@
 import { c as B } from "../../chunks/runtime.js";
 import { css as W, html as _ } from "lit";
 import { ref as j } from "lit/directives/ref.js";
-import { keyed as G } from "lit/directives/keyed.js";
-import { useDirection as q, useMedia as K } from "@arcgis/lumina/controllers";
+import { keyed as K } from "lit/directives/keyed.js";
+import { useDirection as G, useMedia as q } from "@arcgis/lumina/controllers";
 import { getColorsFromRenderer as J } from "@arcgis/core/renderers/support/utils.js";
 import { LitElement as Q, nothing as y } from "@arcgis/lumina";
 import { substitute as Z } from "@arcgis/core/intl.js";
@@ -13,23 +13,24 @@ import V from "@arcgis/core/popup/content/support/ChartMediaInfoValueSeries.js";
 import { unsafeGetCalciteModeName as ie } from "@arcgis/toolkit/dom";
 import { renderingSanitizer as N } from "@arcgis/core/applications/Components/sanitizerUtils.js";
 import { d as A, s as R, l as z, m as X, n as ae, o as E, i as re, p as ne, h as Y, f as se } from "../../chunks/feature-utils.js";
-const oe = W`.container{display:flex;flex-flow:row wrap;align-items:center;margin-top:var(--calcite-spacing-xs);width:100%;min-height:150px}.container .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)}.container .pagination-button:hover,.container .pagination-button:focus{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1);fill:var(--calcite-color-text-1)}.item-title{margin:0;font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-relative-snug)}.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)}.item{display:flex;align-items:flex-start;justify-content:center;margin-block:var(--calcite-spacing-xs);width:100%;height:auto}.item-navigation{display:flex;flex:0 1 100%;align-items:flex-start;justify-content:space-between;margin-block-end:var(--calcite-spacing-xs)}.item-text{margin-inline-end:var(--calcite-spacing-xs)}.pagination{display:flex;flex:0 0 auto;align-items:center;overflow:hidden}.pagination:only-child{margin-inline-start:auto}.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)}.item-container{flex:0 1 auto;width:100%}.item-container img{max-width:100%}.item-container img[src$=".SVG"],.item-container img[src$=".svg"]{width:100%}.chart{width:100%;height:155px}`;
+import { a as oe, b as le } from "../../chunks/keyboard-utils.js";
+const ce = W`.container{display:flex;flex-flow:row wrap;align-items:center;margin-top:var(--calcite-spacing-xs);width:100%;min-height:150px}.container .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)}.container .pagination-button:hover,.container .pagination-button:focus{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1);fill:var(--calcite-color-text-1)}.item-title{margin:0;font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-relative-snug)}.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)}.item{display:flex;align-items:flex-start;justify-content:center;margin-block:var(--calcite-spacing-xs);width:100%;height:auto}.item-navigation{display:flex;flex:0 1 100%;align-items:flex-start;justify-content:space-between;margin-block-end:var(--calcite-spacing-xs)}.item-text{margin-inline-end:var(--calcite-spacing-xs)}.pagination{display:flex;flex:0 0 auto;align-items:center;overflow:hidden}.pagination:only-child{margin-inline-start:auto}.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)}.item-container{flex:0 1 auto;width:100%}.item-container img{max-width:100%}.item-container img[src$=".SVG"],.item-container img[src$=".svg"]{width:100%}.chart{width:100%;height:155px}`;
 function $(S) {
   if (!A(S))
     return null;
   const [e, t] = S.split("/").slice(1);
   return { layerId: e, fieldName: t };
 }
-const k = 15, C = "category", w = "value", le = "rgba(50, 50, 50, 1)", ce = 250, de = 500, ue = 200;
-class he extends Q {
+const k = 15, C = "category", w = "value", de = "rgba(50, 50, 50, 1)", ue = 250, he = 500, me = 200;
+class fe extends Q {
   constructor() {
-    super(...arguments), this._direction = q(), this._prefersReducedMotion = K("(prefers-reduced-motion)"), this.activeMediaInfoIndex = 0, this.chartAnimationDisabled = !1, this.headingLevel = 2;
+    super(...arguments), this._direction = G(), this._prefersReducedMotion = q("(prefers-reduced-motion)"), this.activeMediaInfoIndex = 0, this.chartAnimationDisabled = !1, this.headingLevel = 2;
   }
   static {
     this.properties = { _refreshIntervalInfo: 16, messages: 0, values: 0, expressionValues: 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 = oe;
+    this.styles = ce;
   }
   get activeMediaInfo() {
     return this.formattedMediaInfos[this.activeMediaInfoIndex] || null;
@@ -133,18 +134,18 @@ class he extends Q {
     }
   }
   _setChartValue(e) {
-    const { value: t, values: i, expressionValues: a, formattedValues: n, chartType: s, layer: o } = e, { popupTemplate: r, relatedInfos: c } = this, { fields: m, normalizeField: d } = t, l = o;
-    if (t.fields = ae(m, l), d && (t.normalizeField = E(d, l)), !m.some((f) => !!(n[f] != null || A(f) && c?.size)))
+    const { value: t, values: i, expressionValues: a, formattedValues: n, chartType: s, layer: o } = e, { popupTemplate: r, relatedInfos: c } = this, { fields: f, normalizeField: d } = t, l = o;
+    if (t.fields = ae(f, l), d && (t.normalizeField = E(d, l)), !f.some((m) => !!(n[m] != null || A(m) && c?.size)))
       return;
     const u = r?.fieldInfos ?? [];
-    t.series = [], m.forEach((f, h) => {
+    t.series = [], f.forEach((m, h) => {
       const g = t.colors?.[h];
-      if (A(f)) {
+      if (A(m)) {
         t.series = [
           ...t.series,
           ...this._getRelatedChartInfos({
             fieldInfos: u,
-            fieldName: f,
+            fieldName: m,
             formattedValues: n,
             expressionValues: a,
             chartType: s,
@@ -160,7 +161,7 @@ class he extends Q {
         chartType: s,
         formattedValues: n,
         expressionValues: a,
-        fieldName: f,
+        fieldName: m,
         fieldInfos: u,
         color: g
       });
@@ -168,7 +169,7 @@ class he extends Q {
     });
   }
   _getRelatedChartInfos(e) {
-    const { fieldInfos: t, fieldName: i, formattedValues: a, chartType: n, value: s, color: o, expressionValues: r } = e, c = [], m = $(i), d = m && this.relatedInfos?.get(m.layerId);
+    const { fieldInfos: t, fieldName: i, formattedValues: a, chartType: n, value: s, color: o, expressionValues: r } = e, c = [], f = $(i), d = f && this.relatedInfos?.get(f.layerId);
     if (!d)
       return c;
     const { relatedFeatures: l, relation: p } = d;
@@ -178,7 +179,7 @@ class he extends Q {
     return l.forEach((h) => {
       const g = h.attributes;
       g && Object.keys(g).forEach((x) => {
-        x === m.fieldName && c.push(this._getChartOption({
+        x === f.fieldName && c.push(this._getChartOption({
           value: s,
           values: g,
           formattedValues: a,
@@ -197,14 +198,14 @@ class he extends Q {
     return i === "pie-chart" ? `${e}` : `${e}: ${t}`;
   }
   _getChartOption(e) {
-    const { value: t, values: i, formattedValues: a, expressionValues: n, fieldName: s, relatedFieldName: o, fieldInfos: r, chartType: c, hasMultipleRelatedFeatures: m, color: d } = e, { layer: l, graphic: p } = this, u = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { normalizeField: f, tooltipField: h } = t, g = f ? A(f) ? i[$(f).fieldName] : i[f] : null, x = re(s) && n?.[s] !== void 0 ? n[s] : o && i[o] !== void 0 ? i[o] : i[s] !== void 0 ? i[s] : a[s], I = x === void 0 ? null : x && g && typeof x == "number" && typeof g == "number" ? x / g : x, v = ne(r, s), M = E(s, l), b = (h && a[h] !== void 0 ? a[h] : Y({
+    const { value: t, values: i, formattedValues: a, expressionValues: n, fieldName: s, relatedFieldName: o, fieldInfos: r, chartType: c, hasMultipleRelatedFeatures: f, color: d } = e, { layer: l, graphic: p } = this, u = this.fieldInfoMap ?? /* @__PURE__ */ new Map(), { normalizeField: m, tooltipField: h } = t, g = m ? A(m) ? i[$(m).fieldName] : i[m] : null, x = re(s) && n?.[s] !== void 0 ? n[s] : o && i[o] !== void 0 ? i[o] : i[s] !== void 0 ? i[s] : a[s], I = x === void 0 ? null : x && g && typeof x == "number" && typeof g == "number" ? x / g : x, v = ne(r, s), M = E(s, l), b = (h && a[h] !== void 0 ? a[h] : Y({
       fieldInfo: v || new te({ fieldName: M }),
       expressionInfos: this.popupTemplate?.expressionInfos,
       graphic: p,
       layer: l
     })) ?? "", P = a[M] ?? "", L = I != null ? typeof I == "number" ? I : Number(I) : null;
     if (A(s)) {
-      const T = u.get(s.toLowerCase()), U = h ? u.get(h.toLowerCase()) : null, H = T?.fieldName ?? s, F = m && h ? $(h).fieldName : U?.fieldName ?? h, D = (m && F ? i[F] : a[F] ?? (T && Y({ fieldInfo: T, layer: l, graphic: p })) ?? T?.fieldName ?? o) ?? "", O = (m && o ? i[o] : a[H]) ?? "";
+      const T = u.get(s.toLowerCase()), U = h ? u.get(h.toLowerCase()) : null, H = T?.fieldName ?? s, F = f && h ? $(h).fieldName : U?.fieldName ?? h, D = (f && F ? i[F] : a[F] ?? (T && Y({ fieldInfo: T, layer: l, graphic: p })) ?? T?.fieldName ?? o) ?? "", O = (f && o ? i[o] : a[H]) ?? "";
       return new V({
         fieldName: s,
         tooltip: this._getTooltip({
@@ -259,36 +260,36 @@ class he extends Q {
   }
   _handleMediaKeyup(e) {
     const { key: t } = e;
-    t === "ArrowLeft" && (e.stopPropagation(), this.previous()), t === "ArrowRight" && (e.stopPropagation(), this.next());
+    oe(t, this._direction) && (e.stopPropagation(), this.previous()), le(t, this._direction) && (e.stopPropagation(), this.next());
   }
   _canAnimateChart() {
     return !this.chartAnimationDisabled && !this._prefersReducedMotion;
   }
   _getChartAnimationMS() {
-    return this._canAnimateChart() ? ce : 0;
+    return this._canAnimateChart() ? ue : 0;
   }
   _getChartSeriesAnimationMS() {
-    return this._canAnimateChart() ? de : 0;
+    return this._canAnimateChart() ? he : 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(le)
+      stroke: i(de)
     }), e.label.setAll({
       direction: this._direction,
       oversizedBehavior: "wrap",
-      maxWidth: ue
+      maxWidth: me
     });
   }
   async _createPieChart(e, t) {
     const [{ Tooltip: i }, { PieChart: a, PieSeries: n }] = await Promise.all([
       import("@amcharts/amcharts5/index.js"),
       import("@amcharts/amcharts5/percent.js")
-    ]), { mediaInfo: s, root: o } = e, { title: r } = s, c = 5, m = s?.altText || s?.title || "", d = o.container.children.push(a.new(o, {
+    ]), { mediaInfo: s, root: o } = e, { title: r } = s, c = 5, f = s?.altText || s?.title || "", d = o.container.children.push(a.new(o, {
       role: "figure",
-      ariaLabel: m,
+      ariaLabel: f,
       focusable: !0,
       paddingBottom: c,
       paddingTop: c,
@@ -316,14 +317,14 @@ class he extends Q {
     return e.forEach((i) => t = Math.min(i.value, t)), t;
   }
   async _createColumnChart(e, t, i) {
-    const [{ Tooltip: a, Scrollbar: n }, { CategoryAxis: s, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, ColumnSeries: m }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: d, root: l } = t, { value: p, title: u } = d, { _direction: f } = this;
+    const [{ Tooltip: a, Scrollbar: n }, { CategoryAxis: s, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, ColumnSeries: f }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: d, root: l } = t, { value: p, title: u } = d, { _direction: m } = this;
     e.setAll({
       wheelX: "panX",
       wheelY: "zoomX"
     });
     const h = e.xAxes.push(s.new(l, {
       renderer: o.new(l, {
-        inversed: f === "rtl"
+        inversed: m === "rtl"
       }),
       categoryField: C
     }));
@@ -335,11 +336,11 @@ class he extends Q {
       min: this._getMinSeriesValue(p.series)
     }));
     g.get("renderer").labels.template.setAll({
-      direction: f
+      direction: m
     });
     const x = "{categoryX}", I = a.new(l, {
       labelText: x
-    }), v = e.series.push(m.new(l, {
+    }), v = e.series.push(f.new(l, {
       name: u,
       xAxis: h,
       yAxis: g,
@@ -356,7 +357,7 @@ class he extends Q {
     })), h.data.setAll(i), v.data.setAll(i), v.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
   }
   async _createBarChart(e, t, i) {
-    const [{ Tooltip: a, Scrollbar: n }, { CategoryAxis: s, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, ColumnSeries: m }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: d, root: l } = t, { value: p, title: u } = d, { _direction: f } = this;
+    const [{ Tooltip: a, Scrollbar: n }, { CategoryAxis: s, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, ColumnSeries: f }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { mediaInfo: d, root: l } = t, { value: p, title: u } = d, { _direction: m } = this;
     e.setAll({
       wheelX: "panY",
       wheelY: "zoomY"
@@ -373,16 +374,16 @@ class he extends Q {
     const g = e.xAxes.push(c.new(l, {
       renderer: o.new(l, {
         inside: !1,
-        inversed: f === "rtl"
+        inversed: m === "rtl"
       }),
       min: this._getMinSeriesValue(p.series)
     }));
     g.get("renderer").labels.template.setAll({
-      direction: f
+      direction: m
     });
     const x = "{categoryY}", I = a.new(l, {
       labelText: x
-    }), v = e.series.push(m.new(l, {
+    }), v = e.series.push(f.new(l, {
       name: u,
       xAxis: g,
       yAxis: h,
@@ -399,14 +400,14 @@ class he extends Q {
     })), h.data.setAll(i), v.data.setAll(i), v.appear(this._getChartSeriesAnimationMS()), e.appear(this._getChartAnimationMS());
   }
   async _createLineChart(e, t, i) {
-    const [{ Tooltip: a, Scrollbar: n }, { CategoryAxis: s, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, LineSeries: m }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { root: d, mediaInfo: l } = t, { value: p, title: u } = l, { _direction: f } = this;
+    const [{ Tooltip: a, Scrollbar: n }, { CategoryAxis: s, AxisRendererX: o, AxisRendererY: r, ValueAxis: c, LineSeries: f }] = await Promise.all([import("@amcharts/amcharts5/index.js"), import("@amcharts/amcharts5/xy.js")]), { root: d, mediaInfo: l } = t, { value: p, title: u } = l, { _direction: m } = this;
     e.setAll({
       wheelX: "panX",
       wheelY: "zoomX"
     });
     const h = e.xAxes.push(s.new(d, {
       renderer: o.new(d, {
-        inversed: f === "rtl"
+        inversed: m === "rtl"
       }),
       categoryField: C
     }));
@@ -418,7 +419,7 @@ class he extends Q {
       min: this._getMinSeriesValue(p.series)
     }));
     g.get("renderer").labels.template.setAll({
-      direction: f
+      direction: m
     });
     const x = "{categoryX}", I = i[0]?.lineSettings?.stroke, v = a.new(d, {
       getFillFromSprite: !I,
@@ -427,7 +428,7 @@ class he extends Q {
     I && v.get("background")?.setAll({
       fill: I
     });
-    const M = e.series.push(m.new(d, {
+    const M = e.series.push(f.new(d, {
       name: u,
       xAxis: h,
       yAxis: g,
@@ -502,12 +503,12 @@ class he extends Q {
   _renderImageMediaInfo(e) {
     if (!e.value)
       return null;
-    const { _refreshIntervalInfo: t } = this, { value: i, refreshInterval: a, altText: n, title: s } = e, { sourceURL: o, linkURL: r } = i, m = se(r ?? void 0) ? "_blank" : "_self", d = m === "_blank" ? "noreferrer" : "", l = a ? t : null, p = l ? l.sourceURL : o, u = _`<img alt=${(n || s) ?? y} src=${p ?? void 0 ?? y}>`;
-    return (r ? _`<a href=${r ?? y} rel=${d ?? y} target=${m ?? y} title=${s ?? y}>${u}</a>` : null) ?? u;
+    const { _refreshIntervalInfo: t } = this, { value: i, refreshInterval: a, altText: n, title: s } = e, { sourceURL: o, linkURL: r } = i, f = se(r ?? void 0) ? "_blank" : "_self", d = f === "_blank" ? "noreferrer" : "", l = a ? t : null, p = l ? l.sourceURL : o, u = _`<img alt=${(n || s) ?? y} src=${p ?? void 0 ?? y}>`;
+    return (r ? _`<a href=${r ?? y} rel=${d ?? y} target=${f ?? y} title=${s ?? y}>${u}</a>` : null) ?? u;
   }
   _renderChartMediaInfo(e) {
     const { activeMediaInfoIndex: t, formattedMediaInfoCount: i } = this;
-    return G(`media-${e.type}-${t}-${i}`, _`<div class="chart" ${j(this._updateChartElement)}></div>`);
+    return K(`media-${e.type}-${t}-${i}`, _`<div class="chart" ${j(this._updateChartElement)}></div>`);
   }
   _renderMediaInfoType() {
     const { activeMediaInfo: e } = this;
@@ -524,7 +525,7 @@ class he extends Q {
     return _`<button .ariaLabel=${i} class="pagination-button" @click=${n} tabindex=0 title=${i ?? y} type=button><calcite-icon flip-rtl class="pagination-icon" .icon=${a} scale=s></calcite-icon></button>`;
   }
   async _renderChart(e) {
-    const { root: t, mediaInfo: i } = e, { value: a, type: n } = i, [{ default: s }, { default: o }, { default: r }, { esriChartColorSet: c }, { ColorSet: m, Theme: d }] = await Promise.all([
+    const { root: t, mediaInfo: i } = e, { value: a, type: n } = i, [{ default: s }, { default: o }, { default: r }, { esriChartColorSet: c }, { ColorSet: f, Theme: d }] = await Promise.all([
       import("@amcharts/amcharts5/themes/Animated.js"),
       import("@amcharts/amcharts5/themes/Dark.js"),
       import("@amcharts/amcharts5/themes/Responsive.js"),
@@ -534,12 +535,12 @@ class he extends Q {
     l.rule("ColorSet").set("colors", c), l.rule("ColorSet").set("reuse", !0);
     const p = [r.new(t), l];
     ie(this.el) === "dark" && p.push(o.new(t)), this._canAnimateChart() && p.push(s.new(t)), t.setThemes(p);
-    const u = await this._getRendererColors(), f = await this._getSeriesColors(a.series), h = m.new(t, {}), g = f.get(a.series[0]), x = g ? {
+    const u = await this._getRendererColors(), m = await this._getSeriesColors(a.series), h = f.new(t, {}), g = m.get(a.series[0]), x = g ? {
       lineSettings: {
         stroke: g
       }
     } : void 0, I = a.series.map((v, M) => {
-      const b = f.get(v) || u.get(v.fieldName) || h.getIndex(M);
+      const b = m.get(v) || u.get(v.fieldName) || h.getIndex(M);
       return {
         [C]: v.tooltip,
         [w]: v.value,
@@ -553,7 +554,7 @@ class he extends Q {
     n === "pie-chart" ? this._createPieChart(e, I) : this._createXYChart(e, I);
   }
 }
-B("arcgis-feature-media", he);
+B("arcgis-feature-media", fe);
 export {
-  he as ArcgisFeatureMedia
+  fe as ArcgisFeatureMedia
 };

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

@@ -1,49 +1,50 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as R } from "../../chunks/runtime.js";
-import { css as O, html as a } from "lit";
+import { c as O } from "../../chunks/runtime.js";
+import { css as R, html as a } from "lit";
 import { keyed as D } from "lit/directives/keyed.js";
-import L from "@arcgis/core/widgets/Features/FeaturesViewModel.js";
-import { u as B } from "../../chunks/useT9n.js";
+import B from "@arcgis/core/widgets/Features/FeaturesViewModel.js";
+import { u as L } from "../../chunks/useT9n.js";
 import { log as V } from "@arcgis/toolkit/log";
 import { classes as A } from "@arcgis/toolkit/dom";
-import { usePropertyChange as S, bypassReadOnly as x } from "@arcgis/lumina/controllers";
-import { m as H } from "../../chunks/useViewModel.js";
-import { LitElement as P, createEvent as y, renderElement as z, nothing as h, safeClassMap as I } from "@arcgis/lumina";
+import { useDirection as S, usePropertyChange as H, bypassReadOnly as x } from "@arcgis/lumina/controllers";
+import { m as P } from "../../chunks/useViewModel.js";
+import { LitElement as z, createEvent as y, renderElement as U, nothing as h, safeClassMap as I } from "@arcgis/lumina";
 import { substitute as u, formatNumber as C } from "@arcgis/core/intl.js";
 import { watch as r } from "@arcgis/core/core/reactiveUtils.js";
-import { t as U, z as Z } from "../../chunks/action-utils.js";
+import { t as Z, z as K } from "../../chunks/action-utils.js";
 import { stripHTML as T } from "@arcgis/core/applications/Components/stringUtils.js";
 import E from "@arcgis/core/core/Collection.js";
 import { g as j } from "../../chunks/feature-utils.js";
 import { renderingSanitizer as _ } from "@arcgis/core/applications/Components/sanitizerUtils.js";
 import { initializeProjection as G } from "@arcgis/core/applications/Components/featureUtils.js";
-import K from "@arcgis/core/support/actions/ActionButton.js";
+import q from "@arcgis/core/support/actions/ActionButton.js";
 import { createRef as b, ref as m } from "lit/directives/ref.js";
-const q = O`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.content-feature{--calcite-flow-item-footer-padding: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}`, W = new K({
+import { a as W, b as X } from "../../chunks/keyboard-utils.js";
+const J = R`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.content-feature{--calcite-flow-item-footer-padding: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}`, Q = new q({
   icon: "magnifying-glass-plus",
   id: "zoom-to-feature",
   title: "{messages.zoom}"
-}), M = W.clone();
-function X(k) {
+}), M = Q.clone();
+function Y(k) {
   return k?.declaredClass.startsWith("esri.layers.") ?? !1;
 }
-const J = H(L);
-class Q extends P {
+const ee = P(B);
+class te extends z {
   constructor() {
-    super(...arguments), this._fetchFeaturesController = null, this._featureMenuIntersectionObserverCallback = ([e]) => {
+    super(...arguments), this._direction = S(), this._fetchFeaturesController = null, this._featureMenuIntersectionObserverCallback = ([e]) => {
       e?.isIntersecting && this.viewModel.featurePage != null && this.viewModel.featurePage++;
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
-    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = b(), this._featureMenuViewportNode = b(), this._actionBarMenuNode = b(), this._flowContainerNode = b(), this.messages = B(), this._selectedFeatureComponent = b(), this._cancelOpenRelatedFeature = () => {
+    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = b(), this._featureMenuViewportNode = b(), this._actionBarMenuNode = b(), this._flowContainerNode = b(), this.messages = L(), this._selectedFeatureComponent = b(), this._cancelOpenRelatedFeature = () => {
       const { _openRelatedFeatureAbortController: e } = this;
       e && e.abort(), this._openRelatedFeatureAbortController = null;
-    }, this._openRelatedFeatureAbortController = null, this.flowItems = new E(), this.viewModel = J(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = this.viewModel.featureMenuOpen, this.featureMenuTitle = this.viewModel.featureMenuTitle, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureViewModelAbilities = this.viewModel.featureViewModelAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new E(), this.heading = this.viewModel.title, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.hideExpressionContent = !1, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.visible, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = S()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = y(), this.arcgisClose = y(), this.arcgisTriggerAction = y();
+    }, this._openRelatedFeatureAbortController = null, this.flowItems = new E(), this.viewModel = ee(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = this.viewModel.featureMenuOpen, this.featureMenuTitle = this.viewModel.featureMenuTitle, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureViewModelAbilities = this.viewModel.featureViewModelAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new E(), this.heading = this.viewModel.title, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.hideExpressionContent = !1, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.visible, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = H()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = y(), this.arcgisClose = y(), this.arcgisTriggerAction = y();
   }
   static {
     this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, _featureFlowItemSelected: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, collapseDirection: 1, collapsed: 5, content: 1, defaultPopupTemplateEnabled: 5, effectiveHeading: 32, featureCount: 9, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureViewModelAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSelectFeature: 5, hideSpinner: 5, hideContent: 5, chartAnimationDisabled: 5, hideAttachmentsContent: 5, hideCustomContent: 5, hideExpressionContent: 5, hideFieldsContent: 5, hideMediaContent: 5, hideRelationshipContent: 5, hideTextContent: 5, hideUtilityNetworkContent: 5, hideLastEditedInfo: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, open: 5, referenceElement: 1, promises: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 32, timeZone: 1, updateLocationEnabled: 5, view: 0 };
   }
   static {
-    this.styles = q;
+    this.styles = J;
   }
   get _hideActionText() {
     if (!this.responsiveActionsEnabled)
@@ -144,7 +145,7 @@ class Q extends P {
   }
   async triggerAction(e) {
     if (!e.disabled)
-      return e?.type === "toggle" && (e.value = !e.value), await U(e, this.viewModel);
+      return e?.type === "toggle" && (e.value = !e.value), await Z(e, this.viewModel);
   }
   connectedCallback() {
     super.connectedCallback(), this._createSpinner();
@@ -204,7 +205,7 @@ class Q extends P {
       const i = s?.graphic;
       if (!i)
         return;
-      const o = j(i), n = X(o) ? o : null, l = t.get(n) ?? [];
+      const o = j(i), n = Y(o) ? o : null, l = t.get(n) ?? [];
       t.set(n, [...l, s]);
     }), t;
   }
@@ -275,7 +276,7 @@ class Q extends P {
   }
   _onMainKeydown(e) {
     const { key: t } = e;
-    t === "ArrowLeft" && (e.stopPropagation(), this._handleFeatureMenuBack(), this.previous(), this.setFocus()), t === "ArrowRight" && (e.stopPropagation(), this._handleFeatureMenuBack(), this.next(), this.setFocus());
+    W(t, this._direction) && (e.stopPropagation(), this._handleFeatureMenuBack(), this.previous(), this.setFocus()), X(t, this._direction) && (e.stopPropagation(), this._handleFeatureMenuBack(), this.next(), this.setFocus());
   }
   _featureMenuViewportScrollTop() {
     this._featureMenuViewportNode.value?.scrollContentTo({ top: 0 });
@@ -323,7 +324,7 @@ class Q extends P {
   }
   _createSpinner() {
     const e = this.referenceElement;
-    e && (this._removeSpinner(e), this._spinnerEl = z(a`<arcgis-spinner .label=${this.messages.loading ?? ""} .trackLocation=${!this.hideSpinner && this.viewModel.visible && this.viewModel?.waitingForResult} .location=${this.viewModel?.location ?? void 0} .view=${this.viewModel?.view ?? void 0}></arcgis-spinner>`), e.manager?.component?.extraContent?.add(this._spinnerEl));
+    e && (this._removeSpinner(e), this._spinnerEl = U(a`<arcgis-spinner .label=${this.messages.loading ?? ""} .trackLocation=${!this.hideSpinner && this.viewModel.visible && this.viewModel?.waitingForResult} .location=${this.viewModel?.location ?? void 0} .view=${this.viewModel?.view ?? void 0}></arcgis-spinner>`), e.manager?.component?.extraContent?.add(this._spinnerEl));
   }
   render() {
     return a`<div class="root" @keydown=${this._onMainKeydown}>${this._renderHeader()}${this._renderContentContainer()}</div>`;
@@ -405,7 +406,7 @@ class Q extends P {
     const { messages: s, hideCloseButton: i, hideSelectFeature: o, active: n, hideHeading: l } = this, c = "graphic" in e && "isFeatureFromTable" in e && !e.isFeatureFromTable, f = c && !o, v = e.flowType === "feature-association", g = s.returnToInitialFeature ?? "", p = s?.selectFeature, w = this._getActionTitle(M), d = !this.hideActionBar && v && c;
     return a`<calcite-flow-item .closable=${!i} .closed=${!n} .description=${T(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${l ? void 0 : T(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${(F) => {
       F.preventDefault(), this._handleDrillInBackClick();
-    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}>${l ? null : a`<div slot=heading><div .innerHTML=${_.sanitize(e.heading ?? "") ?? ""}></div></div>`}<div slot=description><div .innerHTML=${_.sanitize(this._getDrillInFlowItemDescription(e) ?? "") ?? ""}></div></div><calcite-action class="action-exit" icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${g ?? ""} title=${g ?? "" ?? h}></calcite-action>${f ? a`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${p ?? ""} title=${p ?? h}></calcite-action>` : null}${d ? a`<calcite-action-bar expand-disabled expanded scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s><calcite-action .disabled=${M.disabled} .icon=${M.icon ?? void 0} .loading=${M.active} scale=s text-enabled .text=${w} title=${w ?? h} @click=${() => Z(this.viewModel, M, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class="container">${e}</div></calcite-flow-item>`;
+    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}>${l ? null : a`<div slot=heading><div .innerHTML=${_.sanitize(e.heading ?? "") ?? ""}></div></div>`}<div slot=description><div .innerHTML=${_.sanitize(this._getDrillInFlowItemDescription(e) ?? "") ?? ""}></div></div><calcite-action class="action-exit" icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${g ?? ""} title=${g ?? "" ?? h}></calcite-action>${f ? a`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${p ?? ""} title=${p ?? h}></calcite-action>` : null}${d ? a`<calcite-action-bar expand-disabled expanded scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s><calcite-action .disabled=${M.disabled} .icon=${M.icon ?? void 0} .loading=${M.active} scale=s text-enabled .text=${w} title=${w ?? h} @click=${() => K(this.viewModel, M, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class="container">${e}</div></calcite-flow-item>`;
   }
   _renderContentContainer() {
     const e = this.flowItems?.toArray(), t = e?.map((i, o) => this._renderFlowItem(i, this._featureFlowItemSelected && o === e.length - 1)), s = this.initialDisplayMode === "list" ? [this._renderFeatureMenuContainer(), this._renderContentFeature(), t] : [this._renderContentFeature(), t, this._renderFeatureMenuContainer()];
@@ -426,7 +427,7 @@ class Q extends P {
     return t ? a`<arcgis-feature .autoDestroyDisabled=${this.autoDestroyDisabled} .chartAnimationDisabled=${this.chartAnimationDisabled} .defaultPopupTemplateEnabled=${this.defaultPopupTemplateEnabled} .flowItems=${this.flowItems} .graphic=${t.graphic} .headingLevel=${this.headingLevel + 1} .hideAttachmentsContent=${this.hideAttachmentsContent} .hideContent=${this.hideContent} .hideCustomContent=${this.hideCustomContent} .hideExpressionContent=${this.hideExpressionContent} .hideFieldsContent=${this.hideFieldsContent} hide-heading .hideLastEditedInfo=${this.hideLastEditedInfo} .hideMediaContent=${this.hideMediaContent} .hideTextContent=${this.hideTextContent} .location=${this.location} .map=${this.map} .referenceElement=${this.referenceElement} .showRelationshipContent=${!this.hideRelationshipContent} .showUtilityNetworkContent=${!this.hideUtilityNetworkContent} .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} ${m(this._selectedFeatureComponent)}></arcgis-feature>` : typeof e == "string" ? D(e, a`<div .innerHTML=${_.sanitize(e) ?? ""}></div>`) : e ?? null;
   }
 }
-R("arcgis-features", Q);
+O("arcgis-features", te);
 export {
-  Q as ArcgisFeatures
+  te as ArcgisFeatures
 };

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

@@ -1,17 +1,17 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as B } from "../../chunks/runtime.js";
+import { c as L } from "../../chunks/runtime.js";
 import { css as R, html as o } from "lit";
 import { keyed as y } from "lit/directives/keyed.js";
 import O from "@arcgis/core/support/actions/ActionButton.js";
 import E from "@arcgis/core/core/Collection.js";
 import H from "@arcgis/core/popup/Features.js";
 import { LitElement as P, createEvent as A, renderElement as z, nothing as p, safeClassMap as I } from "@arcgis/lumina";
-import { usePropertyChange as Z, bypassReadOnly as k } from "@arcgis/lumina/controllers";
+import { useDirection as Z, usePropertyChange as V, bypassReadOnly as k } from "@arcgis/lumina/controllers";
 import { slotChangeHasContent as D, classes as x } from "@arcgis/toolkit/dom";
 import { createRef as m, ref as f } from "lit/directives/ref.js";
 import { g as S } from "../../chunks/feature-utils.js";
-import { initializeProjection as V } from "@arcgis/core/applications/Components/featureUtils.js";
-import { t as U, z as j } from "../../chunks/action-utils.js";
+import { initializeProjection as U } from "@arcgis/core/applications/Components/featureUtils.js";
+import { t as K, z as j } from "../../chunks/action-utils.js";
 import { m as q } from "../../chunks/useViewModel.js";
 import { renderingSanitizer as b } from "@arcgis/core/applications/Components/sanitizerUtils.js";
 import { stripHTML as T } from "@arcgis/core/applications/Components/stringUtils.js";
@@ -19,16 +19,17 @@ import { substitute as g, formatNumber as C } from "@arcgis/core/intl.js";
 import { u as G } from "../../chunks/useT9n.js";
 import { watch as c } from "@arcgis/core/core/reactiveUtils.js";
 import { a as N } from "../../chunks/maybe.js";
-const K = R`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.content-feature{--calcite-flow-item-footer-padding: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}.flow-item-drill-in{--calcite-flow-item-footer-padding: 0}`;
-function W(F) {
+import { a as W, b as X } from "../../chunks/keyboard-utils.js";
+const J = R`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.content-feature{--calcite-flow-item-footer-padding: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}.flow-item-drill-in{--calcite-flow-item-footer-padding: 0}`;
+function Q(F) {
   return F?.declaredClass.startsWith("esri.layers.") ?? !1;
 }
-function X(F) {
+function Y(F) {
   if (!(!F || !("featureReduction" in F)))
     return F.featureReduction?.type;
 }
-const J = q(H);
-class Q extends P {
+const ee = q(H);
+class te extends P {
   constructor() {
     super(...arguments), this._zoomToFeature = new O({
       icon: "magnifying-glass-plus",
@@ -38,15 +39,15 @@ class Q extends P {
       e?.isIntersecting && this.viewModel.featurePage != null && this.viewModel.featurePage++;
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
-    }), this._featureMenuIntersectionObserverNode = null, this._focusTrapNode = m(), this._focusTrapAnimationFrameId = null, this._rootFlowItemNode = m(), this._featureMenuViewportNode = m(), this._actionBarMenuNode = m(), this._flowContainerNode = m(), this._aggregatedFeaturesComponent = m(), this.messages = G(), this._selectedFeatureComponent = m(), this._cancelOpenRelatedFeature = () => {
+    }), this._featureMenuIntersectionObserverNode = null, this._focusTrapNode = m(), this._focusTrapAnimationFrameId = null, this._rootFlowItemNode = m(), this._featureMenuViewportNode = m(), this._actionBarMenuNode = m(), this._flowContainerNode = m(), this._aggregatedFeaturesComponent = m(), this.messages = G(), this._selectedFeatureComponent = m(), this._direction = Z(), this._cancelOpenRelatedFeature = () => {
       this._openRelatedFeatureAbortController = N(this._openRelatedFeatureAbortController);
-    }, this._openRelatedFeatureAbortController = null, this.flowItems = new E(), this._aggregatedFeatureCount = 0, this._selectedAggregatedFeatureIndex = -1, this._aggregatedFeaturesLoading = !1, this._hasActionsStartSlotContent = !1, this._hasActionsEndSlotContent = !1, this.viewModel = J(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.focusTrapEnabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureItemAbilities = this.viewModel.featureItemAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new E(), this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.chartAnimationDisabled = this.viewModel.featureItemAbilities?.chartAnimation, this.hideAttachmentsContent = this.viewModel.featureItemAbilities?.attachmentsContent, this.hideCustomContent = this.viewModel.featureItemAbilities?.customContent, this.hideExpressionContent = !1, this.hideFieldsContent = this.viewModel.featureItemAbilities?.fieldsContent, this.hideMediaContent = this.viewModel.featureItemAbilities?.mediaContent, this.hideRelationshipContent = this.viewModel.featureItemAbilities?.relationshipContent, this.hideTextContent = this.viewModel.featureItemAbilities?.textContent, this.hideUtilityNetworkContent = this.viewModel.featureItemAbilities?.utilityNetworkAssociationsContent, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = Z()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = A(), this.arcgisClose = A(), this.arcgisTriggerAction = A();
+    }, this._openRelatedFeatureAbortController = null, this.flowItems = new E(), this._aggregatedFeatureCount = 0, this._selectedAggregatedFeatureIndex = -1, this._aggregatedFeaturesLoading = !1, this._hasActionsStartSlotContent = !1, this._hasActionsEndSlotContent = !1, this.viewModel = ee(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.focusTrapEnabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureItemAbilities = this.viewModel.featureItemAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new E(), this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.chartAnimationDisabled = this.viewModel.featureItemAbilities?.chartAnimation, this.hideAttachmentsContent = this.viewModel.featureItemAbilities?.attachmentsContent, this.hideCustomContent = this.viewModel.featureItemAbilities?.customContent, this.hideExpressionContent = !1, this.hideFieldsContent = this.viewModel.featureItemAbilities?.fieldsContent, this.hideMediaContent = this.viewModel.featureItemAbilities?.mediaContent, this.hideRelationshipContent = this.viewModel.featureItemAbilities?.relationshipContent, this.hideTextContent = this.viewModel.featureItemAbilities?.textContent, this.hideUtilityNetworkContent = this.viewModel.featureItemAbilities?.utilityNetworkAssociationsContent, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = V()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = A(), this.arcgisClose = A(), this.arcgisTriggerAction = A();
   }
   static {
     this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _aggregatedFeatureCount: 16, _selectedAggregatedFeatureIndex: 16, _aggregatedFeaturesLoading: 16, _hasActionsStartSlotContent: 16, _hasActionsEndSlotContent: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, _featureFlowItemSelected: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, focusTrapEnabled: 5, collapseDirection: 1, collapsed: 5, content: 1, defaultPopupTemplateEnabled: 5, effectiveHeading: 32, featureCount: 9, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureItemAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSelectFeature: 5, hideSpinner: 5, hideContent: 5, chartAnimationDisabled: 5, hideAttachmentsContent: 5, hideCustomContent: 5, hideExpressionContent: 5, hideFieldsContent: 5, hideMediaContent: 5, hideRelationshipContent: 5, hideTextContent: 5, hideUtilityNetworkContent: 5, hideLastEditedInfo: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, open: 5, referenceElement: 1, promises: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 32, timeZone: 1, updateLocationEnabled: 5, view: 0 };
   }
   static {
-    this.styles = K;
+    this.styles = J;
   }
   get _hideActionText() {
     if (!this.responsiveActionsEnabled)
@@ -78,7 +79,7 @@ class Q extends P {
   async fetchFeatures(e, t) {
     this._cancelFetchingFeatures();
     const { signal: a } = t ?? {}, i = new AbortController(), { signal: s } = i, n = a ? AbortSignal.any([s, a]) : s;
-    if (this._fetchFeaturesController = i, !e && this.view && this.location && (await V(this.location.spatialReference, this.view.spatialReference, null, {
+    if (this._fetchFeaturesController = i, !e && this.view && this.location && (await U(this.location.spatialReference, this.view.spatialReference, null, {
       signal: n
     }), e = this.view.toScreen(this.location) ?? void 0), !e)
       return;
@@ -99,7 +100,7 @@ class Q extends P {
   }
   async triggerAction(e) {
     if (!e.disabled)
-      return e?.type === "toggle" && (e.value = !e.value), await U(e, this.viewModel);
+      return e?.type === "toggle" && (e.value = !e.value), await K(e, this.viewModel);
   }
   connectedCallback() {
     super.connectedCallback(), this._createSpinner();
@@ -159,7 +160,7 @@ class Q extends P {
       const i = a?.graphic;
       if (!i)
         return;
-      const s = S(i), n = W(s) ? s : null;
+      const s = S(i), n = Q(s) ? s : null;
       let r = t.get(n);
       r || (r = [], t.set(n, r)), r.push(a);
     }), t;
@@ -231,7 +232,7 @@ class Q extends P {
   }
   _onMainKeydown(e) {
     const { key: t } = e;
-    t === "ArrowLeft" && (e.stopPropagation(), this._handleFeatureMenuBack(), this.previous(), this.setFocus()), t === "ArrowRight" && (e.stopPropagation(), this._handleFeatureMenuBack(), this.next(), this.setFocus());
+    W(t, this._direction) && (e.stopPropagation(), this._handleFeatureMenuBack(), this.previous(), this.setFocus()), X(t, this._direction) && (e.stopPropagation(), this._handleFeatureMenuBack(), this.next(), this.setFocus());
   }
   _featureMenuViewportScrollTop() {
     this._featureMenuViewportNode.value?.scrollContentTo({ top: 0 });
@@ -245,7 +246,7 @@ class Q extends P {
   }
   _viewScaleChange() {
     const { selectedFeature: e } = this;
-    !e?.isAggregate || X(S(e)) !== "cluster" || (this.viewModel.aggregatedFeaturesEnabled = !1, this.open = !1, this.clear());
+    !e?.isAggregate || Y(S(e)) !== "cluster" || (this.viewModel.aggregatedFeaturesEnabled = !1, this.open = !1, this.clear());
   }
   _viewChange() {
     this.viewModel.clear(), this.open = !1, this._aggregatedFeatureCount = 0, this._removeFlowItems();
@@ -372,8 +373,8 @@ class Q extends P {
       "flow-item-collapsed": l
     }))} .closable=${s === "list" && !t} .closed=${!_} .collapsed=${s === "list" && l} .collapseDirection=${this.collapseDirection ?? (h ? "down" : "up")} .collapsible=${s === "list" && d} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} .description=${this.hideFeatureMenuHeading ? void 0 : g(i.total ?? "", {
       total: u.length
-    })} .heading=${this.hideFeatureMenuHeading ? void 0 : $} .headingLevel=${v} .loading=${e.waitingForContents} .selected=${M} @calciteFlowItemBack=${(L) => {
-      L.preventDefault(), this._handleFeatureMenuBack();
+    })} .heading=${this.hideFeatureMenuHeading ? void 0 : $} .headingLevel=${v} .loading=${e.waitingForContents} .selected=${M} @calciteFlowItemBack=${(B) => {
+      B.preventDefault(), this._handleFeatureMenuBack();
     }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${f(this._featureMenuViewportNode)}>${s === "list" ? this._renderHeaderActions() : null}${w > 0 ? o`<calcite-loader class="loader" inline .label=${i.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}<div class="container">${M ? this._renderFeatureMenu() : null}</div><div class="feature-menu-observer" ${f(this._featureMenuIntersectionObserverCreated)}></div>${s === "feature" ? o`<calcite-button scale=s appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-start width=full>${i.back}</calcite-button>` : null}</calcite-flow-item>`;
   }
   _renderFlowItem(e, t) {
@@ -413,7 +414,7 @@ class Q extends P {
     return t ? o`<arcgis-feature-next .autoDestroyDisabled=${this.autoDestroyDisabled} .chartAnimationDisabled=${this.chartAnimationDisabled} .defaultPopupTemplateEnabled=${this.defaultPopupTemplateEnabled} .flowItems=${this.flowItems} .graphic=${t.graphic} .headingLevel=${this.headingLevel + 1} .hideAttachmentsContent=${this.hideAttachmentsContent} .hideContent=${this.hideContent} .hideCustomContent=${this.hideCustomContent} .hideExpressionContent=${this.hideExpressionContent} .hideFieldsContent=${this.hideFieldsContent} hide-heading .hideLastEditedInfo=${this.hideLastEditedInfo} .hideMediaContent=${this.hideMediaContent} .hideTextContent=${this.hideTextContent} .location=${this.location} .map=${this.map} .referenceElement=${this.referenceElement} .showRelationshipContent=${!this.hideRelationshipContent} .showUtilityNetworkContent=${!this.hideUtilityNetworkContent} .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} ${f(this._selectedFeatureComponent)}></arcgis-feature-next>` : typeof e == "string" ? y(e, o`<div .innerHTML=${b.sanitize(e) ?? ""}></div>`) : e ?? null;
   }
 }
-B("arcgis-features-next", Q);
+L("arcgis-features-next", te);
 export {
-  Q as ArcgisFeaturesNext
+  te as ArcgisFeaturesNext
 };