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