import { c as r } from "../../chunks/runtime.js";
import { repeat as n } from "lit/directives/repeat.js";
import { css as m, html as a } from "lit";
import { u as o } from "../../chunks/useT9n.js";
import { LitElement as g, createEvent as u, safeClassMap as p } from "@arcgis/lumina";
import { i as h } from "../../chunks/measurementUtils.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const b = m`.arcgis-unit-select{width:100%}.arcgis-unit-select__label{--calcite-label-margin-bottom: 0;width:100%}`, $ = "arcgis-unit-select", d = {
  label: `${$}__label`
};
class y extends g {
  constructor() {
    super(...arguments), this.messages = o({}), this.options = [], this.arcgisUnitSelectChange = u();
  }
  static {
    this.properties = { options: [1, { type: Array }], selectLabel: 1, value: 0, messageOverrides: 0, label: 1 };
  }
  static {
    this.styles = b;
  }
  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: c,
      arcgisUnitSelectChange: i
    } = this;
    return a`<calcite-label class=${p(d.label)}>${s}<calcite-select .label=${s} @calciteSelectChange=${(e) => {
      i.emit(e.target.value);
    }}>${n(l, (e) => e, (e) => a`<calcite-option .selected=${e === c} .value=${e}>${h(e) ? t.systems?.[e] : t.units?.[e]?.pluralCapitalized}</calcite-option>`)}</calcite-select></calcite-label>`;
  }
}
r("arcgis-unit-select", y);
export {
  y as ArcgisUnitSelect
};
