UNPKG

@arcgis/map-components

Version:
61 lines (60 loc) 3.02 kB
import { g as y, c as I } from "../../chunks/runtime.js"; import { classes as B } from "@arcgis/components-utils"; import { watch as g } from "@arcgis/core/core/reactiveUtils.js"; import { LitElement as w, noShadowRoot as C, nothing as r, safeClassMap as s } from "@arcgis/lumina"; import { html as l } from "lit-html"; import { g as x } from "../../chunks/globalCss.js"; import { c as i } from "../../chunks/basemap-gallery-resources.js"; import { g as A } from "../../chunks/component-utils.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 */ function _(e) { return e.portalItem?.type === "Web Scene" || e.referenceLayers.some((t) => t.type === "scene"); } function S(e) { return !!e?.portalItem?.tags?.some((t) => t.toLowerCase() === "beta"); } class T extends w { constructor() { super(...arguments), this._itemState = "loading", this._isActive = !1; } static { this.properties = { _itemState: 16, _isActive: 16, disabled: 5, item: 0, itemIndex: 9, viewModel: 0, messages: 0 }; } static { this.shadowRootOptions = C; } loaded() { this.manager.onLifecycle(() => [ g(() => this.item.state, (t) => { this._itemState = t; }, { sync: !0 }), g(() => this.viewModel.activeBasemap, (t) => { this._isActive = this.item.basemap.id === t?.id, this._isActive && (A(this)?.focus(), this.el.scrollIntoView({ block: "nearest" })); }, { initial: !0, sync: !0 }) ]); } render() { const { disabled: t, item: a, itemIndex: o, viewModel: c, messages: h } = this, u = a.basemap.thumbnailUrl || y("assets/basemap-gallery/images/basemap-toggle-64.svg"), m = a.basemap.title, b = a.basemap.portalItem?.snippet, $ = a.error?.message || b || m, { activeBasemapIndex: p } = c, n = p === o, f = n || p === -1 && o === 0 ? 0 : -1, v = { [i.selectedItem]: n, [i.itemError]: a.state === "error" }, d = `basemapgallery-item-${a.uid}`; return l`<div .ariaChecked=${n} .ariaDisabled=${t} aria-labelledby=${d ?? r} class=${s(B(i.item, v))} role=radio tabindex=${f ?? r} title=${$ ?? r} @click=${() => { a.state === "ready" && (c.activeBasemap = a.basemap); }}><img alt class=${s(i.itemThumbnail)} src=${u ?? r}><div class=${s(i.itemContent)}><div class=${s(i.itemTitle)}><span id=${d ?? r}>${m}</span></div>${_(a.basemap) ? D(a.basemap, h) : null}</div>${a.state !== "loading" ? null : l`<calcite-scrim><span aria-hidden=true class=${s(x.loaderAnimation)} role=presentation></span></calcite-scrim>`}</div>`; } } function D(e, t) { return l`<div class=${s(i.itemTagsContainer)}>${L(t)}${S(e) ? M(t) : null}</div>`; } function L(e) { return l`<calcite-chip scale=s .label=${e.tag3D}>${e.tag3D}</calcite-chip>`; } function M(e) { return l`<calcite-chip appearance=outline-fill scale=s .label=${e.tagBeta}>${e.tagBeta}</calcite-chip>`; } I("arcgis-basemap-gallery-item", T); export { T as ArcgisBasemapGalleryItem };