@arcgis/map-components 6.0.0-next.2 → 6.0.0-next.20

package/dist/components/arcgis-area-measurement-3d/customElement.d.ts

@@ -144,7 +144,9 @@ export abstract class ArcgisAreaMeasurement3d extends LitElement {
    */
   accessor autoDestroyDisabled: boolean;
   /**
-   * If true, all unit-reset buttons will be hidden. Unit selection dropdowns remain available, but users cannot reset units to their defaults using the UI.
+   * If true, hides all unit-reset buttons. Unit-selection dropdowns remain available.
+   *
+   * Resetting a unit clears the corresponding overrides on the component and its analysis. The component then uses the corresponding value from [ViewOptions.displayUnits](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/#displayUnits), or [ViewOptions.inputUnits](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/#inputUnits) for input units, when that option is set and its resolved unit is included in the component's available units. Otherwise, it uses its default unit if available, or the first available unit.
    *
    * @default false
    * @since 5.2
@@ -251,15 +253,18 @@ export abstract class ArcgisAreaMeasurement3d extends LitElement {
    *
    * When no unit is explicitly set on the component or its analysis, this property uses the area unit configured in the view through
    * [view.options.displayUnits.area](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/#displayUnits).
+   * If that option is unset or unavailable in [unitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-3d/#unitOptions),
+   * the component uses its default unit if available, or the first available unit.
    * This property overrides the area unit on this component's analysis without changing the units configured in the view.
+   * The reset button clears both overrides and resumes this inheritance and fallback behavior.
    */
   accessor unit: SystemOrAreaUnit;
   /**
    * List of available units and unit systems (imperial, metric) that are shown in the component's dropdown.
    * By default, the following units are included: `metric`, `imperial`, `square-inches`, `square-feet`, `square-us-feet`, `square-yards`, `square-miles`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.
-   * If the unit inherited from the view through
+   * When neither the component nor its analysis has an explicit unit, the unit inherited from
    * [view.options.displayUnits.area](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/#displayUnits)
-   * is not listed in [unitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-3d/#unitOptions), the component checks whether its default unit is listed there.
+   * is used if listed in [unitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-3d/#unitOptions). Otherwise, the component checks whether its default unit is listed there.
    * If it is, the component uses that default. If neither unit is listed, it uses the first entry in
    * [unitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-area-measurement-3d/#unitOptions).
    */

package/dist/components/arcgis-attachment-detail-view/customElement.d.ts

@@ -0,0 +1,200 @@
+/// <reference path="../../index.d.ts" />
+import type AttachmentInfo from "@arcgis/core/rest/query/support/AttachmentInfo.js";
+import type AttachmentElementInput from "@arcgis/core/widgets/BatchAttributeForm/inputs/AttachmentElementInput.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { AttachmentElementInputLike as PreviewAttachmentInput } from "../arcgis-attachment-preview/customElement.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * Displays details and actions for an attachment.
+ *
+ * @internal
+ */
+export abstract class ArcgisAttachmentDetailView extends LitElement {
+  /** @internal */
+  protected _messages: {
+      componentLabel: string;
+      components: { attachments: {
+          "attachment-validation-view": { validations: {
+              errorFileUnsupported: string;
+              maximumAudioLength: string;
+              maximumImageSize: string;
+              maximumFileSize: string;
+              maximumNumberOfFiles: string;
+              maximumVideoLength: string;
+              minimumNumberOfFiles: string;
+          }; };
+          "add-attachment-view": {
+              captureMethodNotSupported: string;
+              fileToBeReplaced: string;
+              heading: string;
+          };
+          "attachment-preview": { noPreview: string; };
+          "attachment-detail-view": {
+              maximize: string;
+              download: string;
+              replace: string;
+              fileName: string;
+              nameCannotBeNull: string;
+              size: string;
+              type: string;
+              reset: string;
+              imageDescription: string;
+          };
+          thumbnail: { fileTypes: {
+              "file-cad": string;
+              "file-code": string;
+              "file-csv": string;
+              "file-excel": string;
+              "file-gpx": string;
+              "file-pdf": string;
+              "file-ppt": string;
+              "file-text": string;
+              "file-word": string;
+              "file-zip": string;
+              file: string;
+              image: string;
+              sound: string;
+              video: string;
+          }; };
+      }; };
+      units: { bytes: {
+          B: string;
+          kB: string;
+          MB: string;
+          GB: string;
+          TB: string;
+      }; };
+      differentValuesPlaceholder: string;
+      empty: string;
+  } & T9nMeta<{
+      componentLabel: string;
+      components: { attachments: {
+          "attachment-validation-view": { validations: {
+              errorFileUnsupported: string;
+              maximumAudioLength: string;
+              maximumImageSize: string;
+              maximumFileSize: string;
+              maximumNumberOfFiles: string;
+              maximumVideoLength: string;
+              minimumNumberOfFiles: string;
+          }; };
+          "add-attachment-view": {
+              captureMethodNotSupported: string;
+              fileToBeReplaced: string;
+              heading: string;
+          };
+          "attachment-preview": { noPreview: string; };
+          "attachment-detail-view": {
+              maximize: string;
+              download: string;
+              replace: string;
+              fileName: string;
+              nameCannotBeNull: string;
+              size: string;
+              type: string;
+              reset: string;
+              imageDescription: string;
+          };
+          thumbnail: { fileTypes: {
+              "file-cad": string;
+              "file-code": string;
+              "file-csv": string;
+              "file-excel": string;
+              "file-gpx": string;
+              "file-pdf": string;
+              "file-ppt": string;
+              "file-text": string;
+              "file-word": string;
+              "file-zip": string;
+              file: string;
+              image: string;
+              sound: string;
+              video: string;
+          }; };
+      }; };
+      units: { bytes: {
+          B: string;
+          kB: string;
+          MB: string;
+          GB: string;
+          TB: string;
+      }; };
+      differentValuesPlaceholder: string;
+      empty: string;
+  }>;
+  accessor attachment: AttachmentInfo | undefined;
+  /** @default false */
+  accessor dialogOpen: boolean;
+  /** @default false */
+  accessor formDisabled: boolean;
+  accessor input: AttachmentElementInputLike | undefined;
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      components?: { attachments?: {
+          "attachment-validation-view"?: { validations?: {
+              errorFileUnsupported?: string | undefined;
+              maximumAudioLength?: string | undefined;
+              maximumImageSize?: string | undefined;
+              maximumFileSize?: string | undefined;
+              maximumNumberOfFiles?: string | undefined;
+              maximumVideoLength?: string | undefined;
+              minimumNumberOfFiles?: string | undefined;
+          } | undefined; } | undefined;
+          "add-attachment-view"?: {
+              captureMethodNotSupported?: string | undefined;
+              fileToBeReplaced?: string | undefined;
+              heading?: string | undefined;
+          } | undefined;
+          "attachment-preview"?: { noPreview?: string | undefined; } | undefined;
+          "attachment-detail-view"?: {
+              maximize?: string | undefined;
+              download?: string | undefined;
+              replace?: string | undefined;
+              fileName?: string | undefined;
+              nameCannotBeNull?: string | undefined;
+              size?: string | undefined;
+              type?: string | undefined;
+              reset?: string | undefined;
+              imageDescription?: string | undefined;
+          } | undefined;
+          thumbnail?: { fileTypes?: {
+              "file-cad"?: string | undefined;
+              "file-code"?: string | undefined;
+              "file-csv"?: string | undefined;
+              "file-excel"?: string | undefined;
+              "file-gpx"?: string | undefined;
+              "file-pdf"?: string | undefined;
+              "file-ppt"?: string | undefined;
+              "file-text"?: string | undefined;
+              "file-word"?: string | undefined;
+              "file-zip"?: string | undefined;
+              file?: string | undefined;
+              image?: string | undefined;
+              sound?: string | undefined;
+              video?: string | undefined;
+          } | undefined; } | undefined;
+      } | undefined; } | undefined;
+      units?: { bytes?: {
+          B?: string | undefined;
+          kB?: string | undefined;
+          MB?: string | undefined;
+          GB?: string | undefined;
+          TB?: string | undefined;
+      } | undefined; } | undefined;
+      differentValuesPlaceholder?: string | undefined;
+      empty?: string | undefined;
+  };
+  /** @internal */
+  readonly arcgisInternalAttachmentRename: import("@arcgis/lumina").TargetedEvent<this, { name: string; }>;
+  /** @internal */
+  readonly arcgisInternalAttachmentReplaceStart: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisInternalAttachmentRename: ArcgisAttachmentDetailView["arcgisInternalAttachmentRename"]["detail"];
+    arcgisInternalAttachmentReplaceStart: ArcgisAttachmentDetailView["arcgisInternalAttachmentReplaceStart"]["detail"];
+  };
+}
+
+/** @internal */
+export type AttachmentElementInputLike = Pick<AttachmentElementInput, "allowUserRename" | "canUploadFiles" | "getAttachmentEditState">
+  & PreviewAttachmentInput;

