@arcgis/map-components/dist/components/arcgis-feature-attachments/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as k } from "../../chunks/runtime.js";
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 _ } 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";
}
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 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, 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, hidePreviewImageAttachmentName: 5 };
  }
  static {
    this.styles = C;
  }
  get _supportsTypeWildcard() {
    const { graphic: e } = this;
    if (!e)
      return !1;
    const t = u(e);
    return t?.loaded && "capabilities" in t && t.capabilities && "attachment" in t.capabilities && t.capabilities.attachment && "supportsResize" in t.capabilities.attachment && t.capabilities.attachment.supportsTypeWildcard || !1;
  }
  get effectiveDisplayType() {
    const { displayType: e } = this;
    return !e || e === "auto" ? this.supportsResizeAttachments ? "preview" : "list" : e;
  }
  get supportsResizeAttachments() {
    const { graphic: e } = this;
    if (!e)
      return !1;
    const t = u(e);
    return t?.loaded && "capabilities" in t && t.capabilities && "attachment" in t.capabilities && t.capabilities.attachment && "supportsResize" in t.capabilities.attachment && t.capabilities.attachment.supportsResize || !1;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      _(() => this.graphic, () => this.graphicChanged(), { initial: !0 })
    ]);
  }
  async getAttachments() {
    const { _attachmentLayer: e, _attachmentInfos: t, orderByFields: o, attachmentTypes: m, attachmentKeywords: s, _supportsTypeWildcard: g } = this;
    if (!e || typeof e.queryAttachments != "function")
      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: r,
      attachmentTypes: g ? m?.filter(Boolean).map((n) => `${n}/*`) : void 0,
      keywords: s
    }), 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);
    this._attachmentLayer = t ? t.type === "scene" && t.associatedLayer != null ? t.associatedLayer : t : null;
  }
  graphicChanged() {
    this.graphic && (this.setAttachmentLayer(), this.getAttachments().catch(() => this._attachmentInfos.destroyAll()));
  }
  getCSSTransform(e) {
    const { orientationInfo: t } = e;
    return !this._supportsImageOrientation && t ? [
      t.rotation ? `rotate(${t.rotation}deg)` : "",
      t.mirrored ? "scaleX(-1)" : ""
    ].join(" ") : "";
  }
  render() {
    return a`<div class="root" .hidden=${!(this.getAttachmentsPromise || this._attachmentInfos.length > 0)}><arcgis-feature-element-info .heading=${this.heading} .description=${this.description} .headingLevel=${this.headingLevel}></arcgis-feature-element-info>${this.renderAttachments()}</div>`;
  }
  renderAttachmentsList(e) {
    return a`<calcite-list .loading=${!!this.getAttachmentsPromise} .label=${this.messages?.componentLabel ?? ""} interaction-mode=static selection-mode=none>${e.toArray().filter(Boolean).map((t) => this.renderAttachmentListItem(t))}</calcite-list>`;
  }
  renderAttachmentsPreview(e) {
    return a`<calcite-card-group .label=${this.messages?.componentLabel ?? ""}>${this.getAttachmentsPromise ? a`<calcite-card loading></calcite-card>` : e.toArray().filter(Boolean).map((t) => this.renderAttachmentPreviewItem(t))}</calcite-card-group>`;
  }
  renderAttachments() {
    const { effectiveDisplayType: e, _attachmentInfos: t } = this;
    return e === "preview" ? this.renderAttachmentsPreview(t) : this.renderAttachmentsList(t);
  }
  renderAttachmentListItem(e) {
    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: 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);
export {
  R as ArcgisFeatureAttachments
};