/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as o, html as e } from "lit";
import { keyed as n } from "lit/directives/keyed.js";
import { LitElement as m, createEvent as u } from "@arcgis/lumina";
import { u as g } from "../../chunks/useT9n.js";
import { i as d } from "../../chunks/measurementUtils.js";
const h = o`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}calcite-radio-button-group{padding:var(--calcite-spacing-sm)}`;
class p extends m {
  constructor() {
    super(...arguments), this.messages = g({}), this.options = [], this.scale = "m", this.layout = "block", this.arcgisUnitSelectChange = u();
  }
  static {
    this.properties = { options: [1, { type: Array }], scale: 1, name: 1, value: 0, messageOverrides: 0, label: 1, layout: 1 };
  }
  static {
    this.styles = h;
  }
  async destroy() {
    await this.manager.destroy();
  }
  render() {
    const {
      messages: a,
      options: s = [],
      // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
      name: i,
      value: r,
      arcgisUnitSelectChange: c
    } = this;
    return e`<calcite-radio-button-group layout=vertical .name=${i} @calciteRadioButtonGroupChange=${(t) => {
      c.emit(t.target.selectedItem?.value);
    }} .scale=${this.scale}>${s.map((t) => e`<calcite-label layout=inline .scale=${this.scale}>${n(t, e`<calcite-radio-button .checked=${t === r} .scale=${this.scale} .value=${t}></calcite-radio-button>`)}${d(t) ? a.systems?.[t] : a.units?.[t]?.pluralCapitalized}</calcite-label>`)}</calcite-radio-button-group>`;
  }
}
l("arcgis-unit-radio-button-group", p);
export {
  p as ArcgisUnitRadioButtonGroup
};
