import { c } from "../../chunks/runtime.js";
import { css as n, html as l } from "lit";
import d from "@arcgis/core/widgets/Compass/CompassViewModel.js";
import { LitElement as h, createEvent as m, safeClassMap as i, nothing as a, safeStyleMap as p } from "@arcgis/lumina";
import { usePropertyChange as u } from "@arcgis/lumina/controllers";
import { classes as v } from "@arcgis/toolkit/dom";
import { u as g } from "../../chunks/useT9n.js";
import { m as f } from "../../chunks/useViewModel.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const b = n`.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);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)}calcite-button{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}}:host{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}.compass{border-radius:50%;box-shadow:var(--arcgis-internal-box-shadow, none)}.compass__icon-container{justify-content:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.compass__icon-container:dir(rtl){transform:translate(50%,-50%)}`, o = "compass", e = {
  base: o,
  button: "arcgis-button",
  compassButton: `${o}__button`,
  iconContainer: `${o}__icon-container`
}, x = f(d);
class w extends h {
  constructor() {
    super(...arguments), this.messages = g(), this.viewModel = x(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.goToOverride = this.viewModel.goToOverride, this.orientation = this.viewModel.orientation, this.state = this.viewModel.state, this.arcgisPropertyChange = u()("state", "orientation"), this.arcgisReady = m();
  }
  static {
    this.properties = { view: 0, autoDestroyDisabled: 5, goToOverride: 0, icon: 3, label: 1, messageOverrides: 0, orientation: 0, position: 3, referenceElement: 1, state: 3 };
  }
  static {
    this.styles = b;
  }
  get icon() {
    return this._icon ?? (this.state === "rotation" ? "arrow-up" : "compass-needle");
  }
  set icon(t) {
    this._icon = t;
  }
  async destroy() {
    await this.manager.destroy();
  }
  async reset() {
    this.viewModel.reset();
  }
  _reset() {
    this.viewModel.reset();
  }
  render() {
    const { messages: t, icon: r } = this;
    return l`<div class=${i(v(e.base, e.button, e.compassButton))}><calcite-button .disabled=${this.state === "disabled"} kind=neutral .label=${t.reset} @click=${this._reset} round scale=s title=${t.reset ?? a}><div aria-hidden=true class=${i(e.iconContainer)} title=${t.reset ?? a}><calcite-icon .icon=${r} style=${p(y(this.orientation))}></calcite-icon></div></calcite-button></div>`;
  }
}
const y = (s) => ({
  transform: `rotateZ(${s.z}deg)`
});
c("arcgis-compass", w);
export {
  w as ArcgisCompass
};
