import { r as registerInstance, j as createEvent, h, k as Host } from './index-aeac5cad.js';
import './_commonjsHelpers-91fffb88.js';
import { d as dist } from './index-ff2f9e0e.js';

const styleCss = ".sc-smoothly-input-h{display:block;position:relative}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:.4em;top:.6em;color:rgb(var(--smoothly-text-tint));opacity:.8;user-select:none;cursor:inherit;transition:font-size .1s;transition-timing-function:ease}input.sc-smoothly-input{padding:1em .2em .2em .2em;width:calc(100% - .4em);background:none;border:0;z-index:1;position:relative}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:.2em;top:.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:.3em;top:.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:.3em;top:.4em;font-size:60%;z-index:0}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 30px unset inset !important;-webkit-box-shadow:0 0 0 30px unset inset !important}input.sc-smoothly-input:-webkit-autofill{-webkit-text-fill-color:unset !important}input.sc-smoothly-input:-internal-autofill-previewed,input.sc-smoothly-input:-internal-autofill-selected,textarea.sc-smoothly-input:-internal-autofill-previewed,textarea.sc-smoothly-input:-internal-autofill-selected,select.sc-smoothly-input:-internal-autofill-previewed,select.sc-smoothly-input:-internal-autofill-selected{background-color:none !important;background-image:none !important;color:unset !important}";

const SmoothlyInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.smoothlyChanged = createEvent(this, "smoothlyChanged", 7);
    this.type = "text";
    this.required = false;
    this.minLength = 0;
    this.maxLength = Number.POSITIVE_INFINITY;
    this.autocomplete = "on";
    this.disabled = false;
  }
  get formatter() {
    let result;
    switch (this.type) {
      case "price":
        result = dist.get("price", this.currency);
        break;
      default:
        result = dist.get(this.type);
        break;
    }
    return result || dist.get("text");
  }
  valueWatcher(value, before) {
    if (this.lastValue != value) {
      this.lastValue = value;
      this.state = Object.assign(Object.assign({}, this.state), { value: this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy({ value, selection: this.state.selection })))).value });
    }
    if (value != before)
      this.smoothlyChanged.emit({ name: this.name, value });
  }
  componentWillLoad() {
    const formatter = this.formatter;
    const value = formatter.toString(this.value) || "";
    const start = value.length;
    this.state = formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy({
      value,
      selection: { start, end: start },
    }))));
  }
  onBlur(event) { }
  onFocus(event) {
    const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
    if (event.target)
      this.updateBackend(after, event.target);
  }
  onClick(event) {
    const backend = event.target;
    this.state = Object.assign(Object.assign({}, this.state), { value: backend.value, selection: {
        start: backend.selectionStart != undefined ? backend.selectionStart : backend.value.length,
        end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
      } });
    const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
    this.updateBackend(after, backend);
  }
  onKeyDown(event) {
    if (event.key && !(event.key == "Unidentified")) {
      const backend = event.target;
      this.state = Object.assign(Object.assign({}, this.state), { value: backend.value, selection: {
          start: backend.selectionStart != undefined ? backend.selectionStart : backend.value.length,
          end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
        } });
      if ((!(event.ctrlKey && event.key == "v") && event.key.length == 1) ||
        event.key == "ArrowLeft" ||
        event.key == "ArrowRight" ||
        event.key == "Delete" ||
        event.key == "Backspace" ||
        event.key == "Home" ||
        event.key == "End") {
        event.preventDefault();
        this.processKey(event, backend);
      }
    }
  }
  onPaste(event) {
    event.preventDefault();
    let pasted = event.clipboardData ? event.clipboardData.getData("text") : "";
    const backend = event.target;
    pasted = this.expiresAutocompleteFix(backend, pasted);
    for (const letter of pasted)
      this.processKey({ key: letter }, backend);
  }
  onInput(event) {
    const backend = event.target;
    let data = backend.value;
    if (data) {
      event.preventDefault();
      this.processKey({ key: "a", ctrlKey: true }, backend);
      data = this.expiresAutocompleteFix(backend, data);
      for (const letter of data)
        this.processKey({ key: letter }, backend);
    }
  }
  expiresAutocompleteFix(backend, value) {
    var _a;
    if (((_a = backend.attributes.getNamedItem("autocomplete")) === null || _a === void 0 ? void 0 : _a.value) == "cc-exp")
      value = value.match(/^20\d\d[.\D]*\d\d$/)
        ? value.substring(value.length - 2, value.length) + value.substring(2, 4)
        : value.match(/^(1[3-9]|[2-9]\d)[.\D]*\d\d$/)
          ? value.substring(value.length - 2, value.length) + value.substring(0, 2)
          : value.match(/^\d\d[.\D]*20\d\d$/)
            ? value.substring(0, 2) + value.substring(value.length - 2, value.length)
            : value;
    return value;
  }
  processKey(event, backend) {
    const after = dist.Action.apply(this.formatter, this.state, event);
    this.updateBackend(after, backend);
  }
  updateBackend(after, backend) {
    if (after.value != backend.value)
      backend.value = after.value;
    if (backend.selectionStart != undefined && after.selection.start != backend.selectionStart) {
      backend.selectionStart = after.selection.start;
    }
    if (backend.selectionEnd != undefined && after.selection.end != backend.selectionEnd) {
      backend.selectionEnd = after.selection.end;
    }
    this.state = after;
    this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state))).value);
  }
  hostData() {
    var _a;
    return { class: { "has-value": (_a = this.state) === null || _a === void 0 ? void 0 : _a.value } };
  }
  __stencil_render() {
    return [
      h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.state.autocomplete, disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), onPaste: e => this.onPaste(e) }),
      h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }),
      h("label", { htmlFor: this.name }, h("slot", null)),
    ];
  }
  static get watchers() { return {
    "value": ["valueWatcher"]
  }; }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
SmoothlyInput.style = styleCss;

export { SmoothlyInput as smoothly_input };
