/*! Copyright 2026 Fonticons, Inc. - https://webawesome.com/license */
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
import { html } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { live } from "lit/directives/live.js";
import { warnDeprecatedSize } from "../../internal/size.js";
import { HasSlotController } from "../../internal/slot.js";
import { submitOnEnter } from "../../internal/submit-on-enter.js";
import { MirrorValidator } from "../../internal/validators/mirror-validator.js";
import { watch } from "../../internal/watch.js";
import { WebAwesomeFormAssociatedElement } from "../../internal/webawesome-form-associated-element.js";
import formControlStyles from "../../styles/component/form-control.styles.js";
import sizeStyles from "../../styles/component/size.styles.js";
import { LocalizeController } from "../../utilities/localize.js";
import "../icon/icon.js";
import styles from "./number-input.styles.js";
let WaNumberInput = class extends WebAwesomeFormAssociatedElement {
  constructor() {
    super(...arguments);
    this.assumeInteractionOn = ["blur", "input"];
    this.hasSlotController = new HasSlotController(this, "hint", "label");
    this.localize = new LocalizeController(this);
    this.title = "";
    // make reactive to pass through
    this._value = null;
    this.defaultValue = this.getAttribute("value") || null;
    this.size = "m";
    this.appearance = "outlined";
    this.pill = false;
    this.label = "";
    this.hint = "";
    this.placeholder = "";
    this.readonly = false;
    this.required = false;
    this.step = 1;
    this.withoutSteppers = false;
    this.inputmode = "numeric";
    this.withLabel = false;
    this.withHint = false;
  }
  static get validators() {
    return [...super.validators, MirrorValidator()];
  }
  /** The current value of the input, submitted as a name/value pair with form data. */
  get value() {
    if (this.valueHasChanged) {
      return this._value;
    }
    return this._value ?? this.defaultValue;
  }
  set value(val) {
    if (this._value === val) {
      return;
    }
    this.valueHasChanged = true;
    this._value = val;
  }
  handleSizeChange() {
    warnDeprecatedSize(this.localName, this.size);
  }
  /** Returns true if the value is at or below the minimum. */
  get isAtMin() {
    if (this.min === void 0) return false;
    const numValue = parseFloat(this.value || "");
    return !isNaN(numValue) && numValue <= this.min;
  }
  /** Returns true if the value is at or above the maximum. */
  get isAtMax() {
    if (this.max === void 0) return false;
    const numValue = parseFloat(this.value || "");
    return !isNaN(numValue) && numValue >= this.max;
  }
  handleChange(event) {
    this.value = this.input.value;
    this.relayNativeEvent(event, { bubbles: true, composed: true });
  }
  handleInput() {
    this.value = this.input.value;
  }
  handleKeyDown(event) {
    submitOnEnter(event, this);
    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      requestAnimationFrame(() => {
        if (this.value !== this.input.value) {
          this.value = this.input.value;
        }
      });
    }
  }
  handleStepperPointerUp(direction, event) {
    if (this.disabled || this.readonly) return;
    const beforeInputEvent = new InputEvent("beforeinput", { bubbles: true, cancelable: true, composed: true });
    this.dispatchEvent(beforeInputEvent);
    if (beforeInputEvent.defaultPrevented) return;
    if (direction === "up") {
      this.input.stepUp();
    } else {
      this.input.stepDown();
    }
    if (this.value !== this.input.value) {
      this.value = this.input.value;
    }
    this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    if (event.pointerType !== "touch") {
      this.input.focus();
    }
  }
  handleStepperPointerDown(event) {
    if (event.pointerType === "touch") return;
    event.preventDefault();
    this.input.focus();
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("value") || changedProperties.has("defaultValue")) {
      if (this.input && this.value && this.input.value !== this.value) {
        this._value = this.input.value;
      }
      this.customStates.set("blank", !this.value);
    }
  }
  handleStepChange() {
    this.input.step = String(this.step);
    this.updateValidity();
  }
  /** Sets focus on the input. */
  focus(options) {
    this.input.focus(options);
  }
  /** Removes focus from the input. */
  blur() {
    this.input.blur();
  }
  /** Selects all the text in the input. */
  select() {
    this.input.select();
  }
  /** Increments the value by the step amount. */
  stepUp() {
    this.input.stepUp();
    if (this.value !== this.input.value) {
      this.value = this.input.value;
    }
  }
  /** Decrements the value by the step amount. */
  stepDown() {
    this.input.stepDown();
    if (this.value !== this.input.value) {
      this.value = this.input.value;
    }
  }
  formResetCallback() {
    this.value = this.defaultValue;
    super.formResetCallback();
  }
  render() {
    const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test("label") : this.withLabel;
    const hasHintSlot = this.hasUpdated ? this.hasSlotController.test("hint") : this.withHint;
    const hasLabel = this.label ? true : !!hasLabelSlot;
    const hasHint = this.hint ? true : !!hasHintSlot;
    return html`
      <label
        part="form-control-label label"
        class=${classMap({
      label: true,
      "has-label": hasLabel
    })}
        for="input"
        aria-hidden=${hasLabel ? "false" : "true"}
      >
        <slot name="label">${this.label}</slot>
      </label>

      <div part="base" class="number-field">
        ${!this.withoutSteppers ? html`
              <button
                part="stepper stepper-decrement"
                class="stepper stepper-decrement"
                type="button"
                tabindex="-1"
                aria-label=${this.localize.term("decrement")}
                ?disabled=${this.disabled || this.readonly || this.isAtMin}
                @pointerdown=${this.handleStepperPointerDown}
                @pointerup=${(event) => this.handleStepperPointerUp("down", event)}
              >
                <slot name="decrement-icon">
                  <wa-icon name="minus" library="system"></wa-icon>
                </slot>
              </button>
            ` : ""}

        <slot name="start" part="start" class="start"></slot>

        <input
          part="input"
          id="input"
          class="control"
          type="number"
          inputmode=${ifDefined(this.inputmode)}
          title=${this.title}
          name=${ifDefined(this.name)}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          ?required=${this.required}
          placeholder=${ifDefined(this.placeholder)}
          min=${ifDefined(this.min)}
          max=${ifDefined(this.max)}
          step=${ifDefined(this.step)}
          .value=${live(this.value ?? "")}
          autocomplete=${ifDefined(this.autocomplete)}
          ?autofocus=${this.autofocus}
          enterkeyhint=${ifDefined(this.enterkeyhint)}
          aria-describedby="hint"
          @change=${this.handleChange}
          @input=${this.handleInput}
          @keydown=${this.handleKeyDown}
        />

        <slot name="end" part="end" class="end"></slot>

        ${!this.withoutSteppers ? html`
              <button
                part="stepper stepper-increment"
                class="stepper stepper-increment"
                type="button"
                tabindex="-1"
                aria-label=${this.localize.term("increment")}
                ?disabled=${this.disabled || this.readonly || this.isAtMax}
                @pointerdown=${this.handleStepperPointerDown}
                @pointerup=${(event) => this.handleStepperPointerUp("up", event)}
              >
                <slot name="increment-icon">
                  <wa-icon name="plus" library="system"></wa-icon>
                </slot>
              </button>
            ` : ""}
      </div>

      <slot
        id="hint"
        part="hint"
        name="hint"
        class=${classMap({
      "has-slotted": hasHint
    })}
        aria-hidden=${hasHint ? "false" : "true"}
        >${this.hint}</slot
      >
    `;
  }
};
WaNumberInput.css = [sizeStyles, formControlStyles, styles];
WaNumberInput.shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
__decorateClass([
  query("input")
], WaNumberInput.prototype, "input", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "title", 2);
__decorateClass([
  state()
], WaNumberInput.prototype, "value", 1);
__decorateClass([
  property({ attribute: "value", reflect: true })
], WaNumberInput.prototype, "defaultValue", 2);
__decorateClass([
  property({ reflect: true })
], WaNumberInput.prototype, "size", 2);
__decorateClass([
  watch("size")
], WaNumberInput.prototype, "handleSizeChange", 1);
__decorateClass([
  property({ reflect: true })
], WaNumberInput.prototype, "appearance", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], WaNumberInput.prototype, "pill", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "label", 2);
__decorateClass([
  property({ attribute: "hint" })
], WaNumberInput.prototype, "hint", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "placeholder", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], WaNumberInput.prototype, "readonly", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], WaNumberInput.prototype, "required", 2);
__decorateClass([
  property({ type: Number })
], WaNumberInput.prototype, "min", 2);
__decorateClass([
  property({ type: Number })
], WaNumberInput.prototype, "max", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "step", 2);
__decorateClass([
  property({ attribute: "without-steppers", type: Boolean })
], WaNumberInput.prototype, "withoutSteppers", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "autocomplete", 2);
__decorateClass([
  property({ type: Boolean })
], WaNumberInput.prototype, "autofocus", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "enterkeyhint", 2);
__decorateClass([
  property()
], WaNumberInput.prototype, "inputmode", 2);
__decorateClass([
  property({ attribute: "with-label", type: Boolean })
], WaNumberInput.prototype, "withLabel", 2);
__decorateClass([
  property({ attribute: "with-hint", type: Boolean })
], WaNumberInput.prototype, "withHint", 2);
__decorateClass([
  watch("step", { waitUntilFirstUpdate: true })
], WaNumberInput.prototype, "handleStepChange", 1);
WaNumberInput = __decorateClass([
  customElement("wa-number-input")
], WaNumberInput);
WaNumberInput.disableWarning?.("change-in-update");
export {
  WaNumberInput as default
};
