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