@arcgis/map-components/dist/components/arcgis-zoom/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as u } from "../../chunks/runtime.js";
import { css as m, html as d } from "lit";
import { when as h } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as f, createEvent as i, nothing as r, safeClassMap as y } from "@arcgis/lumina";
import { usePropertyChange as g } from "@arcgis/lumina/controllers";
import { u as b } from "../../chunks/useT9n.js";
import { u as p } from "../../chunks/useView.js";
import { g as z } from "../../chunks/globalCss.js";
function c(t) {
  if (!t)
    return !1;
  if (t.type === "3d")
    return t.ready;
  if (!t?.ready)
    return !1;
  const a = l(t), o = t.constraints?.effectiveMaxScale;
  return o === 0 || a > o;
}
function n(t) {
  if (!t)
    return !1;
  if (t.type === "3d")
    return t.ready;
  if (!t?.ready)
    return !1;
  const a = l(t), o = t.constraints?.effectiveMinScale;
  return o === 0 || a < o;
}
function l(t) {
  const e = t?.animation?.target;
  return (e && "then" in e ? void 0 : e?.scale) ?? t?.scale ?? 0;
}
const v = m`.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;max-width:fit-content}.zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.horizontal{flex-flow:row-reverse nowrap}.horizontal .zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}`;
class x extends f {
  constructor() {
    super(...arguments), this.messages = b({}), this._state = "disabled", this.view = p(this), this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.visualScale = "m", this.arcgisActionZoom = i(), this.arcgisPropertyChange = g()("state"), this.arcgisReady = i();
  }
  static {
    this.properties = { _state: 16, view: 0, autoDestroyDisabled: 5, icon: 1, label: 1, layout: 3, messageOverrides: 0, referenceElement: 1, visualScale: 1, state: 32 };
  }
  static {
    this.styles = v;
  }
  get state() {
    return this._state;
  }
  async destroy() {
    await this.manager.destroy();
  }
  async zoomIn() {
    await this.zoomBy(1);
  }
  async zoomOut() {
    await this.zoomBy(-1);
  }
  loaded() {
    this.manager.onLifecycle(() => [
      h(() => this.view?.ready ? "ready" : "disabled", (e) => {
        this._state = e;
      }, { sync: !0, initial: !0 })
    ]);
  }
  async zoomBy(e) {
    const { view: a } = this, o = e === 1;
    !(o ? c(a) : n(a)) || !a || (this.arcgisActionZoom.emit({ action: o ? "zoomIn" : "zoomOut" }), o ? await a.zoomIn() : await a.zoomOut());
  }
  render() {
    const e = c(this.view), a = n(this.view), { zoomIn: o, zoomOut: s } = this.messages;
    return d`<div class=${y({
      [z.arcgisButton]: !0,
      horizontal: this.layout === "horizontal"
    })}><calcite-button class="zoom-in" .disabled=${!e} icon-start=plus kind=neutral .label=${o} @click=${this.zoomIn} .scale=${this.visualScale} title=${o ?? r}></calcite-button><calcite-button class="zoom-out" .disabled=${!a} icon-start=minus kind=neutral .label=${s} @click=${this.zoomOut} .scale=${this.visualScale} title=${s ?? r}></calcite-button></div>`;
  }
}
u("arcgis-zoom", x);
export {
  x as ArcgisZoom
};