import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fd4790f6.js';
import { b as getCurrencySymbol } from './price-8403c07a.js';
import { F as FormSubmitController } from './form-data-dd63c61f.js';
import { i as isZeroDecimal, m as maybeConvertAmount } from './utils-967e8d60.js';
import './default-i18n-2e663329.js';
import './index-53ddb833.js';
import './index-6db066f7.js';

const scPriceInputCss = ":host{display:block}";

const ScPriceInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scChange = createEvent(this, "scChange", 7);
    this.scInput = createEvent(this, "scInput", 7);
    this.scFocus = createEvent(this, "scFocus", 7);
    this.scBlur = createEvent(this, "scBlur", 7);
    /** The input's size. */
    this.size = 'medium';
    /** The input's value attribute. */
    this.value = '';
    /** Draws a pill-style input with rounded edges. */
    this.pill = false;
    /** Should we show the label */
    this.showLabel = true;
    /** The input's help text. */
    this.help = '';
    /** Adds a clear button when the input is populated. */
    this.clearable = false;
    /** Disables the input. */
    this.disabled = false;
    /** Makes the input readonly. */
    this.readonly = false;
    /** Makes the input a required field. */
    this.required = false;
    /**
     * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
     * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
     */
    this.invalid = false;
  }
  async reportValidity() {
    return this.input.shadowRoot.querySelector('input').reportValidity();
  }
  /** Sets focus on the input. */
  async triggerFocus(options) {
    return this.input.triggerFocus(options);
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  async setCustomValidity(message) {
    this.input.setCustomValidity(message);
  }
  /** Removes focus from the input. */
  async triggerBlur() {
    return this.input.blur();
  }
  handleFocusChange() {
    var _a, _b, _c, _d;
    this.hasFocus ? (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a) : (_d = (_c = this.input) === null || _c === void 0 ? void 0 : _c.blur) === null || _d === void 0 ? void 0 : _d.call(_c);
  }
  handleChange() {
    this.updateValue();
  }
  handleInput() {
    this.updateValue();
    this.scInput.emit();
  }
  updateValue() {
    // This fixes issues on mobile Safari where a decimal point is added to the end of the input value
    // does not have an input value.
    if (!this.input.shadowRoot.querySelector('input').checkValidity()) {
      return;
    }
    const val = isZeroDecimal(this.currencyCode) ? parseFloat(this.input.value) : (parseFloat(this.input.value) * 100).toFixed(2);
    this.value = this.input.value ? val.toString() : '';
  }
  componentDidLoad() {
    this.handleFocusChange();
    this.formController = new FormSubmitController(this.el).addFormData();
    document.addEventListener('wheel', () => {
      this.input.triggerBlur();
    });
  }
  disconnectedCallback() {
    var _a;
    (_a = this.formController) === null || _a === void 0 ? void 0 : _a.removeFormData();
  }
  render() {
    return (h("sc-input", { exportparts: "base, input, form-control, label, help-text, prefix, suffix", size: this.size, label: this.label, showLabel: this.showLabel, help: this.help, ref: el => (this.input = el), type: "number", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minlength: this.minlength, maxlength: this.maxlength, min: !!this.min ? this.min / 100 : 0.0, step: 0.001, max: !!this.max ? this.max / 100 : null,
      // TODO: Test These below
      autofocus: this.autofocus, inputmode: 'decimal', onScChange: () => this.handleChange(), onScInput: () => this.handleInput(), onScBlur: () => this.scBlur.emit(), onScFocus: () => this.scFocus.emit(), value: maybeConvertAmount(parseFloat(this.value), this.currencyCode).toString() }, h("span", { style: { opacity: '0.5' }, slot: "prefix" }, getCurrencySymbol(this.currencyCode)), h("span", { slot: "suffix" }, h("slot", { name: "suffix" }, this.showCode && (this === null || this === void 0 ? void 0 : this.currencyCode) && h("span", { style: { opacity: '0.5' } }, this.currencyCode.toUpperCase())))));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "hasFocus": ["handleFocusChange"]
  }; }
};
ScPriceInput.style = scPriceInputCss;

export { ScPriceInput as sc_price_input };
