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

ArcGIS Map Components

import { c as o } from "../../chunks/runtime.js";
import { html as l } from "lit-html";
import { usePropertyChange as a } from "@arcgis/lumina/controllers";
import { closestElement as m, classes as u } from "@arcgis/components-utils";
import { LitElement as d, createEvent as f, safeClassMap as i, nothing as h } from "@arcgis/lumina";
import { u as p } from "../../chunks/useT9n.js";
import { g as r } from "../../chunks/globalCss.js";
import { css as g } from "@lit/reactive-element/css-tag.js";
import { u as E } from "../../chunks/useView.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const b = g`arcgis-fullscreen{display:block}`, y = {
  base: "esri-fullscreen"
};
function $(s) {
  return s.includes("#") || s.includes(".") || s.includes("[") ? s : `#${s}`;
}
class v extends d {
  constructor() {
    super(), this.messages = p(), this.view = E(this), this.position = "top-left", this.arcgisPropertyChange = a()("state"), this.arcgisReady = f(), this.listenOn(document, "fullscreenchange", () => this.fullscreenElement = document.fullscreenElement);
  }
  static {
    this.properties = { fullscreenElement: 16, element: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 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), n = m(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() {
    return this.element ?? this.view?.container?.parentElement ?? null;
  }
  _toggle() {
    document.fullscreenElement ? document.exitFullscreen() : this._getElement()?.requestFullscreen();
  }
  render() {
    const { fullscreenTitle: e, state: t } = this, n = t === "unsupported", c = t === "ready" || t === "disabled" || t === "unsupported" ? "zoom-out-fixed" : "zoom-in-fixed";
    return l`<div class=${i(u(y.base, r.widget))}>${!n && l`<calcite-button class=${i(r.widgetButton)} .disabled=${t === "disabled"} .iconStart=${c} kind=neutral .label=${e} @click=${this._toggle} title=${e ?? h}></calcite-button>` || ""}</div>`;
  }
}
o("arcgis-fullscreen", v);
export {
  v as ArcgisFullscreen
};