@arcgis/map-components
Version:
ArcGIS Map Components
49 lines (48 loc) • 2.41 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c } from "../../chunks/runtime.js";
import { css as n, html as o } from "lit";
import { watch as s } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as r } from "@arcgis/lumina";
const p = n`.scale-input-container{display:flex;align-items:center;padding-bottom:var(--calcite-spacing-md)}.scale-input-container .scale-input{flex-grow:1}`;
class d extends r {
constructor() {
super(...arguments), this._scale = 0, this._scaleEnabled = !1;
}
static {
this.properties = { _scale: 16, _scaleEnabled: 16, viewModel: 0, messages: 0 };
}
static {
this.styles = p;
}
loaded() {
this.manager.onLifecycle(() => [
s(() => [this.viewModel.templateOptions.scale, this.viewModel.templateOptions.scaleEnabled], () => {
const { scale: e, scaleEnabled: t } = this.viewModel.templateOptions;
this._scale = e, this._scaleEnabled = t;
}, { initial: !0 }),
s(() => this.viewModel.view?.scale, (e) => {
e && (!this.viewModel.templateOptions.scaleEnabled || !this.viewModel.templateOptions.scale) && (this.viewModel.templateOptions.scale = e);
}, { initial: !0 })
]);
}
_resetToCurrentScale() {
this.viewModel.templateOptions.scale = this.viewModel.view?.scale;
}
render() {
const { messages: e, _scale: t, _scaleEnabled: l } = this;
return o`<div class="scale-info-container"><calcite-label layout=inline><calcite-checkbox .checked=${l} @calciteCheckboxChange=${(a) => {
this.viewModel.templateOptions.scaleEnabled = a.target.checked, this._resetToCurrentScale();
}}></calcite-checkbox>${e.scale}</calcite-label><div class="scale-input-container"><calcite-input-number .ariaLabel=${e.scaleLabel} .ariaValueNow=${`${t}`} class="scale-input" .disabled=${!l} .value=${`${t}`} .max=${Number.MAX_SAFE_INTEGER} @calciteInputNumberInput=${(a) => {
const i = Number(a.target.value);
if (Number.isNaN(i) || i <= 0 || !Number.isFinite(i)) {
a.target.value = `${t}`;
return;
}
this.viewModel.templateOptions.scale = i;
}}></calcite-input-number><calcite-button appearance=outline .ariaLabel=${e.reset} .disabled=${!l} icon-start=refresh kind=neutral @click=${() => this._resetToCurrentScale()}></calcite-button></div></div>`;
}
}
c("arcgis-print-scale-section", d);
export {
d as PrintScaleSection
};