package/dist/components/arcgis-attachment-detail-view/customElement.js

@@ -0,0 +1,126 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
+import { c as v } from "../../chunks/runtime.js";
+import { ref as f } from "lit/directives/ref.js";
+import { downloadBlobAsFile as w } from "@arcgis/core/core/urlUtils.js";
+import { watch as c } from "@arcgis/core/core/reactiveUtils.js";
+import { getAttachmentFilenameParts as b } from "@arcgis/core/widgets/BatchAttributeForm/attachmentUtils.js";
+import { SharedCacheStore as $, sharedCache as _ } from "@arcgis/common-components";
+import { LitElement as x, createEvent as m, nothing as o, safeStyleMap as P } from "@arcgis/lumina";
+import { css as y, html as n } from "lit";
+import { u as z } from "../../chunks/useT9n.js";
+import { f as D } from "../../chunks/formattingUtils.js";
+import { g as E } from "../../chunks/attachment-utils.js";
+const A = {
+  primary: "Exif IFD0"
+}, I = {
+  primary: {
+    // A description baked into the image. Apple Photos/Camera exposes this as 'Add a caption'
+    description: "Image Description"
+  }
+};
+function O(l) {
+  if (l.exifInfo?.length)
+    return l.exifInfo.find(({ name: e }) => e === A.primary)?.tags?.find(({ name: e }) => e === I.primary.description)?.value;
+}
+const N = y`.container{display:flex;flex-direction:column;gap:var(--calcite-space-md)}.button-group{display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--calcite-space-xs)}@media(forced-colors:active){calcite-label{font-weight:var(--calcite-font-weight-bold)}}.metadata-content{word-break:break-word;word-wrap:break-word;line-height:var(--calcite-font-line-height-relative-snug);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-regular);font-style:normal}.preview-placeholder{border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);box-sizing:border-box;border-radius:var(--calcite-corner-radius-sm);background-color:var(--calcite-color-surface-2)}`;
+class M extends x {
+  constructor() {
+    super(...arguments), this.#e = new $(), this.#t = new ResizeObserver(([e]) => {
+      if (!e || this.dialogOpen)
+        return;
+      const { height: i, width: t } = e.contentRect;
+      if (i === 0 || t === 0)
+        return;
+      const a = this._attachmentPreviewDimensions;
+      (a?.height !== i || a.width !== t) && (this._attachmentPreviewDimensions = { height: i, width: t });
+    }), this._messages = z({ blocking: !0, name: "feature-form-next" }), this._hasPreviewError = !1, this.formDisabled = !1, this.dialogOpen = !1, this.arcgisInternalAttachmentRename = m(), this.arcgisInternalAttachmentReplaceStart = m();
+  }
+  static {
+    this.properties = { _hasPreviewError: 16, _formattedSize: 16, _imageDescription: 16, _localizedType: 16, _attachmentPreviewDimensions: 16, attachment: 0, input: 0, messageOverrides: 0, formDisabled: 5, dialogOpen: 5 };
+  }
+  static {
+    this.styles = N;
+  }
+  #e;
+  #t;
+  #i;
+  get _canMaximize() {
+    const e = this.attachment?.contentType;
+    return !!e && (e.startsWith("video") || e.startsWith("audio") || e.startsWith("image"));
+  }
+  get _maximizeDisabled() {
+    return !this.input || this._hasPreviewError;
+  }
+  get _ownMessages() {
+    return this._messages.components.attachments["attachment-detail-view"];
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      c(() => this.attachment?.url, () => this._hasPreviewError = !1),
+      c(() => this.attachment ? O(this.attachment) : void 0, (e) => this._imageDescription = e, { initial: !0 }),
+      c(() => ({ messageOverrides: this.messageOverrides, size: this.attachment?.size }), ({ size: e }) => this._formattedSize = e == null ? void 0 : D(this._messages.units, e), { initial: !0 }),
+      c(() => ({ contentType: this.attachment?.contentType, messageOverrides: this.messageOverrides }), ({ contentType: e }) => this._localizedType = e ? this._messages.components.attachments.thumbnail.fileTypes[E(e)] : void 0, { initial: !0 })
+    ]);
+  }
+  willUpdate(e) {
+    e.has("dialogOpen") && this.#e.moveAllToCache();
+  }
+  #a() {
+    this.dialogOpen = !0;
+  }
+  async #n() {
+    const e = this.attachment;
+    if (!e?.url)
+      return;
+    const t = await (await fetch(e.url)).blob();
+    w(t, e.name);
+  }
+  #s() {
+    this.arcgisInternalAttachmentReplaceStart.emit();
+  }
+  #r() {
+    this.dialogOpen = !1;
+  }
+  #c(e) {
+    this.attachment && this.arcgisInternalAttachmentRename.emit({ name: e });
+  }
+  #o() {
+    this._hasPreviewError = !0;
+  }
+  #l(e) {
+    this.#i && this.#t.unobserve(this.#i), this.#i = e, e && this.#t.observe(e);
+  }
+  _resetName() {
+    if (!this.input || !this.attachment)
+      return;
+    const e = this.input.getAttachmentEditState(this.attachment).initialName;
+    e != null && this.arcgisInternalAttachmentRename.emit({ name: e });
+  }
+  render() {
+    const { attachment: e, input: i, _ownMessages: t, _formattedSize: a, _imageDescription: s, _localizedType: r } = this, h = e && i?.getAttachmentEditState(e).isReplaced;
+    return n`<div class="container" data-testid=attachment-detail-view-root>${this._renderInlineAttachmentPreview()}<div class="button-group">${this._canMaximize ? n`<calcite-button icon-start=expand kind=neutral appearance=outline .disabled=${this._maximizeDisabled} @click=${this.#a} title=${t.maximize ?? o} .label=${t.maximize}></calcite-button>` : void 0}${h ? void 0 : n`<calcite-button icon-start=download kind=neutral @click=${this.#n} appearance=outline .disabled=${!e || !i} title=${t.download ?? o} .label=${t.download}></calcite-button>`}<calcite-button icon-start=upload-to @click=${this.#s} kind=neutral appearance=outline .disabled=${this.formDisabled || !this.input?.canUploadFiles} title=${t.replace ?? o} .label=${t.replace}></calcite-button></div><div>${s ? this._renderMetadataPlain(t.imageDescription, s) : void 0}${i?.allowUserRename ? this._renderNameEntry() : this._renderMetadataPlain(t.fileName, e?.name ?? "")}${a !== void 0 ? this._renderMetadataPlain(t.size, a) : void 0}${r !== void 0 ? this._renderMetadataPlain(t.type, r) : void 0}</div><calcite-dialog data-testid=attachment-dialog .heading=${this.attachment?.name} .open=${this.dialogOpen} modal placement=cover @calciteDialogClose=${this.#r}>${this.dialogOpen ? this._renderAttachmentPreview() : void 0}</calcite-dialog></div>`;
+  }
+  _renderInlineAttachmentPreview() {
+    if (!this.dialogOpen)
+      return n`<div ${f(this.#l)}>${this._renderAttachmentPreview()}</div>`;
+    const e = this._attachmentPreviewDimensions;
+    return e ? n`<div class="preview-placeholder" style=${P({ height: `${e.height}px`, width: `${e.width}px` })}></div>` : void 0;
+  }
+  _renderAttachmentPreview() {
+    return _(this.#e, this, n`<arcgis-attachment-preview data-testid=attachment-preview .attachment=${this.attachment} .input=${this.input} .messageOverrides=${this._messages} @arcgisInternalAttachmentMediaError=${this.#o}></arcgis-attachment-preview>`);
+  }
+  _renderMetadataPlain(e, i) {
+    return n`<calcite-label>${e}<div class="metadata-content">${i}</div></calcite-label>`;
+  }
+  _renderNameEntry() {
+    const { attachment: e, input: i, _ownMessages: t, formDisabled: a } = this;
+    if (!e || !i)
+      return "";
+    const { initialName: s, isRenamed: r } = i.getAttachmentEditState(e), { baseName: h, extension: p } = b(e.name ?? ""), u = a || s == null || !r, d = !a && e.name.trim().length === 0;
+    return n`<calcite-label>${t.fileName}<calcite-input .disabled=${a} type=text .label=${t.fileName} data-testid=file-name-input .status=${d ? "invalid" : "idle"} .value=${h} .suffixText=${p} alignment=start @calciteInputInput=${({ currentTarget: g }) => this.#c(g.value)}><calcite-action icon=reset slot=action .disabled=${u} data-testid=reset-name-button @click=${this._resetName} title=${t.reset ?? o} .text=${t.reset}></calcite-action></calcite-input>${d ? n`<calcite-input-message icon status=invalid>${t.nameCannotBeNull}</calcite-input-message>` : void 0}</calcite-label>`;
+  }
+}
+v("arcgis-attachment-detail-view", M);
+export {
+  M as ArcgisAttachmentDetailView
+};

package/dist/components/arcgis-attachment-detail-view/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-attachment-detail-view/index.js

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-dialog";
+import "../arcgis-attachment-preview/index.js";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-input";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-input-message";
+export * from "./customElement.js";

package/dist/components/arcgis-attachment-preview/customElement.d.ts

@@ -29,21 +29,32 @@ export abstract class ArcgisAttachmentPreview extends LitElement {
               heading: string;
           };
           "attachment-preview": { noPreview: string; };
+          "attachment-detail-view": {
+              maximize: string;
+              download: string;
+              replace: string;
+              fileName: string;
+              nameCannotBeNull: string;
+              size: string;
+              type: string;
+              reset: string;
+              imageDescription: string;
+          };
           thumbnail: { fileTypes: {
               "file-cad": string;
               "file-code": string;
               "file-csv": string;
               "file-excel": string;
               "file-gpx": string;
-              "file-image": string;
               "file-pdf": string;
               "file-ppt": string;
-              "file-sound": string;
               "file-text": string;
-              "file-video": string;
               "file-word": string;
               "file-zip": string;
               file: string;
+              image: string;
+              sound: string;
+              video: string;
           }; };
       }; };
       units: { bytes: {
@@ -73,21 +84,32 @@ export abstract class ArcgisAttachmentPreview extends LitElement {
               heading: string;
           };
           "attachment-preview": { noPreview: string; };
+          "attachment-detail-view": {
+              maximize: string;
+              download: string;
+              replace: string;
+              fileName: string;
+              nameCannotBeNull: string;
+              size: string;
+              type: string;
+              reset: string;
+              imageDescription: string;
+          };
           thumbnail: { fileTypes: {
               "file-cad": string;
               "file-code": string;
               "file-csv": string;
               "file-excel": string;
               "file-gpx": string;
-              "file-image": string;
               "file-pdf": string;
               "file-ppt": string;
-              "file-sound": string;
               "file-text": string;
-              "file-video": string;
               "file-word": string;
               "file-zip": string;
               file: string;
+              image: string;
+              sound: string;
+              video: string;
           }; };
       }; };
       units: { bytes: {
@@ -120,21 +142,32 @@ export abstract class ArcgisAttachmentPreview extends LitElement {
               heading?: string | undefined;
           } | undefined;
           "attachment-preview"?: { noPreview?: string | undefined; } | undefined;
+          "attachment-detail-view"?: {
+              maximize?: string | undefined;
+              download?: string | undefined;
+              replace?: string | undefined;
+              fileName?: string | undefined;
+              nameCannotBeNull?: string | undefined;
+              size?: string | undefined;
+              type?: string | undefined;
+              reset?: string | undefined;
+              imageDescription?: string | undefined;
+          } | undefined;
           thumbnail?: { fileTypes?: {
               "file-cad"?: string | undefined;
               "file-code"?: string | undefined;
               "file-csv"?: string | undefined;
               "file-excel"?: string | undefined;
               "file-gpx"?: string | undefined;
-              "file-image"?: string | undefined;
               "file-pdf"?: string | undefined;
               "file-ppt"?: string | undefined;
-              "file-sound"?: string | undefined;
               "file-text"?: string | undefined;
-              "file-video"?: string | undefined;
               "file-word"?: string | undefined;
               "file-zip"?: string | undefined;
               file?: string | undefined;
+              image?: string | undefined;
+              sound?: string | undefined;
+              video?: string | undefined;
           } | undefined; } | undefined;
       } | undefined; } | undefined;
       units?: { bytes?: {
@@ -148,6 +181,11 @@ export abstract class ArcgisAttachmentPreview extends LitElement {
       empty?: string | undefined;
   };
   pause(): void;
+  /** @internal */
+  readonly arcgisInternalAttachmentMediaError: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisInternalAttachmentMediaError: ArcgisAttachmentPreview["arcgisInternalAttachmentMediaError"]["detail"];
+  };
 }
 
 /** @internal */

