import { c as i } from "../../chunks/runtime.js";
import { css as r, html as l } from "lit";
import { LitElement as a, createEvent as u, safeClassMap as m, nothing as d } from "@arcgis/lumina";
import { usePropertyChange as h } from "@arcgis/lumina/controllers";
import { getClosestElement as g, classes as f } from "@arcgis/toolkit/dom";
import { u as p } from "../../chunks/useT9n.js";
import { u as x } from "../../chunks/useView.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 v = r`.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)}`, c = {
  base: "fullscreen",
  button: "arcgis-button"
};
function b(s) {
  return s.includes("#") || s.includes(".") || s.includes("[") ? s : `#${s}`;
}
class E extends a {
  constructor() {
    super(), this.messages = p(), this.view = x(this), this.arcgisPropertyChange = h()("state"), this.arcgisReady = u(), this.listenOn(document, "fullscreenchange", () => this.fullscreenElement = document.fullscreenElement);
  }
  static {
    this.properties = { fullscreenElement: 16, view: 0, element: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, state: 35 };
  }
  static {
    this.styles = v;
  }
  get fullscreenTitle() {
    const e = this.state;
    return e === "active" ? this.messages.exit : e === "ready" ? this.messages.enter : "";
  }
  #e;
  get element() {
    return this.#e;
  }
  set element(e) {
    if (typeof e == "string") {
      const t = b(e), n = g(this.el, t);
      this.#e = n || void 0;
    } else
      this.#e = e;
  }
  get state() {
    if (!document.fullscreenEnabled)
      return "unsupported";
    const e = this._getElement();
    return e ? this.fullscreenElement === e ? "active" : "ready" : "disabled";
  }
  connectedCallback() {
    super.connectedCallback(), this.fullscreenElement = document.fullscreenElement;
  }
  _getElement() {
    const e = this.view?.container, t = e?.getRootNode(), n = t instanceof ShadowRoot ? t.host : null;
    return this.element ?? e?.parentElement ?? n ?? null;
  }
  _toggle() {
    document.fullscreenElement ? document.exitFullscreen() : this._getElement()?.requestFullscreen();
  }
  render() {
    const { fullscreenTitle: e, state: t } = this, n = t === "unsupported", o = t === "ready" || t === "disabled" || t === "unsupported" ? "zoom-out-fixed" : "zoom-in-fixed";
    return l`<div class=${m(f(c.base, c.button))}>${!n && l`<calcite-button .disabled=${t === "disabled"} .iconStart=${o} kind=neutral .label=${e} @click=${this._toggle} title=${e ?? d}></calcite-button>` || ""}</div>`;
  }
}
i("arcgis-fullscreen", E);
export {
  E as ArcgisFullscreen
};
