@arcgis/map-components/dist/components/arcgis-basemap-toggle/customElement.js

ArcGIS Map Components

import { c as B } from "../../chunks/runtime.js";
import { html as l } from "lit-html";
import { usePropertyChange as f } from "@arcgis/lumina/controllers";
import { classes as r } from "@arcgis/components-utils";
import { getBasemapThumbnailUrl as x } from "@arcgis/core/applications/Components/basemapUtils.js";
import S from "@arcgis/core/widgets/BasemapToggle/BasemapToggleViewModel.js";
import { LitElement as T, createEvent as M, noShadowRoot as k, safeClassMap as a, nothing as c, 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 $ } 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.33/esri/copyright.txt for details.
v4.33.13 */
const A = L`@layer{arcgis-basemap-toggle{display:block}.esri-basemap-toggle__title-wrap{text-wrap:wrap}}`, 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`,
  titleWrap: `${s}__title-wrap`,
  overlayScrim: `${o}__overlay-scrim`
}, D = C(S);
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 = f()("activeBasemap", "nextBasemap", "state"), this.arcgisReady = M();
  }
  static {
    this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, icon: 1, label: 1, messageOverrides: 0, nextBasemap: 1, position: 3, referenceElement: 1, showTitle: 5, state: 3 };
  }
  static {
    this.shadowRootOptions = k;
  }
  static {
    this.styles = A;
  }
  async destroy() {
    await this.manager.destroy();
  }
  async toggle() {
    return await this.viewModel.toggle();
  }
  _getThumbnailStyles(t) {
    const n = x(t);
    return n ? { backgroundImage: `url(${n})` } : { backgroundImage: "" };
  }
  render() {
    const t = this.viewModel, n = t.state === "disabled" ? null : t.activeBasemap, i = t.state === "disabled" ? null : t.nextBasemap, u = t.state === "loading", p = t.state === "incompatible-next-basemap", m = i?.title ?? "", d = i && i.loadStatus !== "loaded";
    let g;
    const h = this.showTitle && m, v = p, y = h || v, w = this._getThumbnailStyles(n), _ = this._getThumbnailStyles(i);
    return y && (g = l`<div class=${a(e.overlay)}>${h ? l`<span class=${a(r(e.title, e.titleWrap))} title=${m ?? c}>${m}</span>` : null}${v ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? c}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(r(e.base, $.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? c} .disabled=${p} kind=neutral .label=${this.label ?? void 0} @click=${() => void this.toggle()} title=${this.label ?? void 0 ?? c}><div class=${a(r(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${b(w)}></div></div><div class=${a(e.container)}><div class=${a(r(e.image, d ? e.imageLoading : null))} style=${b(_)}>${d || u ? l`<calcite-scrim><span aria-hidden=true class=${a($.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
  }
}
B("arcgis-basemap-toggle", E);
export {
  E as ArcgisBasemapToggle
};