@arcgis/map-components
Version:
ArcGIS Map Components
64 lines (63 loc) • 3.16 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/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} =${this._toggle} .scale=${this.visualScale} title=${e ?? m}></calcite-button>` || ""}</div>`;
}
}
c("arcgis-fullscreen", x);
export {
x as ArcgisFullscreen
};