package/dist/components/arcgis-attachment-preview/customElement.js

@@ -2,18 +2,18 @@
 import { c } from "../../chunks/runtime.js";
 import { css as l, html as r } from "lit";
 import { ref as n } from "lit/directives/ref.js";
-import { LitElement as h, nothing as s, live as o } from "@arcgis/lumina";
-import { u as d } from "../../chunks/useT9n.js";
-const m = l`:host{display:contents;color:var(--calcite-color-text-1)}.lightbox{gap:var(--calcite-space-sm);border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);box-sizing:border-box;border-radius:var(--calcite-corner-radius-sm);background-color:var(--calcite-color-surface-2);padding:var(--calcite-space-sm);flex-direction:column;justify-content:center;align-items:center;inline-size:100%;display:flex;max-block-size:100%}.thumbnail-container{display:contents}img{object-fit:contain;width:100%;max-block-size:100%;max-inline-size:100%}audio,video{object-fit:contain;width:100%;overflow:clip;max-block-size:100%;max-inline-size:100%}`;
-class u extends h {
+import { LitElement as h, createEvent as d, nothing as s, live as o } from "@arcgis/lumina";
+import { u as m } from "../../chunks/useT9n.js";
+const u = l`:host{display:contents;color:var(--calcite-color-text-1)}.lightbox{gap:var(--calcite-space-sm);border:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);box-sizing:border-box;border-radius:var(--calcite-corner-radius-sm);background-color:var(--calcite-color-surface-2);padding:var(--calcite-space-sm);flex-direction:column;justify-content:center;align-items:center;inline-size:100%;display:flex;max-block-size:100%}.thumbnail-container{display:contents}img{object-fit:contain;width:100%;max-block-size:100%;max-inline-size:100%}audio,video{object-fit:contain;width:100%;overflow:clip;max-block-size:100%;max-inline-size:100%}`;
+class p extends h {
   constructor() {
-    super(...arguments), this._messages = d({ blocking: !0, name: "feature-form-next" }), this._attachment = void 0, this._input = void 0, this._hasError = !1, this.previewType = "none", this.url = void 0;
+    super(...arguments), this._messages = m({ blocking: !0, name: "feature-form-next" }), this._attachment = void 0, this._input = void 0, this._hasError = !1, this.previewType = "none", this.url = void 0, this.arcgisInternalAttachmentMediaError = d();
   }
   static {
     this.properties = { _hasError: 16, previewType: 16, url: 16, attachment: 0, input: 0, messageOverrides: 0 };
   }
   static {
-    this.styles = m;
+    this.styles = u;
   }
   get _altText() {
     const { attachment: e, input: t } = this;
@@ -39,7 +39,9 @@ class u extends h {
   }
   disconnectedCallback() {
     const e = this._mediaElement?.deref();
-    super.disconnectedCallback(), this._cleanupMediaElement(e), this.previewType = "none";
+    super.disconnectedCallback(), queueMicrotask(() => {
+      this.isConnected || (this._cleanupMediaElement(e), this.previewType = "none");
+    });
   }
   #e() {
     this._hasError = !1;
@@ -63,7 +65,7 @@ class u extends h {
     }
   }
   _handlePreviewError(e) {
-    e.stopPropagation(), this._hasError = !0;
+    e.stopPropagation(), this._hasError = !0, this.arcgisInternalAttachmentMediaError.emit();
   }
   _cleanupMediaElement(e) {
     e?.pause(), e?.removeAttribute("src"), e?.load(), this._mediaElement = void 0;
@@ -108,7 +110,7 @@ class u extends h {
     return r`<div class="lightbox">${a}</div>`;
   }
 }
-c("arcgis-attachment-preview", u);
+c("arcgis-attachment-preview", p);
 export {
-  u as ArcgisAttachmentPreview
+  p as ArcgisAttachmentPreview
 };

package/dist/components/arcgis-attachment-thumbnail/customElement.d.ts

@@ -32,21 +32,32 @@ export abstract class ArcgisAttachmentThumbnail extends LitElement {
               heading: string;
           };
           "attachment-preview": { noPreview: string; };
+          "attachment-detail-view": {
+              maximize: string;
+              download: string;
+              replace: string;
+              fileName: string;
+              nameCannotBeNull: string;
+              size: string;
+              type: string;
+              reset: string;
+              imageDescription: string;
+          };
           thumbnail: { fileTypes: {
               "file-cad": string;
               "file-code": string;
               "file-csv": string;
               "file-excel": string;
               "file-gpx": string;
-              "file-image": string;
               "file-pdf": string;
               "file-ppt": string;
-              "file-sound": string;
               "file-text": string;
-              "file-video": string;
               "file-word": string;
               "file-zip": string;
               file: string;
+              image: string;
+              sound: string;
+              video: string;
           }; };
       }; };
       units: { bytes: {
@@ -76,21 +87,32 @@ export abstract class ArcgisAttachmentThumbnail extends LitElement {
               heading: string;
           };
           "attachment-preview": { noPreview: string; };
+          "attachment-detail-view": {
+              maximize: string;
+              download: string;
+              replace: string;
+              fileName: string;
+              nameCannotBeNull: string;
+              size: string;
+              type: string;
+              reset: string;
+              imageDescription: string;
+          };
           thumbnail: { fileTypes: {
               "file-cad": string;
               "file-code": string;
               "file-csv": string;
               "file-excel": string;
               "file-gpx": string;
-              "file-image": string;
               "file-pdf": string;
               "file-ppt": string;
-              "file-sound": string;
               "file-text": string;
-              "file-video": string;
               "file-word": string;
               "file-zip": string;
               file: string;
+              image: string;
+              sound: string;
+              video: string;
           }; };
       }; };
       units: { bytes: {
@@ -129,21 +151,32 @@ export abstract class ArcgisAttachmentThumbnail extends LitElement {
               heading?: string | undefined;
           } | undefined;
           "attachment-preview"?: { noPreview?: string | undefined; } | undefined;
+          "attachment-detail-view"?: {
+              maximize?: string | undefined;
+              download?: string | undefined;
+              replace?: string | undefined;
+              fileName?: string | undefined;
+              nameCannotBeNull?: string | undefined;
+              size?: string | undefined;
+              type?: string | undefined;
+              reset?: string | undefined;
+              imageDescription?: string | undefined;
+          } | undefined;
           thumbnail?: { fileTypes?: {
               "file-cad"?: string | undefined;
               "file-code"?: string | undefined;
               "file-csv"?: string | undefined;
               "file-excel"?: string | undefined;
               "file-gpx"?: string | undefined;
-              "file-image"?: string | undefined;
               "file-pdf"?: string | undefined;
               "file-ppt"?: string | undefined;
-              "file-sound"?: string | undefined;
               "file-text"?: string | undefined;
-              "file-video"?: string | undefined;
               "file-word"?: string | undefined;
               "file-zip"?: string | undefined;
               file?: string | undefined;
+              image?: string | undefined;
+              sound?: string | undefined;
+              video?: string | undefined;
           } | undefined; } | undefined;
       } | undefined; } | undefined;
       units?: { bytes?: {