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

ArcGIS Map Components

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