@arcgis/map-components 5.2.0-next.15 → 5.2.0-next.150

package/dist/chunks/useArcgisViewReadyError.js

@@ -1,123 +1,279 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { html as u } from "lit";
-import { when as s, watch as r } from "@arcgis/core/core/reactiveUtils.js";
-import { GenericController as h, useDirection as c, makeGenericController as a } from "@arcgis/lumina/controllers";
-import { getSlotAssignedElements as m } from "@arcgis/toolkit/dom";
-import { createRef as f } from "lit/directives/ref.js";
-import { c as d, S as E } from "./slots.js";
-import { createEvent as l } from "@arcgis/lumina";
-class C extends h {
+import { html as C } from "lit";
+import { initializeProjection as R } from "@arcgis/core/applications/Components/featureUtils.js";
+import { signal as O } from "@arcgis/core/applications/Components/reactiveUtils.js";
+import { watch as u, when as A } from "@arcgis/core/core/reactiveUtils.js";
+import P from "@arcgis/core/geometry/Point.js";
+import F from "@arcgis/core/Graphic.js";
+import { GenericController as L, useDirection as G, makeController as M, makeGenericController as _ } from "@arcgis/lumina/controllers";
+import { getSlotAssignedElements as D } from "@arcgis/toolkit/dom/slots";
+import { whenOrAbort as y } from "@arcgis/toolkit/promise";
+import { createRef as V } from "lit/directives/ref.js";
+import { c as k, S as x } from "./slots.js";
+import { i as T, t as H } from "./async-utils.js";
+import { observeAncestorsMutation as j, unsafeGetCalciteModeName as q } from "@arcgis/toolkit/dom";
+import { createEvent as S } from "@arcgis/lumina";
+async function* U(n, t) {
+  for (const e of n) {
+    const i = await y(e, t).catch(() => {
+    });
+    if (t.aborted)
+      return;
+    yield* Array.isArray(i) ? i.filter((o) => o instanceof F) : [];
+  }
+}
+async function* v() {
+  yield* [];
+}
+async function* K(n, t) {
+  await y(n, t).catch(() => {
+  });
+}
+async function N(n, t, e, i) {
+  let o;
+  if (e instanceof P ? (await R(e.spatialReference, n.spatialReference), H(i.signal), o = n.toScreen(e)) : o = e, !o)
+    return v();
+  const r = Promise.withResolvers(), a = n.fetchPopupFeatures(o, {
+    ...i,
+    defaultPopupTemplateEnabled: t.defaultPopupTemplateEnabled,
+    hitTestResolver: r
+  }) ?? v();
+  return await r.promise, a;
+}
+function d(n, t) {
+  if (t instanceof P)
+    return t;
+  const e = "width" in t ? { x: t.x + t.width / 2, y: t.y + t.height / 2 } : t;
+  return n.toMap(e) ?? void 0;
+}
+async function $(n, t, e, i) {
+  const o = {};
+  return {
+    diagnostics: o,
+    featureStream: await N(n, t, e, {
+      diagnostics: o,
+      signal: i
+    }),
+    location: d(n, e)
+  };
+}
+class re extends L {
   //#endregion
   //#region Lifecycle
-  constructor(o) {
-    super(o), this.direction = c(), this.popupRef = f(), this.slotGroupRefs = d(), this.attributionHeight = 0, this._uiContainer = null, this.component.listen("arcgisViewClick", (t) => {
-      const e = t.detail.native;
-      t.detail.button !== 0 || e?.ctrlKey || e?.metaKey || this._handleOpenPopup(t.detail);
-    }), this.component.listenOn(globalThis, "unhandledrejection", (t) => {
-      const e = t.reason;
-      if (e?.name === "webgl:required") {
-        const { name: i } = e;
-        this.webGLError = { name: i };
+  constructor(t) {
+    super(t), this.direction = G(), this.popupRef = V(), this._popupElement = O(void 0), this._popupAbortController = null, this._popupClickOpenCount = 0, this.slotGroupRefs = k(), this.attributionHeight = 0, this._uiContainer = null, this.component.listenOn(globalThis, "unhandledrejection", (e) => {
+      const i = e.reason;
+      if (i?.name === "webgl:required") {
+        const { name: o } = i;
+        this.webGLError = { name: o };
       }
     });
   }
+  get _focusRegionSelectionSupported() {
+    return !this.component.popupDisabled && (this.component.popupComponentEnabled || !!this.popupElement && this.popupElement !== this._defaultPopupElement);
+  }
+  get popupElement() {
+    return this._popupElement.value;
+  }
+  set popupElement(t) {
+    this._popupElement.value = t;
+  }
   //#endregion
   //#region Private Methods
   hostLifecycle() {
+    const { view: t } = this.component, e = t.focusRegionShortcutEnabled;
     return [
-      s(() => this.component.view.ready, () => {
-        this._assignDefaultPopup();
-      }),
-      // Close component popup when view popup is opened
-      s(() => this.component.view.popup?.visible, () => {
-        this.popupElement?.open && (this.popupElement.open = !1);
-      })
+      ...[
+        u(() => this.component.focusRegionShortcutEnabled ?? this._focusRegionSelectionSupported, (o) => {
+          this.component.view.focusRegionShortcutEnabled = o;
+        }, { initial: !0, sync: !0 }),
+        A(() => this.component.view.ready, () => {
+          this._assignDefaultPopup();
+        }),
+        u(() => this.component.view.popup?.visible, (o, r) => {
+          (o || r) && this._cancelPopupOperation(), o && this.popupElement?.open && (this.popupElement.open = !1);
+        }, { initial: !0 }),
+        u(
+          () => this.component.popupElement?.open,
+          (o, r) => {
+            r && !o && this._cancelPopupOperation();
+          },
+          // Using sync to preemptively prevent a close notification from canceling a replacement operation.
+          { initial: !0, sync: !0 }
+        ),
+        this.component.view.on("focus-region-select", (o) => this._handleFocusRegionSelect(o)),
+        this.component.view.on(
+          "click",
+          [],
+          (o) => {
+            const r = o.native;
+            o.button !== 0 || r?.ctrlKey || r?.metaKey || this._handleOpenPopup(o).catch(() => {
+            });
+          },
+          // @ts-ignore: Core supports a click listener priority argument, needed for Popup click
+          -2
+        )
+      ],
+      {
+        remove: () => {
+          t.focusRegionShortcutEnabled = e;
+        }
+      }
     ];
   }
-  async openPopup(o) {
-    if (this._assignDefaultPopup(), this.closePopup(), this.popupElement) {
-      await this.popupElement.componentOnReady(), this.popupElement.open = !0;
-      const { fetchFeatures: t, shouldFocus: e, title: i, ...n } = o;
-      delete o.fetchFeatures, Object.assign(this.popupElement, n), i !== void 0 && (this.popupElement.heading = i), e && await this.popupElement.setFocus(), t && this.popupElement.fetchFeatures();
-    } else
-      await this.component.view.openPopup(o);
+  hostDestroy() {
+    this._cancelPopupOperation();
+  }
+  async openPopup(t = {}) {
+    this._assignDefaultPopup();
+    const e = this.popupElement, i = t.location ?? e?.location, o = !!e && !t.featureStream && !t.promises?.length && !!t.fetchFeatures && !!i;
+    this._cancelPopupOperation();
+    const r = new AbortController();
+    if (this._popupAbortController = r, e) {
+      const { fetchFeatures: a, shouldFocus: h, title: l, featureStream: E, promises: b, location: c, ...g } = t, m = c ? d(this.component.view, c) : void 0, w = c ?? i, p = o && w ? $(this.component.view, e, w, r.signal) : null, f = p ? Promise.withResolvers() : null;
+      p && f && (p.catch(() => {
+      }), e.featureStream = K(f.promise, r.signal));
+      try {
+        await e.componentOnReady();
+      } catch (s) {
+        throw p && this._isCurrentPopupOperation(r) && (r.abort(), e.open = !1, await e.clear()), s;
+      }
+      if (!this._isCurrentPopupOperation(r))
+        return;
+      if (p)
+        try {
+          const s = await p;
+          if (!this._isCurrentPopupOperation(r))
+            return;
+          Object.assign(e, g), l !== void 0 && (e.heading = l), await e.openFeatureStream(s);
+        } catch (s) {
+          if (!T(s))
+            throw this._isCurrentPopupOperation(r) && (e.open = !1, await e.clear()), s;
+          return;
+        } finally {
+          f?.resolve();
+        }
+      else
+        Object.assign(e, g), l !== void 0 && (e.heading = l), E ? await e.openFeatureStream({ featureStream: E, location: m }) : b?.length ? await e.openFeatureStream({
+          featureStream: U(b, r.signal),
+          location: m
+        }) : (e.featureStream = null, c !== void 0 && (e.location = m), e.open = !0);
+      h && this._isCurrentPopupOperation(r) && await e.setFocus();
+    } else {
+      const { location: a, ...h } = t;
+      await this.component.view.openPopup({
+        ...h,
+        location: a ? d(this.component.view, a) : void 0
+      });
+    }
   }
   closePopup() {
-    this.popupElement && (this.popupElement.open = !1), this.component.view.closePopup();
+    this._cancelPopupOperation(), this.popupElement ? (this.popupElement.open = !1, this.popupElement.clear()) : this.component.view.closePopup();
+  }
+  _cancelPopupOperation() {
+    this._popupAbortController?.abort(), this._popupAbortController = null;
+  }
+  _isCurrentPopupOperation(t) {
+    return this._popupAbortController === t && !t.signal.aborted;
   }
   _assignDefaultPopup() {
-    this.popupRef.value && !this.popupElement && (this.popupElement = this.popupRef.value, this.popupElement.referenceElement = this.component.el, this.popupElement.view = this.component.view);
+    this.popupRef.value && !this.popupElement && (this._defaultPopupElement = this.popupRef.value, this.popupElement = this.popupRef.value, this.popupElement.referenceElement = this.component.el, this.popupElement.view = this.component.view);
   }
-  handleAttributionHeightChange(o) {
-    if (!(this.attributionHeight === o || !this.component.el.shadowRoot)) {
-      if (this.attributionHeight = o, !this._uiContainer) {
-        const t = this.component.el.shadowRoot.querySelector(".arcgis-map-container-ui");
-        this._uiContainer = t;
+  handleAttributionHeightChange(t) {
+    if (!(this.attributionHeight === t || !this.component.el.shadowRoot)) {
+      if (this.attributionHeight = t, !this._uiContainer) {
+        const e = this.component.el.shadowRoot.querySelector(".arcgis-map-container-ui");
+        this._uiContainer = e;
       }
       this._uiContainer?.style.setProperty("--arcgis-internal-attribution-space-top", `${this.attributionHeight}px`);
     }
   }
   _maybeDisableViewPopup() {
-    this.component.view && (this.component.popupComponentEnabled || this.popupElement) && (this.previousViewPopupEnabled = this.component.view.popupEnabled, this.component.view.popupEnabled = !1);
+    this.component.view && (this.component.popupComponentEnabled || this.popupElement) && (this.previousViewPopupEnabled ??= this.component.view.popupEnabled, this.component.view.popupEnabled = !1);
   }
   _maybeResetViewPopup() {
     this.component.view && this.previousViewPopupEnabled !== void 0 && (this.component.view.popupEnabled = this.previousViewPopupEnabled, this.previousViewPopupEnabled = void 0);
   }
-  async _handleOpenPopup(o) {
+  async _handleOpenPopup(t) {
     if (this._assignDefaultPopup(), !this.component.popupDisabled) {
-      if (this._maybeDisableViewPopup(), this.popupElement) {
-        const { location: t, promises: e } = await this.popupElement?.handleViewClick(o) ?? {};
-        e?.length ? this.openPopup({ location: t, promises: e }) : this.popupElement?.open && this.closePopup();
+      this._popupClickOpenCount++, this._maybeDisableViewPopup();
+      try {
+        this.popupElement && await this.openPopup({
+          fetchFeatures: !0,
+          location: { x: t.x, y: t.y }
+        });
+      } finally {
+        this._popupClickOpenCount--, this._popupClickOpenCount || this._maybeResetViewPopup();
       }
-      this._maybeResetViewPopup();
     }
   }
-  _handlePopupSlotChange(o) {
-    const t = m(o.target, "arcgis-popup");
-    !this.popupElement && t.length ? this.popupElement = t[0] : t.length || (this.popupElement = void 0);
+  _handleFocusRegionSelect(t) {
+    this._assignDefaultPopup(), !(!this._focusRegionSelectionSupported || !this.popupElement) && queueMicrotask(() => {
+      const { focusRegion: e } = this.component.view;
+      !t.defaultPrevented && e && this.openPopup({ fetchFeatures: !0, location: e }).catch(() => {
+      });
+    });
+  }
+  _handlePopupSlotChange(t) {
+    const e = D(t.target, "arcgis-popup");
+    !this.popupElement && e.length ? this.popupElement = e[0] : e.length || (this.popupElement = void 0);
   }
   _webGLErrorAlert() {
-    return this.webGLError ? u`<arcgis-webgl-error .errorName=${this.webGLError.name}></arcgis-webgl-error>` : null;
+    return this.webGLError ? C`<arcgis-webgl-error .errorName=${this.webGLError.name}></arcgis-webgl-error>` : null;
   }
   //#endregion
   //#region Rendering
   render() {
-    return E({ direction: this.direction, popupComponentEnabled: this.component.popupComponentEnabled, slotGroupRefs: this.slotGroupRefs, handlePopupSlotChange: (o) => this._handlePopupSlotChange(o), webGLErrorElement: this._webGLErrorAlert(), popupElement: this.popupRef });
+    return x({ direction: this.direction, popupComponentEnabled: this.component.popupComponentEnabled, slotGroupRefs: this.slotGroupRefs, handlePopupSlotChange: (t) => this._handlePopupSlotChange(t), webGLErrorElement: this._webGLErrorAlert(), popupElement: this.popupRef });
   }
 }
-const R = a((p, o) => {
-  const t = l();
-  return o.onLifecycle(
-    () => r(
+function pe(n) {
+  M((t, e) => {
+    const i = () => {
+      if (n.attributionMode !== "auto")
+        return;
+      const o = q(n.el);
+      n.view.attributionMode !== o && (n.view.attributionMode = o);
+    };
+    e.onLifecycle(() => (i(), j(n.el, ["class"], i))), e.onUpdate((o) => {
+      o.has("attributionMode") && n.attributionMode === "auto" && i();
+    });
+  });
+}
+const se = _((n, t) => {
+  const e = S();
+  return t.onLifecycle(
+    () => u(
       () => {
-        const { map: e } = p;
-        if (!e || e.destroyed)
+        const { map: i } = n;
+        if (!i || i.destroyed)
           return [];
-        const i = [];
-        return e.loadError && i.push(e), e.basemap?.loadError && i.push(e.basemap), e.ground.loadError && i.push(e.ground), [...e.allLayers, ...e.allTables].forEach((n) => {
-          n.loadError && i.push(n);
-        }), i;
+        const o = [];
+        return i.loadError && o.push(i), i.basemap?.loadError && o.push(i.basemap), i.ground.loadError && o.push(i.ground), [...i.allLayers, ...i.allTables].forEach((r) => {
+          r.loadError && o.push(r);
+        }), o;
       },
-      (e) => {
-        e.length && (p.loadErrorSources = e, t.emit());
+      (i) => {
+        i.length && (n.loadErrorSources = i, e.emit());
       }
     )
-  ), t;
-}), G = a(
-  (p, o) => {
-    const t = l();
-    return o.onLifecycle(
-      () => r(
-        () => p.view?.readyState,
-        (e) => {
-          (e === "map-content-error" || e === "rendering-error") && t.emit();
+  ), e;
+}), ae = _(
+  (n, t) => {
+    const e = S();
+    return t.onLifecycle(
+      () => u(
+        () => n.view?.readyState,
+        (i) => {
+          (i === "map-content-error" || i === "rendering-error") && e.emit();
         }
       )
-    ), t;
+    ), e;
   }
 );
 export {
-  C as U,
-  G as a,
-  R as u
+  re as U,
+  ae as a,
+  pe as b,
+  se as u
 };

package/dist/chunks/useLayerById.js

@@ -1,22 +1,23 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { watch as u } from "@arcgis/core/core/reactiveUtils.js";
-import { makeController as y } from "@arcgis/lumina/controllers";
-function v(r, e) {
-  return y((f, a) => (a.onLifecycle(
-    () => u(
+import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
+import { makeController as u } from "@arcgis/lumina/controllers";
+function l(r, i) {
+  return u((m, t) => (t.onLifecycle(
+    () => f(
       () => ({
         layerId: r.mapLayerId,
         viewReady: r.view?.ready
       }),
-      ({ layerId: i, viewReady: t }) => {
-        if (!t)
+      ({ layerId: e, viewReady: d }) => {
+        if (!d)
           return;
-        const d = r.view;
-        if (!i) {
-          e(void 0);
+        const a = r.view;
+        if (!e) {
+          i(void 0);
           return;
         }
-        e(d?.map?.findLayerById(i));
+        const y = a?.map?.findLayerById(e) ?? a?.map?.findTableById(e);
+        i(y);
       },
       {
         initial: !0
@@ -25,5 +26,5 @@ function v(r, e) {
   ), r.mapLayerId));
 }
 export {
-  v as u
+  l as u
 };

package/dist/chunks/useViewModel.js

@@ -1,20 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { proxyExports as s } from "@arcgis/lumina/controllers";
-import { AccessorController as i } from "@arcgis/lumina/controllers/accessor";
+import { proxyExports as r } from "@arcgis/lumina/controllers";
+import { AccessorController as i } from "@arcgis/lumina-toolkit/useAccessor";
 import { isEsriInternalEnv as n } from "@arcgis/toolkit/error";
-import { V as p } from "./useView.js";
-import { watch as m } from "@arcgis/core/core/reactiveUtils.js";
-const v = (t, o) => (e) => a(e, t);
-class r extends i {
+import { V as l } from "./useView.js";
+import { watch as a } from "@arcgis/core/core/reactiveUtils.js";
+const u = (t, e) => (o) => p(o, t);
+class s extends i {
   #o = void 0;
-  constructor(o, e) {
-    super(o, e), new p(this.component);
+  constructor(e, o) {
+    super(e, o), new l(this.component);
   }
   hostLoad() {
-    this.#o = m(
+    let e = !0;
+    this.#o = a(
       () => this.component.el.view,
       (o) => {
-        this.instance.view = o, this.instance.map = o?.map;
+        this.instance.view = o, o == null ? e || (this.instance.map = o) : this.instance.map = o.map, e = !1;
       },
       { sync: !0, initial: !0 }
     );
@@ -23,8 +24,8 @@ class r extends i {
     this.#o?.remove(), super.hostDestroy();
   }
 }
-process.env.NODE_ENV !== "production" && n() && (r.devOnly$allowedPropNameMismatches = /* @__PURE__ */ new Set(["el", "manager", "open", "swipePosition"]));
-const a = s(r);
+process.env.NODE_ENV !== "production" && n() && (s.devOnly$allowedPropNameMismatches = /* @__PURE__ */ new Set(["el", "manager", "open", "swipePosition"]));
+const p = r(s);
 export {
-  v as m
+  u as m
 };

package/dist/chunks/useWidget.js

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { proxyExports as v, getControllersCount as w, trackPropKey as b } from "@arcgis/lumina/controllers";
-import { AccessorController as y, getAccessorControllerBoundProperties as E, makeBinderProxy as g } from "@arcgis/lumina/controllers/accessor";
+import { AccessorController as y, getAccessorControllerBoundProperties as E, makeBinderProxy as g } from "@arcgis/lumina-toolkit/useAccessor";
 import { isEsriInternalEnv as x } from "@arcgis/toolkit/error";
 import { V as M } from "./useView.js";
 import { watch as m } from "@arcgis/core/core/reactiveUtils.js";

package/dist/chunks/utils.js

@@ -1,12 +1,80 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-function a(e) {
-  const { x: t, y: n, width: r, height: i } = e.getBoundingClientRect();
-  return { x: t + r / 2, y: n + i / 2 };
+import { html as c } from "lit";
+import { safeClassMap as p, safeStyleMap as m, nothing as a } from "@arcgis/lumina";
+import { classes as y } from "@arcgis/toolkit/dom";
+import { g as v, a as $ } from "./action-utils.js";
+import { s as b } from "./component-utils.js";
+function A(e) {
+  return e && "visibilityMode" in e ? e.visibilityMode : null;
 }
-function c(e) {
-  return e?.spatialReference?.isWebMercator || e?.spatialReference?.isGeographic || !1;
+function x(e, t) {
+  if (!("visible" in e))
+    return;
+  A(t) === "exclusive" && e.visible || (e.visible = !e.visible);
+}
+function P(e, t) {
+  "panel" in e && (e.panel.open = !e.panel.open, e.panel.open && t && t());
+}
+function I(e) {
+  return Array.isArray(e) ? e.filter((t) => t !== "legend") : e === "legend" ? null : e;
+}
+function T(e) {
+  const t = I(e.panel?.content);
+  return Array.isArray(t) ? t.length > 0 : !!t;
+}
+function h(e) {
+  return !!e && "content" in e && e.content.type === "track-info";
+}
+function D(e) {
+  return !!e && "content" in e && e.content.type === "telemetry-display";
+}
+function V(e) {
+  return h(e) || D(e);
+}
+function q(e, t, i, n) {
+  e && i === t.layer?.uid && (b(e), n?.(null));
+}
+function M(e, t, i) {
+  i.type === "toggle" && (i.value = !i.value), e(i, t);
+}
+function w(e) {
+  return e.actionsSections.map((t) => t.filter((i) => i.visible));
+}
+function R(e, t, i) {
+  return e.updateComplete.then(() => {
+    const n = () => {
+      const r = Array.from(e.el.shadowRoot?.querySelectorAll(`calcite-list-item[data-item="${t}"]`) ?? []);
+      if (r.length < 2)
+        return;
+      const l = r.find(i);
+      l && r.filter((o) => o !== l).forEach((o) => o.remove());
+    };
+    return n(), e.updateComplete.then(n);
+  });
+}
+function S(e, t) {
+  const { icon: i } = t;
+  if (i)
+    return null;
+  const n = "image" in t ? t.image : void 0;
+  return n ? c`<span aria-hidden=true class=${p(y(e.itemActionIcon, { [e.itemActionImage]: !!n }))} style=${m(v(n))}></span>` : null;
+}
+function j(e, t, i) {
+  const { item: n, css: r, handleAction: l } = e, { active: o, disabled: u, title: s, type: f, indicator: d } = t, g = $(t);
+  return c`<calcite-action .active=${f === "toggle" ? t.value : !1} data-action-id=${t.id ?? a} .disabled=${u} .icon=${g ?? void 0} .indicator=${d} .loading=${o} @click=${() => M(l, n, t)} slot=${(i ? void 0 : "actions-end") ?? a} .text=${s ?? ""} .textEnabled=${i} title=${s ?? void 0 ?? a}>${S(r, t)}</calcite-action>`;
 }
 export {
-  c,
-  a as f
+  S as F,
+  j as L,
+  h as a,
+  D as b,
+  P as c,
+  w as d,
+  I as e,
+  q as f,
+  A as g,
+  T as h,
+  V as i,
+  R as r,
+  x as t
 };