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