@arcgis/map-components 4.33.0-next.98 → 4.33.0-next.99

package/dist/components/arcgis-zoom/customElement.js

@@ -1,34 +1,62 @@
-import { c } from "../../chunks/runtime.js";
-import { html as m } from "lit-html";
-import { usePropertyChange as u } from "@arcgis/lumina/controllers";
-import { classes as t } from "@arcgis/components-utils";
-import d from "@arcgis/core/widgets/Zoom/ZoomViewModel.js";
-import { LitElement as h, createEvent as z, noShadowRoot as p, safeClassMap as s, nothing as a } from "@arcgis/lumina";
-import { u as g } from "../../chunks/useT9n.js";
-import { m as b } from "../../chunks/useViewModel.js";
-import { css as w } from "@lit/reactive-element/css-tag.js";
+import { c as d } from "../../chunks/runtime.js";
+import { html as h } from "lit-html";
+import { classes as r } from "@arcgis/components-utils";
+import { ignoreAbortErrors as l } from "@arcgis/core/core/promiseUtils.js";
+import { when as f } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as g, createEvent as p, noShadowRoot as y, safeClassMap as i, nothing as m } from "@arcgis/lumina";
+import { usePropertyChange as z } from "@arcgis/lumina/controllers";
+import { u as b } from "../../chunks/useT9n.js";
+import { u as O } from "../../chunks/useView.js";
+import { css as Z } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.98 */
-const o = {
+v4.33.0-next.99 */
+const a = {
   base: "arcgis-zoom",
   horizontalLayout: "arcgis-zoom--horizontal",
   button: "esri-widget--button",
   zoomIn: "arcgis-zoom__zoom-in",
   zoomOut: "arcgis-zoom__zoom-out"
-}, y = w`@layer{arcgis-zoom,.arcgis-zoom{display:flex;flex-flow:column nowrap;box-shadow:0 1px 2px #0000004d}.arcgis-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.arcgis-zoom--horizontal{flex-flow:row-reverse nowrap}.arcgis-zoom--horizontal .arcgis-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}}`, f = b(d);
-class v extends h {
+};
+function I(t) {
+  if (t.type === "3d")
+    return !!t.ready;
+  if (!t?.ready)
+    return !1;
+  const e = u(t), s = t.constraints?.effectiveMaxScale;
+  return s === 0 || e > s;
+}
+function x(t) {
+  if (t.type === "3d")
+    return !!t.ready;
+  if (!t?.ready)
+    return !1;
+  const e = u(t), s = t.constraints?.effectiveMinScale;
+  return s === 0 || e < s;
+}
+function u(t) {
+  const o = t?.animation?.target;
+  return (o && "then" in o ? void 0 : o?.scale) ?? t?.scale ?? 0;
+}
+const $ = Z`@layer{arcgis-zoom,.arcgis-zoom{display:flex;flex-flow:column nowrap;box-shadow:0 1px 2px #0000004d}.arcgis-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.arcgis-zoom--horizontal{flex-flow:row-reverse nowrap}.arcgis-zoom--horizontal .arcgis-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}}`;
+class w extends g {
   constructor() {
-    super(...arguments), this.messages = g({}), this.viewModel = f(this), this.canZoomIn = this.viewModel.canZoomIn, this.canZoomOut = this.viewModel.canZoomOut, this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.position = "top-left", this.state = this.viewModel.state, this.arcgisPropertyChange = u()("state"), this.arcgisReady = z();
+    super(...arguments), this.messages = b({}), this.view = O(this), this.canZoomIn = !1, this.canZoomOut = !1, this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.position = "top-left", this.arcgisPropertyChange = z()("state"), this.arcgisReady = p();
   }
   static {
-    this.properties = { canZoomIn: 16, canZoomOut: 16, autoDestroyDisabled: 5, icon: 3, label: 1, layout: 3, messageOverrides: 0, position: 1, referenceElement: 1, state: 3 };
+    this.properties = { canZoomIn: 16, canZoomOut: 16, autoDestroyDisabled: 5, icon: 3, label: 1, layout: 3, messageOverrides: 0, position: 1, referenceElement: 1, state: 35 };
   }
   static {
-    this.shadowRootOptions = p;
+    this.shadowRootOptions = y;
   }
   static {
-    this.styles = y;
+    this.styles = $;
+  }
+  /**
+   * The current state of the component.
+   */
+  get state() {
+    return this.view?.ready ? "ready" : "disabled";
   }
   //#endregion
   //#region Public Methods
@@ -38,22 +66,32 @@ class v extends h {
   }
   /** Zooms the view in by an LOD factor of 0.5. */
   async zoomIn() {
-    this.viewModel.zoomIn();
+    const { view: o } = this;
+    !this.canZoomIn || !o || (o.type === "2d" ? o.mapViewNavigation.zoomIn() : l(o.goTo({ zoomFactor: 2 })));
   }
   /** Zooms the view out by an LOD factor of 2. */
   async zoomOut() {
-    this.viewModel.zoomOut();
+    const { view: o } = this;
+    !this.canZoomOut || !o || (o.type === "2d" ? o.mapViewNavigation.zoomOut() : l(o.goTo({ zoomFactor: 0.5 })));
+  }
+  //#endregion
+  //#region Lifecycle
+  loaded() {
+    const { view: o } = this;
+    this.manager.onLifecycle(() => f(() => o?.stationary, () => {
+      this.canZoomIn = I(o), this.canZoomOut = x(o);
+    }, { initial: !0 }));
   }
   //#endregion
   //#region Rendering
   render() {
-    const r = {
-      [o.horizontalLayout]: this.layout === "horizontal"
-    }, { canZoomIn: n, canZoomOut: l } = this.viewModel, { zoomIn: e, zoomOut: i } = this.messages;
-    return m`<div class=${s(t(o.base, r))}><calcite-button class=${s(t(o.button, o.zoomIn))} .disabled=${!n} icon-start=plus kind=neutral .label=${e} @click=${this.zoomIn} title=${e ?? a}></calcite-button><calcite-button class=${s(t(o.button, o.zoomOut))} .disabled=${!l} icon-start=minus kind=neutral .label=${i} @click=${this.zoomOut} title=${i ?? a}></calcite-button></div>`;
+    const o = {
+      [a.horizontalLayout]: this.layout === "horizontal"
+    }, { canZoomIn: e, canZoomOut: s } = this, { zoomIn: n, zoomOut: c } = this.messages;
+    return h`<div class=${i(r(a.base, o))}><calcite-button class=${i(r(a.button, a.zoomIn))} .disabled=${!e} icon-start=plus kind=neutral .label=${n} @click=${this.zoomIn} title=${n ?? m}></calcite-button><calcite-button class=${i(r(a.button, a.zoomOut))} .disabled=${!s} icon-start=minus kind=neutral .label=${c} @click=${this.zoomOut} title=${c ?? m}></calcite-button></div>`;
   }
 }
-c("arcgis-zoom", v);
+d("arcgis-zoom", w);
 export {
-  v as ArcgisZoom
+  w as ArcgisZoom
 };

package/dist/components/arcgis-zoom/utils.d.ts

@@ -0,0 +1,4 @@
+import { default as MapView } from '@arcgis/core/views/MapView.js';
+import { default as SceneView } from '@arcgis/core/views/SceneView.js';
+export declare function canZoomIn(view: MapView | SceneView): boolean;
+export declare function canZoomOut(view: MapView | SceneView): boolean;