@arcgis/map-components
Version:
ArcGIS Map Components
87 lines (86 loc) • 4.51 kB
JavaScript
import { c as u } from "../../chunks/runtime.js";
import { html as r } from "lit-html";
import { usePropertyChange as w } from "@arcgis/lumina/controllers";
import { classes as v } from "@arcgis/components-utils";
import { when as y, watch as b } from "@arcgis/core/core/reactiveUtils.js";
import f from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
import { LitElement as $, createEvent as M, noShadowRoot as x, safeClassMap as n, nothing as h, safeStyleMap as R } from "@arcgis/lumina";
import { u as _ } from "../../chunks/useT9n.js";
import { m as B } from "../../chunks/useViewModel.js";
import { H as I } from "../../chunks/heading.js";
import { g as d } from "../../chunks/globalCss.js";
import { c as a } from "../../chunks/basemap-gallery-resources.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 D = L`{arcgis-basemap-gallery{display:block}}`, A = B(f), 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 C extends $ {
constructor() {
super(...arguments), this.messages = _({}), this.viewModel = A(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 = w()("activeBasemap", "state"), this.arcgisReady = M();
}
static {
this.properties = { _width: 16, _state: 16, activeBasemap: 1, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, source: 0, state: 3 };
}
static {
this.shadowRootOptions = x;
}
static {
this.styles = D;
}
async destroy() {
await this.manager.destroy();
}
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((o) => {
for (const t of o)
this._width = t.contentRect.width;
}), e = this.el.childElem;
e && s.observe(e);
}
_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: i } = this.viewModel, c = e === "ArrowUp" || e === "ArrowLeft" ? this._getRoundRobinIndex(Math.max(i - 1, -1), t.length) : this._getRoundRobinIndex(i + 1, t.length), l = t.at(c);
l?.state === "ready" && (this.viewModel.activeBasemap = l.basemap);
}
render() {
const s = this.source.state === "loading", e = this.disabled || this.state === "disabled", o = this.viewModel.items, t = {
[a.sourceLoading]: s,
[d.disabled]: e,
"esri-component": !0
// For compatibility with Esri View UI
}, i = this._width;
i <= m.small || i >= m.wide ? t[a.layoutGrid] = !0 : i < m.default && (t[a.narrowItems] = !0);
const c = s ? r`<div class=${n(a.loader)}></div>` : null, l = s ? null : o.length > 0 ? r`<div aria-disabled=${this.disabled ?? h} aria-label=${this.label ?? h} class=${n(a.itemContainer)} =${this._handleKeyDown} role=radiogroup>${o.map((p, g) => r`<arcgis-basemap-gallery-item .disabled=${e} .item=${p} .itemIndex=${g} .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-basemap-gallery-item>`)}</div>` : r`<div class=${n(d.empty)}>${I({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
return r`<div class=${n(v(a.base, d.widget, d.panel, t))} style=${R({
"--esri-basemap-gallery-small": `${m.small}px`
})}>${[c, l]}</div>`;
}
}
u("arcgis-basemap-gallery", C);
export {
C as ArcgisBasemapGallery
};