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

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as k } from "../../chunks/runtime.js";
-import { css as L, html as a } from "lit";
-import z from "@arcgis/core/rest/query/support/AttachmentInfo.js";
-import S from "@arcgis/core/rest/support/AttachmentQuery.js";
-import I from "@arcgis/core/core/Collection.js";
-import b from "@arcgis/core/core/Error.js";
-import { LitElement as _, nothing as p, safeClassMap as w, safeStyleMap as $ } from "@arcgis/lumina";
+import { css as I, html as a } from "lit";
+import L from "@arcgis/core/rest/query/support/AttachmentInfo.js";
+import z from "@arcgis/core/rest/support/AttachmentQuery.js";
+import S from "@arcgis/core/core/Collection.js";
+import w from "@arcgis/core/core/Error.js";
+import { LitElement as P, nothing as h, safeClassMap as b, safeStyleMap as $ } from "@arcgis/lumina";
 import { classes as A } from "@arcgis/toolkit/dom";
 import { g as u } from "../../chunks/feature-utils.js";
-import { watch as C } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as _ } from "@arcgis/core/core/reactiveUtils.js";
 function v(i) {
   const e = i.toLowerCase();
   return e === "image/bmp" || e === "image/emf" || e === "image/exif" || e === "image/gif" || e === "image/x-icon" || e === "image/jpeg" || e === "image/png" || e === "image/tiff" || e === "image/x-wmf";
@@ -16,16 +16,16 @@ function v(i) {
 function x(i) {
   return i ? i === "text/plain" ? "file-text" : i === "application/pdf" ? "file-pdf" : i === "text/csv" ? "file-csv" : i === "application/gpx+xml" ? "file-gpx" : i === "application/x-dwf" ? "file-cad" : i === "application/postscript" || i === "application/json" || i === "text/xml" || i === "model/vrml" ? "file-code" : i === "application/x-zip-compressed" || i === "application/x-7z-compressed" || i === "application/x-gzip" || i === "application/x-tar" || i === "application/x-gtar" || i === "application/x-bzip2" || i === "application/gzip" || i === "application/x-compress" || i === "application/x-apple-diskimage" || i === "application/x-rar-compressed" || i === "application/zip" ? "file-zip" : i.includes("image/") ? "file-image" : i.includes("audio/") ? "file-sound" : i.includes("video/") ? "file-video" : i.includes("msexcel") || i.includes("ms-excel") || i.includes("spreadsheetml") ? "file-excel" : i.includes("msword") || i.includes("ms-word") || i.includes("wordprocessingml") ? "file-word" : i.includes("powerpoint") || i.includes("presentationml") ? "file-report" : "file" : "file";
 }
-const P = L`.item-link{display:flex;flex-grow:1}.item-link img{max-width:100%;max-height:100%;object-fit:contain}.item-link--list{align-items:center;justify-content:center;width:64px;max-height:64px;overflow:hidden;border-radius:var(--calcite-corner-radius-sm)}.item-link--list img{border-radius:var(--calcite-corner-radius-sm)}.item-link--list-icon{border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.item-link--list calcite-icon{margin:var(--calcite-spacing-lg)}.item-link--preview{align-items:center;justify-content:center}.item-link--preview calcite-icon{margin-block:var(--calcite-spacing-lg)}.item-description{text-align:center;word-wrap:break-word;word-break:break-word}calcite-link{--calcite-link-text-color: var(--calcite-color-text-3);padding-inline:var(--calcite-spacing-sm);word-wrap:break-word;word-break:break-word}calcite-card{width:100%}`, j = I.ofType(z);
-class R extends _ {
+const C = I`.item-link{display:flex;flex-grow:1}.item-link img{max-width:100%;max-height:100%;object-fit:contain}.item-link--list{align-items:center;justify-content:center;width:64px;max-height:64px;overflow:hidden;border-radius:var(--calcite-corner-radius-sm)}.item-link--list img{border-radius:var(--calcite-corner-radius-sm)}.item-link--list-icon{border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.item-link--list calcite-icon{margin:var(--calcite-spacing-lg)}.item-link--preview{align-items:center;justify-content:center}.item-link--preview calcite-icon{margin-block:var(--calcite-spacing-lg)}.item-description{text-align:center;word-wrap:break-word;word-break:break-word}calcite-link{--calcite-link-text-color: var(--calcite-color-text-3);padding-inline:var(--calcite-spacing-sm);word-wrap:break-word;word-break:break-word}calcite-card{width:100%}`, j = S.ofType(L);
+class R extends P {
   constructor() {
-    super(...arguments), this._attachmentInfos = new j(), this._attachmentLayer = null, this._supportsImageOrientation = window?.CSS?.supports("image-orientation", "from-image"), this.getAttachmentsPromise = null, this.hideSection = !1, this.headingLevel = 2;
+    super(...arguments), this._attachmentInfos = new j(), this._attachmentLayer = null, this._supportsImageOrientation = window?.CSS?.supports("image-orientation", "from-image"), this.getAttachmentsPromise = null, this.hideSection = !1, this.headingLevel = 2, this.hidePreviewImageAttachmentName = !1;
   }
   static {
-    this.properties = { effectiveDisplayType: 16, getAttachmentsPromise: 16, hideSection: 16, supportsResizeAttachments: 16, attachmentKeywords: 0, attachmentTypes: 0, description: 1, displayType: 1, graphic: 0, heading: 1, messages: 0, orderByFields: 0, headingLevel: 9 };
+    this.properties = { effectiveDisplayType: 16, getAttachmentsPromise: 16, hideSection: 16, supportsResizeAttachments: 16, attachmentKeywords: 0, attachmentTypes: 0, description: 1, displayType: 1, graphic: 0, heading: 1, messages: 0, orderByFields: 0, headingLevel: 9, hidePreviewImageAttachmentName: 5 };
   }
   static {
-    this.styles = P;
+    this.styles = C;
   }
   get _supportsTypeWildcard() {
     const { graphic: e } = this;
@@ -47,26 +47,26 @@ class R extends _ {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      C(() => this.graphic, () => this.graphicChanged(), { initial: !0 })
+      _(() => this.graphic, () => this.graphicChanged(), { initial: !0 })
     ]);
   }
   async getAttachments() {
-    const { _attachmentLayer: e, _attachmentInfos: t, orderByFields: l, attachmentTypes: r, attachmentKeywords: s, _supportsTypeWildcard: g } = this;
+    const { _attachmentLayer: e, _attachmentInfos: t, orderByFields: o, attachmentTypes: m, attachmentKeywords: s, _supportsTypeWildcard: g } = this;
     if (!e || typeof e.queryAttachments != "function")
-      throw new b("invalid-layer", "getAttachments(): A valid layer is required.");
-    const o = this.graphic?.getObjectId();
-    if (typeof o != "number")
-      throw new b("invalid-object-id", "getAttachments(): Numeric object id is required");
-    const m = l?.map((c) => `${c.field} ${c.order === "descending" ? "DESC" : "ASC"}`), f = new S({
-      objectIds: [o],
+      throw new w("invalid-layer", "getAttachments(): A valid layer is required.");
+    const d = this.graphic?.getObjectId();
+    if (typeof d != "number")
+      throw new w("invalid-object-id", "getAttachments(): Numeric object id is required");
+    const r = o?.map((n) => `${n.field} ${n.order === "descending" ? "DESC" : "ASC"}`), f = new z({
+      objectIds: [d],
       returnMetadata: !0,
-      orderByFields: m,
-      attachmentTypes: g ? r?.filter(Boolean).map((c) => `${c}/*`) : void 0,
+      orderByFields: r,
+      attachmentTypes: g ? m?.filter(Boolean).map((n) => `${n}/*`) : void 0,
       keywords: s
-    }), n = [], h = e.queryAttachments(f).then((c) => c[o] || n).catch(() => n);
-    this.getAttachmentsPromise = h;
-    const d = await h;
-    t.destroyAll(), d.length && t.addMany(d), this.getAttachmentsPromise = null;
+    }), c = [], p = e.queryAttachments(f).then((n) => n[d] || c).catch(() => c);
+    this.getAttachmentsPromise = p;
+    const l = await p;
+    t.destroyAll(), l.length && t.addMany(l), this.getAttachmentsPromise = null;
   }
   setAttachmentLayer() {
     const { graphic: e } = this, t = u(e);
@@ -96,14 +96,14 @@ class R extends _ {
     return e === "preview" ? this.renderAttachmentsPreview(t) : this.renderAttachmentsList(t);
   }
   renderAttachmentListItem(e) {
-    const { supportsResizeAttachments: t } = this, { contentType: l, name: r, url: s, size: g } = e, o = 64, m = r || this.messages?.noTitle, f = x(l), n = this.getCSSTransform(e), h = n ? { transform: n, "image-orientation": "none" } : {}, d = t && v(l), c = a`<a class=${w(A("item-link", "item-link--list", {
-      "item-link--list-icon": !d
-    }))} slot=content-start href=${s ?? void 0 ?? p} rel=noreferrer target=_blank>${d ? a`<img alt=${r ?? p} src=${`${s}${s?.includes("?") ? "&" : "?"}w=${o}&s=${g}`} style=${$(h)} title=${r ?? p}>` : a`<calcite-icon .icon=${f}></calcite-icon>`}</a>`, y = a`<calcite-link slot=content .href=${s ?? void 0} rel=noreferrer target=_blank>${m}</calcite-link>`;
-    return a`<calcite-list-item .label=${m}>${c}${y}</calcite-list-item>`;
+    const { supportsResizeAttachments: t } = this, { contentType: o, name: m, url: s, size: g } = e, d = 64, r = m || this.messages?.noTitle, f = x(o), c = this.getCSSTransform(e), p = c ? { transform: c, "image-orientation": "none" } : {}, l = t && v(o), n = a`<a class=${b(A("item-link", "item-link--list", {
+      "item-link--list-icon": !l
+    }))} slot=content-start href=${s ?? void 0 ?? h} rel=noreferrer target=_blank>${l ? a`<img alt=${m ?? h} src=${`${s}${s?.includes("?") ? "&" : "?"}w=${d}&s=${g}`} style=${$(p)} title=${m ?? h}>` : a`<calcite-icon .icon=${f}></calcite-icon>`}</a>`, y = a`<calcite-link slot=content .href=${s ?? void 0} rel=noreferrer target=_blank>${r}</calcite-link>`;
+    return a`<calcite-list-item .label=${r}>${n}${y}</calcite-list-item>`;
   }
   renderAttachmentPreviewItem(e) {
-    const { supportsResizeAttachments: t } = this, { contentType: l, name: r, url: s, size: g } = e, o = 225, m = r || this.messages?.noTitle, f = x(l), n = this.getCSSTransform(e), h = n ? { transform: n, "image-orientation": "none" } : {}, d = a`<a class=${w(A("item-link", "item-link--preview"))} slot=thumbnail href=${s ?? void 0 ?? p} rel=noreferrer target=_blank>${t && v(l) ? a`<img alt=${r ?? p} src=${`${s}${s?.includes("?") ? "&" : "?"}w=${o}&s=${g}`} style=${$(h)} title=${r ?? p}>` : a`<calcite-icon scale=l .icon=${f}></calcite-icon>`}</a>`;
-    return a`<calcite-card .label=${m}>${d}<span class="item-description" slot=description>${m}</span></calcite-card>`;
+    const { supportsResizeAttachments: t } = this, { contentType: o, name: m, url: s, size: g } = e, d = 225, r = m || this.messages?.noTitle, f = x(o), c = this.getCSSTransform(e), p = c ? { transform: c, "image-orientation": "none" } : {}, l = t && v(o), n = a`<a class=${b(A("item-link", "item-link--preview"))} slot=thumbnail href=${s ?? void 0 ?? h} rel=noreferrer target=_blank aria-label=${r ?? h} title=${r ?? h}>${l ? a`<img alt=${r ?? h} src=${`${s}${s?.includes("?") ? "&" : "?"}w=${d}&s=${g}`} style=${$(p)}>` : a`<calcite-icon scale=l .icon=${f}></calcite-icon>`}</a>`;
+    return a`<calcite-card .label=${r}>${n}${this.hidePreviewImageAttachmentName && l ? null : a`<span class="item-description" slot=description>${r}</span>`}</calcite-card>`;
   }
 }
 k("arcgis-feature-attachments", R);

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

@@ -6,13 +6,13 @@ import { LitElement as l } from "@arcgis/lumina";
 import { e as o, f as h } from "../../chunks/feature-utils.js";
 import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
 import { renderingSanitizer as g } from "@arcgis/core/applications/Components/sanitizerUtils.js";
-const f = c`.loader-container{display:flex;align-items:center;justify-content:center;padding:0;height:150px}.root{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-normal)}.root h1,.root h2,.root h3,.root h4,.root h5,.root h6{margin:var(--calcite-spacing-sm) 0;line-height:var(--calcite-font-line-height-relative-tight);letter-spacing:0;color:var(--calcite-color-text-1);font-weight:var(--calcite-font-weight-semibold)}.root h1{font-size:var(--calcite-font-size-xxl)}.root h2{font-size:var(--calcite-font-size-xl)}.root h3{font-size:var(--calcite-font-size-lg)}.root h4,.root h5,.root h6{font-size:var(--calcite-font-size)}.description{margin-bottom:var(--calcite-spacing-xs)}.root p{margin:0 0 var(--calcite-spacing-xs);font-size:var(--calcite-font-size)}.root p:last-child{margin-block-end:0}.root img{max-width:100%;max-height:100%;image-orientation:from-image}.root video{max-width:100%;max-height:100%}.root figure{margin:0;padding:0}.root figcaption{display:block;margin:var(--calcite-spacing-xs) 0 0;padding:0;font-size:var(--calcite-font-size-sm);font-style:italic}.root ul,.root ol{margin-block:var(--calcite-spacing-sm)}.root ul:first-child,.root ol:first-child{margin-block-start:0}.root a,.root a:hover,.root a:focus{color:var(--calcite-color-text-link)}`;
-class m extends l {
+const m = c`.loader-container{display:flex;align-items:center;justify-content:center;padding:0;height:150px}.root{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-normal)}.root h1,.root h2,.root h3,.root h4,.root h5,.root h6{margin:var(--calcite-spacing-sm) 0;line-height:var(--calcite-font-line-height-relative-tight);letter-spacing:0;color:var(--calcite-color-text-1);font-weight:var(--calcite-font-weight-semibold)}.root h1{font-size:var(--calcite-font-size-xxl)}.root h2{font-size:var(--calcite-font-size-xl)}.root h3{font-size:var(--calcite-font-size-lg)}.root h4,.root h5,.root h6{font-size:var(--calcite-font-size)}.description{margin-bottom:var(--calcite-spacing-sm)}.root p{margin:0 0 var(--calcite-spacing-sm);font-size:var(--calcite-font-size)}.root p:last-child{margin-block-end:0}.root img{max-width:100%;max-height:100%;image-orientation:from-image}.root video{max-width:100%;max-height:100%}.root figure{margin:0;padding:0}.root figcaption{display:block;margin:var(--calcite-spacing-sm) 0 0;padding:0;font-size:var(--calcite-font-size-sm);font-style:italic}.root ul,.root ol{margin-block:var(--calcite-spacing-sm)}.root ul:first-child,.root ol:first-child{margin-block-start:0}.root a,.root a:hover,.root a:focus{color:var(--calcite-color-text-link)}`;
+class f extends l {
   static {
     this.properties = { _loadingPromise: 16, _created: 16, creator: 1, destroyer: 0, graphic: 0 };
   }
   static {
-    this.styles = f;
+    this.styles = m;
   }
   loaded() {
     this.manager.onLifecycle(() => d(() => this.creator, (t) => {
@@ -52,7 +52,7 @@ class m extends l {
     return t instanceof HTMLElement ? t : typeof t == "string" ? r`<div .innerHTML=${g.sanitize(t) ?? ""} ${s(this._addTargetToAnchors)}></div>` : null;
   }
 }
-n("arcgis-feature-content", m);
+n("arcgis-feature-content", f);
 export {
-  m as ArcgisFeatureContent
+  f as ArcgisFeatureContent
 };

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

@@ -1,30 +1,30 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as T } from "../../chunks/runtime.js";
-import { css as x, html as c } from "lit";
-import { LitElement as y } from "@arcgis/lumina";
-import { watch as k, when as $ } from "@arcgis/core/core/reactiveUtils.js";
-import { a as p } from "../../chunks/maybe.js";
-import { c as v, t as m } from "../../chunks/async-utils.js";
-import { throttle as g } from "lodash-es";
-import I from "@arcgis/core/popup/content/MediaContent.js";
-import w from "@arcgis/core/popup/content/FieldsContent.js";
-import E from "@arcgis/core/popup/content/TextContent.js";
+import { c as _ } from "../../chunks/runtime.js";
+import { css as T, html as l } from "lit";
+import { LitElement as x } from "@arcgis/lumina";
+import { watch as y, when as $ } from "@arcgis/core/core/reactiveUtils.js";
+import { a as u } from "../../chunks/maybe.js";
+import { c as m, t as d } from "../../chunks/async-utils.js";
+import { throttle as v } from "lodash-es";
+import k from "@arcgis/core/popup/content/MediaContent.js";
+import I from "@arcgis/core/popup/content/FieldsContent.js";
+import w from "@arcgis/core/popup/content/TextContent.js";
 import { compileExpression as L } from "@arcgis/core/applications/Components/arcadeFeatureUtils.js";
-import { s as A } from "../../chunks/feature-utils.js";
-const b = x`.loading-container{display:flex;justify-content:center;padding:var(--calcite-spacing-md) 0;width:100%}`, _ = 1;
-class C extends y {
+import { s as E } from "../../chunks/feature-utils.js";
+const A = T`.loading-container{display:flex;justify-content:center;padding:var(--calcite-spacing-md) 0;width:100%}`, g = 1;
+class C extends x {
   constructor() {
-    super(...arguments), this._compileThrottled = g(this._startCompile, _), this._evaluateThrottled = g(this._startEvaluate, _), this.headingLevel = 2;
+    super(...arguments), this._compileThrottled = v(this._startCompile, g), this._evaluateThrottled = v(this._startEvaluate, g), this.headingLevel = 2;
   }
   static {
-    this.properties = { _compileTask: 16, _evaluateTask: 16, values: 0, fieldInfoMap: 0, expressionInfo: 0, graphic: 0, headingLevel: 9, interceptor: 0, location: 0, messages: 0, spatialReference: 0, map: 0, view: 0 };
+    this.properties = { _compileTask: 16, _evaluateTask: 16, values: 0, fieldInfoMap: 0, expressionInfo: 0, expressionInfos: 0, layer: 0, graphic: 0, headingLevel: 9, interceptor: 0, location: 0, messages: 0, spatialReference: 0, map: 0, view: 0 };
   }
   static {
-    this.styles = b;
+    this.styles = A;
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      k(() => [this.expressionInfo, this.graphic], () => this._compileThrottled(), { initial: !0 }),
+      y(() => [this.expressionInfo, this.graphic], () => this._compileThrottled(), { initial: !0 }),
       $(() => {
         if (!this._compileTask?.finished)
           return null;
@@ -48,72 +48,75 @@ class C extends y {
     this._compileThrottled.cancel(), this._evaluateThrottled.cancel();
   }
   _startCompile() {
-    this._evaluateTask = p(this._evaluateTask), this._compileTask = p(this._compileTask), this._compileTask = v(async (t) => {
-      const { expressionInfo: s, graphic: e } = this, i = s?.expression;
-      if (!i || !e)
+    this._evaluateTask = u(this._evaluateTask), this._compileTask = u(this._compileTask), this._compileTask = m(async (t) => {
+      const { expressionInfo: s, graphic: e } = this, a = s?.expression;
+      if (!a || !e)
         return null;
-      const a = await L({
-        expression: i,
+      const n = await L({
+        expression: a,
         graphic: e
       });
-      return m(t), a;
+      return d(t), n;
     });
   }
   _startEvaluate(t) {
-    this._evaluateTask = p(this._evaluateTask), this._evaluateTask = v(async (s) => {
+    this._evaluateTask = u(this._evaluateTask), this._evaluateTask = m(async (s) => {
       const { graphic: e } = this;
       if (!t || !e)
         return null;
-      const { interceptor: i, spatialReference: a, map: r, location: l, view: o } = this, h = await t.evaluate({
+      const { interceptor: a, spatialReference: n, map: i, location: r, view: o } = this, c = await t.evaluate({
         graphic: e,
-        interceptor: i,
-        location: l,
-        map: r,
+        interceptor: a,
+        location: r,
+        map: i,
         options: { signal: s },
-        spatialReference: a,
+        spatialReference: n,
         view: o
       });
-      m(s);
-      const f = h && "castAsJsonAsync" in h && typeof h.castAsJsonAsync == "function" ? h : null;
+      d(s);
+      const f = c && "castAsJsonAsync" in c && typeof c.castAsJsonAsync == "function" ? c : null;
       if (!f)
         return null;
-      const d = await f.castAsJsonAsync(s);
-      m(s);
-      const u = d?.type, n = u === "media" ? I.fromJSON(d) : u === "text" ? E.fromJSON(d) : u === "fields" ? w.fromJSON(d) : null;
-      return !n || n.type === "media" && !n.mediaInfos || n.type === "fields" && !n.fieldInfos || n.type === "text" && !n.text ? null : n;
+      const h = await f.castAsJsonAsync(s);
+      d(s);
+      const p = h?.type;
+      return p === "media" ? k.fromJSON(h) : p === "text" ? w.fromJSON(h) : p === "fields" ? I.fromJSON(h) : null;
     });
   }
   render() {
     const t = !this._compileTask?.finished || !this._evaluateTask?.finished;
-    return c`<div class="root">${t ? this._renderLoading() : this._evaluateTask?.value ? this._renderContent() : null}</div>`;
+    return l`<div class="root">${t ? this._renderLoading() : this._evaluateTask?.value ? this._renderContent() : null}</div>`;
   }
   _renderContent() {
-    const { values: t, fieldInfoMap: s } = this, e = this._evaluateTask?.value, i = e?.type, a = { ...t, ...e?.attributes };
-    if (!i)
+    const { values: t, fieldInfoMap: s } = this, e = this._evaluateTask?.value, a = e?.type, n = { ...t, ...e?.attributes };
+    if (!a)
       return null;
-    if (i === "text") {
-      const r = A({
-        values: a,
+    if (a === "text") {
+      const { text: i } = e;
+      if (!i)
+        return null;
+      const r = E({
+        values: n,
         fieldInfoMap: s ?? /* @__PURE__ */ new Map(),
-        globalValues: a,
+        globalValues: n,
         layer: void 0,
-        text: e.text
+        text: i
       });
-      return c`<arcgis-feature-content .creator=${r} .graphic=${this.graphic}></arcgis-feature-content>`;
-    } else if (i === "media") {
-      const { title: r, description: l, mediaInfos: o } = e;
-      return o?.length ? c`<arcgis-feature-media .heading=${r ?? ""} .values=${a} .formattedValues=${a} .description=${l ?? ""} .mediaInfos=${o} .messages=${this.messages} .headingLevel=${this.headingLevel}></arcgis-feature-media>` : null;
-    } else if (i === "fields") {
-      const { title: r, description: l, fieldInfos: o } = e;
-      return o?.length ? c`<arcgis-feature-fields .fieldInfos=${o} .heading=${r ?? ""} .values=${a} .description=${l ?? ""} .headingLevel=${this.headingLevel} .messages=${this.messages}></arcgis-feature-fields>` : null;
+      return l`<arcgis-feature-content .creator=${r} .graphic=${this.graphic}></arcgis-feature-content>`;
+    } else if (a === "media") {
+      const { title: i, description: r, mediaInfos: o } = e;
+      return !o?.length && !i && !r ? null : l`<arcgis-feature-media .heading=${i ?? ""} .values=${n} .formattedValues=${n} .description=${r ?? ""} .mediaInfos=${o ?? []} .messages=${this.messages} .headingLevel=${this.headingLevel}></arcgis-feature-media>`;
+    } else if (a === "fields") {
+      const { title: i, description: r, fieldInfos: o } = e;
+      return !o?.length && !i && !r ? null : l`<arcgis-feature-fields .fieldInfos=${o ?? []} .heading=${i ?? ""} .values=${n} .graphic=${this.graphic} .layer=${this.layer} .isContentFieldInfos=${!!o} .description=${r ?? ""} .headingLevel=${this.headingLevel} .messages=${this.messages} .expressionInfos=${this.expressionInfos}></arcgis-feature-fields>`;
     }
     return null;
   }
   _renderLoading() {
-    return c`<div class="loading-container"><calcite-loader inline label></calcite-loader></div>`;
+    return l`<div class="loading-container"><calcite-loader inline label></calcite-loader></div>`;
   }
 }
-T("arcgis-feature-expression", C);
+_("arcgis-feature-expression", C);
 export {
   C as ArcgisFeatureExpression
 };

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

@@ -127,7 +127,7 @@ export abstract class ArcgisFeatureForm extends LitElement {
    *
    * @default 2
    * @since 4.20
-   * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+   * @see [Heading Elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
    * @example
    * // form title will render as an <h3>
    * // group element labels will render as an <h4>

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
 };