/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as o } from "../../chunks/runtime.js";
import { formatNumber as u } from "@arcgis/core/intl.js";
import { LitElement as c, createEvent as h, safeClassMap as d } from "@arcgis/lumina";
import { createRef as s, ref as l } from "lit/directives/ref.js";
import { css as p, html as n } from "lit";
const m = p`:host{display:block}:host([hidden]){display:none}.content{display:flex;flex-direction:column}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:var(--calcite-font-line-height-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.content{align-items:start}.readOnlyLabel{text-align:start}}:host([alignment="end"]){.content{align-items:end}.readOnlyLabel{text-align:end}}:host([alignment="center"]){.content{align-items:center}.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
class f extends c {
  constructor() {
    super(...arguments), this._buttonRef = s(), this._inputRef = s(), this._labelRef = s(), this._formatOptions = {
      style: "decimal",
      useGrouping: !0,
      minimumFractionDigits: 0,
      maximumFractionDigits: 2
    }, this._formatValue = (t) => u(t, this._formatOptions), this._pointerDownPosition = null, this._displayedValue = "", this._editing = !1, this.alignment = "center", this.readOnly = !1, this.value = 0, this.arcgisChange = h({ cancelable: !1 });
  }
  static {
    this.properties = { _displayedValue: 16, _editing: 16, alignment: 3, editing: 39, labelFormatter: 0, readOnly: 7, value: 11 };
  }
  static {
    this.styles = m;
  }
  static {
    this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
  }
  get editing() {
    return this._editing;
  }
  async edit() {
    this._enterEdit();
  }
  getLabelBoundingClientRect() {
    return this._labelRef.value ? this._labelRef.value.getBoundingClientRect() : this.el.getBoundingClientRect();
  }
  willUpdate(t) {
    if (t.has("value") || t.has("labelFormatter")) {
      const e = this.value;
      this._displayedValue = this._internalLabelFormatter(e);
    }
  }
  updated(t) {
    const e = this._inputRef.value, i = this._buttonRef.value, a = this.renderRoot.querySelector(".readOnlyLabel");
    if (e && i && a) {
      const r = a.offsetWidth;
      i.style.width = `${r}px`, e.style.width = `${r}px`;
    }
  }
  _enterEdit() {
    this._editing || this.readOnly || (this._editing = !0, this.requestUpdate("editing", !1), this.updateComplete.then(async () => {
      const t = this._inputRef.value;
      await t?.setFocus(), await t?.selectText();
    }));
  }
  _exitEdit(t, e = !1) {
    this._editing && (t && this._commitValue(this._inputRef.value), this._displayedValue = this._internalLabelFormatter(this.value), this._inputRef.value && (this._inputRef.value.value = `${this.value}`), this._editing = !1, this.requestUpdate("editing", !0), e || this.updateComplete.then(async () => {
      await this._buttonRef.value?.setFocus();
    }));
  }
  _commitValue(t) {
    const e = this._parseNumber(t?.value ?? "");
    e !== null && this.value !== e && (this.value = e, this.arcgisChange.emit());
  }
  _parseNumber(t) {
    if (t.trim() === "")
      return null;
    const e = Number(t);
    return Number.isFinite(e) ? e : this.value ?? null;
  }
  _internalLabelFormatter(t) {
    const e = this.labelFormatter;
    if (!e)
      return this._formatValue(t);
    const i = e(t, this._formatValue);
    return i ?? this._formatValue(t);
  }
  _onBlur() {
    this._exitEdit(!0, !0);
  }
  _onValueChange(t) {
    this._commitValue(t.currentTarget);
  }
  _onKeyDown(t) {
    t.key === "Enter" ? (this._exitEdit(!0), t.stopPropagation(), t.preventDefault()) : t.key === "Escape" && (this._exitEdit(!1), t.stopPropagation(), t.preventDefault());
  }
  _onPointerDown(t) {
    this._pointerDownPosition = { x: t.clientX, y: t.clientY };
  }
  _onClick(t) {
    if (this._pointerDownPosition) {
      const e = t.clientX - this._pointerDownPosition.x, i = t.clientY - this._pointerDownPosition.y;
      if (Math.sqrt(e * e + i * i) > 2)
        return;
    }
    this._enterEdit(), this._pointerDownPosition = null;
  }
  _onInput(t) {
    const e = this._parseNumber(t.currentTarget.value ?? "");
    if (e === null) {
      this._displayedValue = "";
      return;
    }
    this._displayedValue = this._internalLabelFormatter(e);
  }
  render() {
    const { alignment: t, _displayedValue: e } = this, i = [
      n`<span class="readOnlyLabel"><span ${l(this._labelRef)}>${e}</span></span>`
    ];
    return this.readOnly || i.push(n`<calcite-button .alignment=${t} appearance=transparent .hidden=${this._editing} kind=neutral @pointerdown=${this._onPointerDown} @click=${this._onClick} scale=s width=full ${l(this._buttonRef)}>${e}</calcite-button>`, n`<calcite-input-number .alignment=${t} group-separator .hidden=${!this._editing} number-button-type=none @calciteInputNumberChange=${this._onValueChange} @keydown=${this._onKeyDown} @blur=${this._onBlur} @input=${this._onInput} scale=s status=idle .value=${`${this.value}`} ${l(this._inputRef)}></calcite-input-number>`), n`<div class=${d({
      content: !0
    })}>${i}</div>`;
  }
}
o("arcgis-label-input", f);
export {
  f as ArcgisLabelInput
};
