@arcgis/map-components/dist/components/arcgis-measurement-content/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
import { css as s, html as e } from "lit";
import { ref as l } from "lit/directives/ref.js";
import c from "@arcgis/core/applications/Components/QuantityFormatter.js";
import { LitElement as o, safeClassMap as n } from "@arcgis/lumina";
import { generateGuid as u } from "@arcgis/toolkit/string";
import { f as g } from "../../chunks/measurementUtils.js";
const m = s`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--arcgis-internal-panel-gap);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.results-grid{display:grid;column-gap:var(--calcite-spacing-xxs);row-gap:var(--calcite-spacing-md);grid-template-columns:auto minmax(0,1fr) max-content;&.vertical{display:flex;flex-direction:column;align-items:flex-start;.item{display:block}.title{margin-bottom:var(--calcite-spacing-xxs)}.value{align-self:flex-start}}}.item{display:contents;&.disabled>*{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}}.title{grid-column:1;--calcite-label-margin-bottom: 0}.value{grid-column:2;font-weight:var(--calcite-font-weight-semibold);white-space:normal;min-width:0;max-width:100%;align-self:center;justify-self:flex-end;text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty;&:has(~:empty){grid-column:span 2}~:empty{display:none}}.unit{font-weight:var(--calcite-font-weight-semibold);text-align:left;grid-column:3;align-self:center}.actions{justify-content:center;gap:var(--arcgis-internal-panel-actions-gap);&[hidden]{display:none}}`;
class p extends o {
  constructor() {
    super(...arguments), this._formatter = new c(), this._baseId = u(), this._hasActionsContent = !1, this.layout = "horizontal", this.items = [], this.state = "disabled", this.unsupportedLabel = "";
  }
  static {
    this.properties = { _hasActionsContent: 16, hintLabel: 1, layout: 1, items: 0, state: 1, unsupportedLabel: 1 };
  }
  static {
    this.styles = m;
  }
  async load() {
    await this._formatter.when();
  }
  _actionsRef(a) {
    this._updateHasActionsContent(a);
  }
  _updateHasActionsContent(a) {
    this._hasActionsContent = a != null && a.assignedNodes({ flatten: !0 }).length > 0;
  }
  render() {
    switch (this.state) {
      case "unsupported":
        return e`<section class="error"><p>${this.unsupportedLabel}</p></section>`;
      case "measuring":
        return e`<section class="hint"><p>${this.hintLabel}</p></section>`;
      case "ready":
        return this._renderActions();
      default:
        return e`<slot name=settings></slot>${d({ idBase: this._baseId, formatter: this._formatter, items: this.items, layout: this.layout })}${this._renderActions()}`;
    }
  }
  _renderActions() {
    return e`<div class="actions" .hidden=${!this._hasActionsContent}><slot name=actions @slotchange=${({ currentTarget: a }) => {
      this._updateHasActionsContent(a);
    }} ${l(this._actionsRef)}></slot></div>`;
  }
}
function d(t) {
  return e`<section class=${n({
    "results-grid": !0,
    vertical: t.layout === "vertical"
  })}>${t.items.map((a, i) => v({ formatter: t.formatter, measurement: a.measurement, title: a.title, valueId: `${t.idBase}-item-${i}` }))}</section>`;
}
function h(t) {
  const [a = "-", i = ""] = t.value?.split(" ") ?? [];
  return e`<output aria-live=polite class="value">${a}</output><span class="unit">${i}</span>`;
}
function v(t) {
  const a = t.measurement.state === "available" ? g(t.formatter, t.measurement.value) : null;
  return e`<div class=${n({
    item: !0,
    disabled: t.measurement.state !== "available"
  })}><calcite-label layout=inline class="title" .for=${t.valueId}>${t.title ?? ""}</calcite-label>${h({ value: a })}</div>`;
}
r("arcgis-measurement-content", p);
export {
  p as ArcgisMeasurementContent
};