@arcgis/map-components/dist/components/arcgis-unit-select/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
import { repeat as o } from "lit/directives/repeat.js";
import { css as n, html as a } from "lit";
import { LitElement as m, createEvent as h } from "@arcgis/lumina";
import { u } from "../../chunks/useT9n.js";
import { i as g } from "../../chunks/measurementUtils.js";
const p = n`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}.root[layout=inline-space-between] calcite-select{width:var(--arcgis-unit-select-inline-size, 180px)}`;
class y extends m {
  constructor() {
    super(...arguments), this.messages = u({}), this.options = [], this.scale = "m", this.layout = "block", this.arcgisUnitSelectChange = h();
  }
  static {
    this.properties = { options: [1, { type: Array }], scale: 1, selectLabel: 1, value: 0, messageOverrides: 0, label: 1, layout: 1 };
  }
  static {
    this.styles = p;
  }
  async destroy() {
    await this.manager.destroy();
  }
  render() {
    const {
      messages: t,
      options: l = [],
      // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
      selectLabel: s,
      value: i,
      arcgisUnitSelectChange: c
    } = this;
    return a`<calcite-label class="root" .layout=${this.layout} .scale=${this.scale}>${s}<calcite-select .label=${s} @calciteSelectChange=${(e) => {
      c.emit(e.target.value);
    }} .scale=${this.scale}>${o(l, (e) => e, (e) => a`<calcite-option .selected=${e === i} .value=${e}>${g(e) ? t.systems?.[e] : t.units?.[e]?.pluralCapitalized}</calcite-option>`)}</calcite-select></calcite-label>`;
  }
}
r("arcgis-unit-select", y);
export {
  y as ArcgisUnitSelect
};