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

ArcGIS Map Components

import { c as p } from "../../chunks/runtime.js";
import { usePropertyChange as d } from "@arcgis/lumina/controllers";
import { when as c } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as g, createEvent as h, noShadowRoot as m, safeClassMap as v, nothing as r } from "@arcgis/lumina";
import { html as u } from "lit";
import { u as y } from "../../chunks/useT9n.js";
import { u as f } from "../../chunks/useView.js";
import { g as b } from "../../chunks/globalCss.js";
import { css as M } 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.13 */
const $ = "arcgis-navigation-toggle", _ = {
  base: $
}, w = M`@layer{.arcgis-navigation-toggle{display:flex;box-shadow:0 1px 2px #0000004d;inline-size:fit-content;block-size:fit-content}}`, e = { pan: "move", rotate: "rotate" };
class x extends g {
  constructor() {
    super(...arguments), this.view = f(this), this._messages = y(), this._state = "disabled", this.icon = e.pan, this.layout = "vertical", this.navigationMode = "pan", this.position = "top-left", this.arcgisPropertyChange = d()("layout", "state"), this.arcgisReady = h();
  }
  static {
    this.properties = { _state: 16, icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, position: 1, referenceElement: 1, state: 35 };
  }
  static {
    this.shadowRootOptions = m;
  }
  static {
    this.styles = w;
  }
  get state() {
    return this._state;
  }
  async toggle() {
    this.state !== "disabled" && (this.navigationMode = this.navigationMode !== "pan" ? "pan" : "rotate");
  }
  load() {
    this.manager.onLifecycle(() => [
      c(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
      c(() => {
        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();
  }
  _onPanClick() {
    this.navigationMode = "pan";
  }
  _onRotateClick() {
    this.navigationMode = "rotate";
  }
  _updateNavigationActionMap() {
    const t = this.view?.navigation?.actionMap;
    if (!t)
      return;
    const a = this.navigationMode === "pan";
    t.dragPrimary = a ? "pan" : "rotate", t.dragSecondary = a ? "rotate" : "pan";
  }
  render() {
    const { _messages: t, navigationMode: a, state: l } = this, s = t.pan ?? "", o = t.rotate ?? "", i = l === "disabled", n = a === "pan";
    return u`<calcite-action-bar class=${v({ [_.base]: !0, [b.disabled]: i })} expand-disabled .layout=${this.layout} scale=s><calcite-action .active=${n} appearance=solid .disabled=${i} .icon=${e.pan} @click=${this._onPanClick} scale=s .text=${s} title=${s ?? r}></calcite-action><calcite-action .active=${!n} appearance=solid .disabled=${i} .icon=${e.rotate} @click=${this._onRotateClick} scale=s .text=${o} title=${o ?? r}></calcite-action></calcite-action-bar>`;
  }
}
p("arcgis-navigation-toggle", x);
export {
  x as ArcgisNavigationToggle
};