@arcgis/map-components 5.2.0-next.114 → 5.2.0-next.115

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

@@ -4,17 +4,17 @@ import { css as I, html as a } from "lit";
 import _ from "@arcgis/core/rest/query/support/AttachmentInfo.js";
 import L from "@arcgis/core/rest/support/AttachmentQuery.js";
 import z from "@arcgis/core/core/Collection.js";
-import b from "@arcgis/core/core/Error.js";
-import { LitElement as S, nothing as p, safeClassMap as w, safeStyleMap as v } from "@arcgis/lumina";
+import A from "@arcgis/core/core/Error.js";
+import { LitElement as S, nothing as u, safeClassMap as $, safeStyleMap as w } from "@arcgis/lumina";
 import { bypassReadOnly as P } from "@arcgis/lumina/controllers";
-import { classes as A } from "@arcgis/toolkit/dom";
-import { g as u } from "../../chunks/feature-utils.js";
+import { classes as v } from "@arcgis/toolkit/dom";
+import { g as b } from "../../chunks/feature-utils.js";
 import { watch as C } from "@arcgis/core/core/reactiveUtils.js";
-function $(i) {
+function y(i) {
   const t = i.toLowerCase();
   return t === "image/bmp" || t === "image/emf" || t === "image/exif" || t === "image/gif" || t === "image/x-icon" || t === "image/jpeg" || t === "image/png" || t === "image/tiff" || t === "image/x-wmf";
 }
-function y(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 j = I`:host([empty]){display:none}.item-link{display:flex;flex-grow:1;color:var(--calcite-color-text-3)}.item-link:visited,.item-link:hover,.item-link:focus-visible,.item-link:active{color:var(--calcite-color-text-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%}`, E = z.ofType(_);
@@ -32,7 +32,7 @@ class R extends S {
     const { graphic: t } = this;
     if (!t)
       return !1;
-    const e = u(t);
+    const e = b(t);
     return e?.loaded && "capabilities" in e && e.capabilities && "attachment" in e.capabilities && e.capabilities.attachment && "supportsResize" in e.capabilities.attachment && e.capabilities.attachment.supportsTypeWildcard || !1;
   }
   get effectiveDisplayType() {
@@ -40,13 +40,13 @@ class R extends S {
     return !t || t === "auto" ? this.supportsResizeAttachments ? "preview" : "list" : t;
   }
   get _hasContent() {
-    return this._attachmentInfos.length > 0 || !!this.graphic && this.getAttachmentsPromise !== null;
+    return this._attachmentInfos.length > 0 || this.getAttachmentsPromise != null;
   }
   get supportsResizeAttachments() {
     const { graphic: t } = this;
     if (!t)
       return !1;
-    const e = u(t);
+    const e = b(t);
     return e?.loaded && "capabilities" in e && e.capabilities && "attachment" in e.capabilities && e.capabilities.attachment && "supportsResize" in e.capabilities.attachment && e.capabilities.attachment.supportsResize || !1;
   }
   loaded() {
@@ -55,28 +55,28 @@ class R extends S {
     ]);
   }
   async getAttachments() {
-    const { _attachmentLayer: t, _attachmentInfos: e, orderByFields: o, attachmentTypes: m, attachmentKeywords: s, _supportsTypeWildcard: g } = this;
+    const { _attachmentLayer: t, _attachmentInfos: e, orderByFields: r, attachmentTypes: c, attachmentKeywords: l, _supportsTypeWildcard: o } = this;
     if (!t || typeof t.queryAttachments != "function")
-      throw new b("invalid-layer", "getAttachments(): A valid layer is required.");
-    const h = this.graphic?.getObjectId();
-    if (typeof h != "number")
-      throw new b("invalid-object-id", "getAttachments(): Numeric object id is required");
-    const r = o?.map((n) => `${n.field} ${n.order === "descending" ? "DESC" : "ASC"}`), f = new L({
-      objectIds: [h],
+      throw new A("invalid-layer", "getAttachments(): A valid layer is required.");
+    const m = this.graphic?.getObjectId();
+    if (typeof m != "number")
+      throw new A("invalid-object-id", "getAttachments(): Numeric object id is required");
+    const g = r?.map((s) => `${s.field} ${s.order === "descending" ? "DESC" : "ASC"}`), n = new L({
+      objectIds: [m],
       returnMetadata: !0,
-      orderByFields: r,
-      attachmentTypes: g ? m?.filter(Boolean).map((n) => `${n}/*`) : void 0,
-      keywords: s
-    }), c = [], d = t.queryAttachments(f).then((n) => n[h] || c).catch(() => c);
-    this.getAttachmentsPromise = d, this._setEmpty(!1);
-    const l = await d;
-    e.destroyAll(), l.length && e.addMany(l), this.getAttachmentsPromise = null, this._setEmpty(!this._hasContent);
+      orderByFields: g,
+      attachmentTypes: o ? c?.filter(Boolean).map((s) => `${s}/*`) : void 0,
+      keywords: l
+    }), h = [], p = t.queryAttachments(n).then((s) => s[m] || h).catch(() => h);
+    this.getAttachmentsPromise = p, this._setEmpty(!1);
+    const d = await p;
+    e.destroyAll(), d.length && e.addMany(d), this.getAttachmentsPromise = null, this._setEmpty(!this._hasContent);
   }
   _setEmpty(t) {
     P(() => this.empty = t);
   }
   setAttachmentLayer() {
-    const { graphic: t } = this, e = u(t);
+    const { graphic: t } = this, e = b(t);
     this._attachmentLayer = e ? e.type === "scene" && e.associatedLayer != null ? e.associatedLayer : e : null;
   }
   graphicChanged() {
@@ -96,7 +96,7 @@ class R extends S {
     ].join(" ") : "";
   }
   render() {
-    return a`<div class="root"><arcgis-feature-element-info .heading=${this.heading} .description=${this.description} .headingLevel=${this.headingLevel}></arcgis-feature-element-info>${this.renderAttachments()}</div>`;
+    return this.empty ? null : a`<div class="root"><arcgis-feature-element-info .heading=${this.heading} .description=${this.description} .headingLevel=${this.headingLevel}></arcgis-feature-element-info>${this.renderAttachments()}</div>`;
   }
   renderAttachmentsList(t) {
     return a`<calcite-list .loading=${!!this.getAttachmentsPromise} .label=${this.messages?.componentLabel ?? ""} interaction-mode=static selection-mode=none>${t.toArray().filter(Boolean).map((e) => this.renderAttachmentListItem(e))}</calcite-list>`;
@@ -104,19 +104,23 @@ class R extends S {
   renderAttachmentsPreview(t) {
     return a`<calcite-card-group .label=${this.messages?.componentLabel ?? ""}>${this.getAttachmentsPromise ? a`<calcite-card loading></calcite-card>` : t.toArray().filter(Boolean).map((e) => this.renderAttachmentPreviewItem(e))}</calcite-card-group>`;
   }
+  renderAttachmentsCarousel(t) {
+    const e = t.toArray().filter(Boolean);
+    return a`<calcite-carousel .paginationDisabled=${e.length < 2} .label=${this.messages?.componentLabel ?? ""} pagination-position=top>${this.getAttachmentsPromise ? a`<calcite-carousel-item .label=${this.messages?.componentLabel ?? ""}><calcite-card loading></calcite-card></calcite-carousel-item>` : e.map((r) => a`<calcite-carousel-item .label=${r.name || this.messages?.noTitle || ""}>${this.renderAttachmentPreviewItem(r, !0)}</calcite-carousel-item>`)}</calcite-carousel>`;
+  }
   renderAttachments() {
     const { effectiveDisplayType: t, _attachmentInfos: e } = this;
-    return t === "preview" ? this.renderAttachmentsPreview(e) : this.renderAttachmentsList(e);
+    return t === "carousel" ? this.renderAttachmentsCarousel(e) : t === "preview" ? this.renderAttachmentsPreview(e) : this.renderAttachmentsList(e);
   }
   renderAttachmentListItem(t) {
-    const { supportsResizeAttachments: e } = this, { contentType: o, name: m, url: s, size: g } = t, h = 64, r = m || this.messages?.noTitle, f = y(o), c = this.getCSSTransform(t), d = c ? { transform: c, "image-orientation": "none" } : {}, l = e && $(o), n = a`<a class=${w(A("item-link", "item-link--list", {
-      "item-link--list-icon": !l
-    }))} slot=content-start href=${s ?? void 0 ?? p} rel=noreferrer target=_blank>${l ? a`<img alt=${m ?? p} src=${`${s}${s?.includes("?") ? "&" : "?"}w=${h}&s=${g}`} style=${v(d)} title=${m ?? p}>` : a`<calcite-icon .icon=${f}></calcite-icon>`}</a>`, x = a`<calcite-link slot=content .href=${s ?? void 0} rel=noreferrer target=_blank>${r}</calcite-link>`;
-    return a`<calcite-list-item .label=${r}>${n}${x}</calcite-list-item>`;
-  }
-  renderAttachmentPreviewItem(t) {
-    const { supportsResizeAttachments: e } = this, { contentType: o, name: m, url: s, size: g } = t, h = 225, r = m || this.messages?.noTitle, f = y(o), c = this.getCSSTransform(t), d = c ? { transform: c, "image-orientation": "none" } : {}, l = e && $(o), n = a`<a class=${w(A("item-link", "item-link--preview"))} slot=thumbnail href=${s ?? void 0 ?? p} rel=noreferrer target=_blank aria-label=${r ?? p} title=${r ?? p}>${l ? a`<img alt=${r ?? p} src=${`${s}${s?.includes("?") ? "&" : "?"}w=${h}&s=${g}`} style=${v(d)}>` : 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>`;
+    const { supportsResizeAttachments: e } = this, { contentType: r, name: c, url: l, size: o } = t, m = 64, g = c || this.messages?.noTitle, n = x(r), h = this.getCSSTransform(t), p = h ? { transform: h, "image-orientation": "none" } : {}, d = e && y(r), s = a`<a class=${$(v("item-link", "item-link--list", {
+      "item-link--list-icon": !d
+    }))} slot=content-start href=${l ?? void 0 ?? u} rel=noreferrer target=_blank>${d ? a`<img alt=${c ?? u} src=${`${l}${l?.includes("?") ? "&" : "?"}w=${m}&s=${o}`} style=${w(p)} title=${c ?? u}>` : a`<calcite-icon .icon=${n}></calcite-icon>`}</a>`, f = a`<calcite-link slot=content .href=${l ?? void 0} rel=noreferrer target=_blank>${g}</calcite-link>`;
+    return a`<calcite-list-item .label=${g}>${s}${f}</calcite-list-item>`;
+  }
+  renderAttachmentPreviewItem(t, e = !1) {
+    const { supportsResizeAttachments: r } = this, { contentType: c, name: l, url: o, size: m } = t, g = 225, n = l || this.messages?.noTitle, h = x(c), p = this.getCSSTransform(t), d = p ? { transform: p, "image-orientation": "none" } : {}, s = r && y(c), f = a`<a class=${$(v("item-link", "item-link--preview"))} slot=thumbnail href=${o ?? void 0 ?? u} rel=noreferrer target=_blank aria-label=${n ?? u} title=${n ?? u}>${s ? a`<img alt=${n ?? u} src=${`${o}${o?.includes("?") ? "&" : "?"}w=${g}&s=${m}`} style=${w(d)}>` : a`<calcite-icon scale=l .icon=${h}></calcite-icon>`}</a>`;
+    return a`<calcite-card .label=${n}>${f}${(e || this.hidePreviewImageAttachmentName) && s ? null : a`<span class="item-description" slot=description>${n}</span>`}</calcite-card>`;
   }
 }
 k("arcgis-feature-attachments", R);

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

@@ -2,6 +2,8 @@ import "../arcgis-feature-element-info/index.js";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-card-group";
 import "@esri/calcite-components/components/calcite-card";
+import "@esri/calcite-components/components/calcite-carousel";
+import "@esri/calcite-components/components/calcite-carousel-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-link";
 import "@esri/calcite-components/components/calcite-list-item";