@arcgis/map-components
Version:
ArcGIS Map Components
106 lines (105 loc) • 5.01 kB
JavaScript
import { c as v } from "../../chunks/runtime.js";
import { html as l } from "lit-html";
import { usePropertyChange as f } from "@arcgis/components-controllers";
import { classes as u } from "@arcgis/components-utils";
import { when as y, watch as b } from "@arcgis/core/core/reactiveUtils.js";
import $ from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
import { safeClassMap as n, LitElement as M, createEvent as x, noShadowRoot as L, nothing as p, safeStyleMap as R } from "@arcgis/lumina";
import { u as _ } from "../../chunks/useT9n.js";
import { m as B } from "../../chunks/useViewModel.js";
import { unsafeStatic as D, html as I } from "lit/static-html.js";
import { g as d } from "../../chunks/globalCss.js";
import { c as r } from "../../chunks/basemap-gallery-resources.js";
import { css as A } 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 */
function C({ level: o, class: s, children: e }) {
const i = k(o), t = `h${i}`, a = D(t);
return I`<${a} .ariaLevel=${String(i)} class=${n(u(d.heading, s))} role=heading>${e}</${a}>`;
}
function E(o, s, e) {
return Math.min(Math.max(o, s), e);
}
function k(o) {
return E(Math.ceil(o), 1, 6);
}
const S = A`{arcgis-basemap-gallery{display:block}}`, G = B($), m = {
// Below this width, items are displayed as a single column and the thumbnail is placed above the title.
small: 200,
// Below this width, items are displayed as a single column but with the thumbnail side-by-side
// with the title. The title is square.
default: 280,
// Below this width, items are displayed as in `default`, but the thumbnail has an aspect ratio of 1.5
// Above this width, items are displayed in a grid.
wide: 420
};
class K extends M {
constructor() {
super(...arguments), this.messages = _({}), this.viewModel = G(this), this._width = 0, this._state = "", this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.arcgisPropertyChange = f()("activeBasemap", "state"), this.arcgisReady = x();
}
static {
this.properties = { _width: 16, _state: 16, activeBasemap: 0, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, position: 1, referenceElement: 1, source: 0, state: 3 };
}
static {
this.shadowRootOptions = L;
}
static {
this.styles = S;
}
//#endregion
//#region Public Methods
/** Permanently destroy the component */
async destroy() {
await this.manager.destroy();
}
//#endregion
//#region Lifecycle
loaded() {
this.manager.onLifecycle(() => [
y(() => this.source, () => {
this.viewModel.loadSource();
}, { sync: !0, initial: !0 }),
b(() => this.source.state, () => {
this._state = this.source.state;
}, { sync: !0 })
]);
const s = new ResizeObserver((i) => {
for (const t of i)
this._width = t.contentRect.width;
}), e = this.el.childElem;
e && s.observe(e);
}
//#endregion
//#region Private Methods
_getRoundRobinIndex(s, e) {
return (s + e) % e;
}
_handleKeyDown(s) {
const { key: e } = s;
if (!["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(e))
return;
s.preventDefault();
const { items: t, activeBasemapIndex: a } = this.viewModel, h = e === "ArrowUp" || e === "ArrowLeft" ? this._getRoundRobinIndex(Math.max(a - 1, -1), t.length) : this._getRoundRobinIndex(a + 1, t.length), c = t.at(h);
c?.state === "ready" && (this.viewModel.activeBasemap = c.basemap);
}
//#endregion
//#region Rendering
render() {
const s = this.source.state === "loading", e = this.disabled || this.state === "disabled", i = this.viewModel.items, t = {
[r.sourceLoading]: s,
[d.disabled]: e,
"esri-component": !0
// For compatibility with Esri View UI
}, a = this._width;
a <= m.small || a >= m.wide ? t[r.layoutGrid] = !0 : a < m.default && (t[r.narrowItems] = !0);
const h = s ? l`<div class=${n(r.loader)}></div>` : null, c = s ? null : i.length > 0 ? l`<div aria-disabled=${this.disabled ?? p} aria-label=${this.label ?? p} class=${n(r.itemContainer)} =${this._handleKeyDown} role=radiogroup>${i.map((g, w) => l`<arcgis-basemap-gallery-item .disabled=${e} .item=${g} .itemIndex=${w} .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-basemap-gallery-item>`)}</div>` : l`<div class=${n(d.empty)}>${C({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
return l`<div class=${n(u(r.base, d.widget, d.panel, t))} style=${R({
"--esri-basemap-gallery-small": `${m.small}px`
})}>${[h, c]}</div>`;
}
}
v("arcgis-basemap-gallery", K);
export {
K as ArcgisBasemapGallery
};