@arcgis/map-components
Version:
ArcGIS Map Components
60 lines (59 loc) • 2.64 kB
JavaScript
import { c as n } from "../../chunks/runtime.js";
import { html as i } from "lit-html";
import o from "@arcgis/core/applications/Components/QuantityFormatter.js";
import { LitElement as c, safeClassMap as s } from "@arcgis/lumina";
import { f as l } from "../../chunks/measurementUtils.js";
import { css as m } 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 u = m`:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.item-disabled{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}.item-value{font-weight:var(--calcite-font-weight-semibold)}.actions{justify-content:center}`, e = {
error: "error",
hint: "hint",
actions: "actions",
section: "section",
item: "item",
itemDisabled: "item-disabled",
itemTitle: "item-title",
itemValue: "item-value"
};
class d extends c {
constructor() {
super(...arguments), this._formatter = new o(), this.items = [], this.state = "disabled", this.unsupportedLabel = "";
}
static {
this.properties = { hintLabel: 1, items: 0, state: 1, unsupportedLabel: 1 };
}
static {
this.styles = u;
}
async load() {
await this._formatter.when();
}
render() {
switch (this.state) {
case "unsupported":
return i`<section class=${s(e.error)}><p>${this.unsupportedLabel}</p></section>`;
case "measuring":
return i`<section class=${s(e.hint)}><p>${this.hintLabel}</p></section>`;
case "ready":
return i`<div class=${s(e.actions)}><slot name=actions></slot></div>`;
default:
return i`<slot name=settings></slot>${h({ formatter: this._formatter, items: this.items })}<div class=${s(e.actions)}><slot name=actions></slot></div>`;
}
}
}
function h(t) {
return i`<section class=${s(e.section)}>${t.items.map((a) => f({ formatter: t.formatter, measurement: a.measurement, title: a.title }))}</section>`;
}
function f(t) {
const a = t.measurement.state === "available" ? l(t.formatter, t.measurement.value) : null, r = t.measurement.state === "unavailable";
return i`<div class=${s({
[e.item]: !0,
[e.itemDisabled]: r
})}><span class=${s(e.itemTitle)}>${t.title}</span><span aria-live=polite class=${s(e.itemValue)}>${a ?? "-"}</span></div>`;
}
n("arcgis-measurement-content", d);
export {
d as ArcgisMeasurementContent
};