@arcgis/map-components/dist/components/arcgis-navigation-toggle/customElement.js

ArcGIS Map Components

import { c as g } from "../../chunks/runtime.js";
import { proxyExports as m, GenericController as v, watch as d, usePropertyChange as u } from "@arcgis/components-controllers";
import * as y from "@arcgis/core/core/reactiveUtils.js";
import { when as h } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as f, createEvent as w, noShadowRoot as b, safeClassMap as _, nothing as p } from "@arcgis/lumina";
import { html as M } from "lit";
import { u as $ } from "../../chunks/useT9n.js";
import { signal as E } from "@arcgis/core/applications/Components/reactiveUtils.js";
import { a as s } from "../../chunks/component-utils.js";
import { g as C } from "../../chunks/globalCss.js";
import { css as x } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
v4.32.13 */
const P = (n) => D(n);
class R extends v {
  constructor(t) {
    super(t), this._view$ = E(void 0), this._viewDestroyHandle = void 0, this._arcgisReadyEmitted = !1;
    const { el: e } = t, a = e.view;
    this.setProvisionalExports(void 0), Object.defineProperty(e, "view", {
      get: () => this._view$.value,
      set: (i) => {
        if (this.exports === i)
          return;
        const o = e.view;
        this._view$.value = i, this.exports = i, this.component.requestUpdate("view", o), !this._arcgisReadyEmitted && i != null && (this._arcgisReadyEmitted = !0, this.component.arcgisReady.emit());
      },
      configurable: !0,
      enumerable: !0
    }), t !== e && Object.defineProperty(t, "view", {
      get: () => e.view,
      set: (i) => {
        e.view = i;
      }
    }), queueMicrotask(() => {
      a && (e.view = a);
    });
  }
  hostConnected() {
    this._viewDestroyHandle ??= y.when(
      () => this._view$.value?.destroyed,
      () => void this.component.destroy?.().catch(console.error),
      { sync: !0 }
    ), this.component.manager.loadedCalled && s(this.component);
  }
  hostLoad() {
    this.component.manager.destroyed || this._watchMetaProperties();
  }
  hostLoaded() {
    const { el: t } = this.component, e = t.shadowRoot?.firstElementChild ?? t.firstElementChild ?? void 0;
    t.childElem = e ?? t.childElem, t.isConnected && s(this.component);
  }
  hostDisconnected() {
    typeof this.component.el.childElem == "object" && this._view$.value?.ui?.remove(this.component.el.childElem);
  }
  hostDestroy() {
    this._viewDestroyHandle?.remove();
  }
  _watchMetaProperties() {
    d(this.component, "position", (t) => {
      this.component.el.childElem != null && typeof t == "string" && s(this.component);
    }), d(this.component, "referenceElement", () => s(this.component));
  }
}
const D = m(R), k = "arcgis-navigation-toggle", N = {
  base: k
}, A = x`@layer{.arcgis-navigation-toggle{display:flex;inline-size:fit-content;block-size:fit-content}}`, c = {
  pan: "move",
  rotate: "rotate"
};
class L extends f {
  constructor() {
    super(...arguments), this.view = P(this), this._messages = $(), this.autoDestroyDisabled = !1, this.icon = c.pan, this.layout = "vertical", this.navigationMode = "pan", this.position = "top-left", this.state = "disabled", this.arcgisPropertyChange = u()("layout", "state"), this.arcgisReady = w();
  }
  static {
    this.properties = { autoDestroyDisabled: 5, icon: 3, label: 1, layout: 3, navigationMode: 3, position: 1, referenceElement: 1, state: 3 };
  }
  static {
    this.shadowRootOptions = b;
  }
  static {
    this.styles = A;
  }
  //#endregion
  //#region Public Methods
  /** Permanently destroy the component */
  async destroy() {
    await this.manager.destroy();
  }
  async toggle() {
    this.state !== "disabled" && (this.navigationMode = this.navigationMode !== "pan" ? "pan" : "rotate");
  }
  //#endregion
  //#region Lifecycle
  load() {
    this.manager.onLifecycle(() => [
      h(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
      h(() => {
        const { view: t } = this;
        return t?.ready && t?.type === "3d" ? "ready" : "disabled";
      }, (t) => {
        this.state = t;
      }, { sync: !0, initial: !0 })
    ]);
  }
  willUpdate(t) {
    t.has("navigationMode") && this._updateNavigationActionMap();
  }
  //#endregion
  //#region Private Methods
  _onPanClick() {
    this.navigationMode = "pan";
  }
  _onRotateClick() {
    this.navigationMode = "rotate";
  }
  _updateNavigationActionMap() {
    const t = this.view?.navigation?.actionMap;
    if (!t)
      return;
    const e = this.navigationMode === "pan";
    t.dragPrimary = e ? "pan" : "rotate", t.dragSecondary = e ? "rotate" : "pan";
  }
  //#endregion
  //#region Rendering
  render() {
    const { _messages: t, navigationMode: e, state: a } = this, i = t.pan ?? "", o = t.rotate ?? "", r = a === "disabled", l = e === "pan";
    return M`<calcite-action-bar class=${_({ [N.base]: !0, [C.disabled]: r })} expand-disabled .layout=${this.layout} scale=s><calcite-action .active=${l} appearance=solid data-testid=navigation-toggle-pan .disabled=${r} .icon=${c.pan} @click=${this._onPanClick} scale=s .text=${i} title=${i ?? p}></calcite-action><calcite-action .active=${!l} appearance=solid data-testid=navigation-toggle-rotate .disabled=${r} .icon=${c.rotate} @click=${this._onRotateClick} scale=s .text=${o} title=${o ?? p}></calcite-action></calcite-action-bar>`;
  }
}
g("arcgis-navigation-toggle", L);
export {
  L as ArcgisNavigationToggle
};