@arcgis/map-components
Version:
ArcGIS Map Components
67 lines (66 loc) • 3.96 kB
JavaScript
import { c as f } from "../../chunks/runtime.js";
import { html as l } from "lit-html";
import { usePropertyChange as B } from "@arcgis/components-controllers";
import { classes as m } from "@arcgis/components-utils";
import { getBasemapThumbnailUrl as S } from "@arcgis/core/applications/Components/basemapUtils.js";
import x from "@arcgis/core/widgets/BasemapToggle/BasemapToggleViewModel.js";
import { LitElement as T, createEvent as M, noShadowRoot as k, safeClassMap as a, nothing as r, safeStyleMap as b } from "@arcgis/lumina";
import { u as I } from "../../chunks/useT9n.js";
import { m as C } from "../../chunks/useViewModel.js";
import { g as u } from "../../chunks/globalCss.js";
import { css as L } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
v4.32.14 */
const A = L`@layer{arcgis-basemap-toggle{display:block}}`, s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
base: s,
secondaryBasemapImage: `${s}__image--secondary`,
container: `${o} ${s}__container`,
image: `${o}__image ${s}__image`,
imageLoading: `${s}__image--loading`,
overlay: `${o}__overlay ${s}__image-overlay`,
title: `${o}__title ${s}__title`,
overlayScrim: `${o}__overlay-scrim`
}, D = C(x);
class E extends T {
constructor() {
super(...arguments), this.messages = I(), this.viewModel = D(this), this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.icon = "layer-basemap", this.nextBasemap = this.viewModel.nextBasemap, this.position = "top-left", this.showTitle = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = B()("nextBasemap", "state"), this.arcgisReady = M();
}
static {
this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, nextBasemap: 0, position: 3, referenceElement: 1, showTitle: 5, state: 3 };
}
static {
this.shadowRootOptions = k;
}
static {
this.styles = A;
}
// #endregion
// #region Public Methods
/** Permanently destroy the component */
async destroy() {
await this.manager.destroy();
}
/** Toggles to the [next basemap](#nextBasemap). */
async toggle() {
return await this.viewModel.toggle();
}
// #endregion
// #region Private Methods
_getThumbnailStyles(t) {
const n = S(t);
return n ? { backgroundImage: `url(${n})` } : { backgroundImage: "" };
}
// #endregion
// #region Rendering
render() {
const t = this.viewModel, n = t.state === "disabled" ? null : t.activeBasemap, i = t.state === "disabled" ? null : t.nextBasemap, $ = t.state === "loading", d = t.state === "incompatible-next-basemap", c = i?.title ?? "", p = i && i.loadStatus !== "loaded";
let g;
const h = this.showTitle && c, v = d, y = h || v, w = this._getThumbnailStyles(n), _ = this._getThumbnailStyles(i);
return y && (g = l`<div class=${a(e.overlay)}>${h ? l`<span class=${a(e.title)} title=${c ?? r}>${c}</span>` : null}${v ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? r}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(m(e.base, u.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? r} .disabled=${d} kind=neutral .label=${this.label ?? void 0} @click=${() => void this.toggle()} title=${this.label ?? void 0 ?? r}><div class=${a(m(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${b(w)}></div></div><div class=${a(e.container)}><div class=${a(m(e.image, p ? e.imageLoading : null))} style=${b(_)}>${p || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(u.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
}
}
f("arcgis-basemap-toggle", E);
export {
E as ArcgisBasemapToggle
};