@arcgis/map-components
Version:
ArcGIS Map Components
60 lines (59 loc) • 2.97 kB
JavaScript
import { c } from "../../chunks/runtime.js";
import { html as m } from "lit-html";
import { usePropertyChange as u } from "@arcgis/components-controllers";
import { classes as t } from "@arcgis/components-utils";
import d from "@arcgis/core/widgets/Zoom/ZoomViewModel.js";
import { LitElement as h, createEvent as z, noShadowRoot as p, safeClassMap as s, nothing as a } from "@arcgis/lumina";
import { u as g } from "../../chunks/useT9n.js";
import { m as b } from "../../chunks/useViewModel.js";
import { css as y } 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 */
const o = {
base: "arcgis-zoom",
horizontalLayout: "arcgis-zoom--horizontal",
button: "esri-widget--button",
zoomIn: "arcgis-zoom__zoom-in",
zoomOut: "arcgis-zoom__zoom-out"
}, f = y`{arcgis-zoom,.arcgis-zoom{display:flex;flex-flow:column nowrap}.arcgis-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.arcgis-zoom--horizontal{flex-flow:row-reverse nowrap}.arcgis-zoom--horizontal .arcgis-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}}`, w = b(d);
class v extends h {
constructor() {
super(...arguments), this.messages = g({}), this.viewModel = w(this), this.canZoomIn = this.viewModel.canZoomIn, this.canZoomOut = this.viewModel.canZoomOut, this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.position = "top-left", this.state = this.viewModel.state, this.arcgisPropertyChange = u()("state"), this.arcgisReady = z();
}
static {
this.properties = { canZoomIn: 16, canZoomOut: 16, autoDestroyDisabled: 5, icon: 3, label: 1, layout: 3, messageOverrides: 0, position: 1, referenceElement: 1, state: 3 };
}
static {
this.shadowRootOptions = p;
}
static {
this.styles = f;
}
// #endregion
// #region Public Methods
/** Permanently destroy the component */
async destroy() {
await this.manager.destroy();
}
/** Zooms the view in by an LOD factor of 0.5. */
async zoomIn() {
this.viewModel.zoomIn();
}
/** Zooms the view out by an LOD factor of 2. */
async zoomOut() {
this.viewModel.zoomOut();
}
// #endregion
// #region Rendering
render() {
const r = {
[o.horizontalLayout]: this.layout === "horizontal"
}, { canZoomIn: n, canZoomOut: l } = this.viewModel, { zoomIn: e, zoomOut: i } = this.messages;
return m`<div class=${s(t(o.base, r))}><calcite-button class=${s(t(o.button, o.zoomIn))} .disabled=${!n} icon-start=plus kind=neutral .label=${e} =${this.zoomIn} title=${e ?? a}></calcite-button><calcite-button class=${s(t(o.button, o.zoomOut))} .disabled=${!l} icon-start=minus kind=neutral .label=${i} =${this.zoomOut} title=${i ?? a}></calcite-button></div>`;
}
}
c("arcgis-zoom", v);
export {
v as ArcgisZoom
};