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

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as d } from "../../chunks/runtime.js";
import { when as s } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as g, createEvent as h, nothing as r, safeClassMap as p } from "@arcgis/lumina";
import { usePropertyChange as u } from "@arcgis/lumina/controllers";
import { css as v, html as m } from "lit";
import { u as f } from "../../chunks/useT9n.js";
import { u as b } from "../../chunks/useView.js";
import { g as y } from "../../chunks/globalCss.js";
const M = v`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{display:flex;inline-size:fit-content;block-size:fit-content}.root{--calcite-internal-action-bar-padding: 0;--calcite-internal-action-bar-gap: 0;--calcite-action-corner-radius: 0}`, i = {
  pan: "move",
  rotate: "rotate"
};
class $ extends g {
  constructor() {
    super(...arguments), this._messages = f(), this._state = "disabled", this.autoDestroyDisabled = !1, this.view = b(this), this.icon = i.pan, this.layout = "vertical", this.navigationMode = "pan", this.visualScale = "m", this.arcgisPropertyChange = u()("layout", "state"), this.arcgisReady = h();
  }
  static {
    this.properties = { _state: 16, autoDestroyDisabled: 5, view: 0, icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, referenceElement: 1, state: 35, visualScale: 1 };
  }
  static {
    this.styles = M;
  }
  get state() {
    return this._state;
  }
  async destroy() {
    await this.manager.destroy();
  }
  async toggle() {
    this.state !== "disabled" && (this.navigationMode = this.navigationMode !== "pan" ? "pan" : "rotate");
  }
  load() {
    this.manager.onLifecycle(() => [
      s(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
      s(() => {
        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, o = t.pan ?? "", n = t.rotate ?? "", e = l === "disabled", c = a === "pan";
    return m`<calcite-action-bar class=${p({ root: !0, [y.disabled]: e })} expand-disabled .layout=${this.layout}><calcite-action .active=${c} .disabled=${e} .icon=${i.pan} @click=${this._onPanClick} .scale=${this.visualScale} .text=${o} title=${o ?? r}></calcite-action><calcite-action .active=${!c} .disabled=${e} .icon=${i.rotate} @click=${this._onRotateClick} .scale=${this.visualScale} .text=${n} title=${n ?? r}></calcite-action></calcite-action-bar>`;
  }
}
d("arcgis-navigation-toggle", $);
export {
  $ as ArcgisNavigationToggle
};