'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd6fab62.js');
const price = require('./price-4a45d4fd.js');
const formData = require('./form-data-8b4a6451.js');
const utils = require('./utils-1ae6b57e.js');
require('./default-i18n-072e75d7.js');
require('./index-20b57ec7.js');
require('./_commonjsHelpers-537d719a.js');

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

const ScPriceInput = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scChange = index.createEvent(this, "scChange", 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.scInput.shadowRoot.querySelector('input').reportValidity();
  }
  /** Sets focus on the input. */
  async triggerFocus(options) {
    return this.scInput.triggerFocus(options);
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  async setCustomValidity(message) {
    this.scInput.setCustomValidity(message);
  }
  /** Removes focus from the input. */
  async triggerBlur() {
    return this.scInput.blur();
  }
  handleFocusChange() {
    var _a, _b, _c, _d;
    this.hasFocus ? (_b = (_a = this.scInput) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a) : (_d = (_c = this.scInput) === null || _c === void 0 ? void 0 : _c.blur) === null || _d === void 0 ? void 0 : _d.call(_c);
  }
  handleChange() {
    this.updateValue();
  }
  handleInput() {
    this.updateValue();
  }
  updateValue() {
    const val = utils.isZeroDecimal(this.currencyCode) ? parseFloat(this.scInput.value) : (parseFloat(this.scInput.value) * 100).toFixed(2);
    this.value = this.scInput.value ? val.toString() : '';
  }
  componentDidLoad() {
    this.handleFocusChange();
    this.formController = new formData.FormSubmitController(this.el).addFormData();
    document.addEventListener('wheel', () => {
      this.scInput.triggerBlur();
    });
  }
  disconnectedCallback() {
    var _a;
    (_a = this.formController) === null || _a === void 0 ? void 0 : _a.removeFormData();
  }
  render() {
    return (index.h("div", null, index.h("sc-input", { size: this.size, label: this.label, showLabel: this.showLabel, help: this.help, ref: el => (this.scInput = 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(), value: utils.maybeConvertAmount(parseFloat(this.value), this.currencyCode).toString() }, index.h("span", { style: { opacity: '0.5' }, slot: "prefix" }, price.getCurrencySymbol(this.currencyCode)), index.h("span", { slot: "suffix" }, index.h("slot", { name: "suffix" }, this.showCode && (this === null || this === void 0 ? void 0 : this.currencyCode) && index.h("span", { style: { opacity: '0.5' } }, this.currencyCode.toUpperCase()))))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "hasFocus": ["handleFocusChange"]
  }; }
};
ScPriceInput.style = scPriceInputCss;

exports.sc_price_input = ScPriceInput;
