@arcgis/map-components/dist/components/arcgis-elevation-profile-statistics/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as o, html as r } from "lit";
import c from "@arcgis/core/applications/Components/QuantityFormatter.js";
import { LitElement as v, createEvent as g } from "@arcgis/lumina";
const d = o`:host{--internal-block-spacing: var(--calcite-spacing-sm-plus);--internal-inline-spacing: var(--calcite-spacing-md);--internal-columns: 1;--internal-icon-size: 16px;container-type:inline-size}.container{display:grid;isolation:isolate;grid-template-columns:repeat(var(--internal-columns, 1),1fr);gap:var(--calcite-spacing-xxs) var(--calcite-spacing-md)}.statistic{display:block;width:max-content;text-align:start;white-space:nowrap}.statistic-label,.statistic-value,.slope-values{font-size:var(--calcite-font-size-xs);font-weight:var(--calcite-font-weight-bold)}.statistic-label{font-weight:var(--calcite-font-weight-regular)}.statistic-value{margin-top:-.15em}.slope-values{display:flex;align-items:center;calcite-icon{width:var(--internal-icon-size);height:var(--internal-icon-size)}}@container (width > 200px){.container{--internal-columns: 2}}@container (width > 400px){.container{--internal-columns: 4}}@container (width > 800px){.container{--internal-columns: 8}}`;
class p extends v {
  constructor() {
    super(...arguments), this._formatter = new c(), this.arcgisExpandedToggle = g();
  }
  static {
    this.properties = { effectiveDisplayUnits: 0, messages: 0, result: 0 };
  }
  static {
    this.styles = d;
  }
  async destroy() {
    await this.manager.destroy();
  }
  async load() {
    await this._formatter.when();
  }
  render() {
    const e = this.messages?.statistics;
    if (e)
      return r`<div class="container">${this._renderDistance("maxDistance", e.maxDistance)}${this._renderElevation("elevationGain", e.gain)}${this._renderElevation("elevationLoss", e.loss)}${this._renderElevation("minElevation", e.minElevation)}${this._renderElevation("maxElevation", e.maxElevation)}${this._renderElevation("avgElevation", e.avgElevation)}${this._renderSlope("maxPositiveSlope", "maxNegativeSlope", e.maxSlope)}${this._renderSlope("avgPositiveSlope", "avgNegativeSlope", e.avgSlope)}</div>`;
  }
  _renderDistance(e, i) {
    const a = this._renderValue(e, (t) => {
      const s = this.effectiveDisplayUnits?.distance;
      return s ? this._formatter.formatLength({ type: "length", value: t, unit: s }, n) : "";
    });
    return this._renderStatistic(i, a);
  }
  _renderElevation(e, i) {
    const a = this._renderValue(e, (t) => {
      const s = this.effectiveDisplayUnits?.elevation;
      return s ? this._formatter.formatVerticalLength({ type: "length", value: t, unit: s }, n) : "";
    });
    return this._renderStatistic(i, a);
  }
  _renderSlope(e, i, a) {
    return this._renderStatistic(a, r`<div class="slope-values"><calcite-icon icon=arrow-up scale=s></calcite-icon>${this._renderValue(e, (t) => this._formatter.formatAngleDegrees(t, "degrees", "geographic", "geographic", n))}<calcite-icon icon=arrow-down scale=s></calcite-icon>${this._renderValue(i, (t) => this._formatter.formatAngleDegrees(t, "degrees", "geographic", "geographic", n))}</div>`);
  }
  _renderStatistic(e, i) {
    return r`<div class="statistic"><label class="statistic-label">${e}</label><div class="statistic-value">${i}</div></div>`;
  }
  _renderValue(e, i) {
    const { result: a } = this, t = a?.progress === 1 ? a.statistics?.[e] : void 0;
    return t == null ? " ― " : i(t);
  }
}
const n = 1;
l("arcgis-elevation-profile-statistics", p);
export {
  p as ArcgisElevationProfileStatistics
};