'use strict';

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

const index = require('./index-df541290.js');
const index$1 = require('./index-ad93d157.js');
require('./_commonjsHelpers-10109b76.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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:inherit;-webkit-transition:font-size .1s;transition:font-size .1s;-webkit-transition-timing-function:ease;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;font-size:1rem;font-family:var(--smoothly-font-family)}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) {
    index.registerInstance(this, hostRef);
    this.smoothlyChanged = index.createEvent(this, "smoothlyChanged", 7);
    this.keepFocusOnReRender = false;
    this.type = "text";
    this.required = false;
    this.minLength = 0;
    this.maxLength = Number.POSITIVE_INFINITY;
    this.autocomplete = true;
    this.disabled = false;
  }
  get formatter() {
    let result;
    switch (this.type) {
      case "price":
        result = index$1.dist.get("price", this.currency);
        break;
      default:
        result = index$1.dist.get(this.type);
        break;
    }
    return result || index$1.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(index$1.dist.StateEditor.copy(this.formatter.unformat(index$1.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(index$1.dist.StateEditor.copy(formatter.unformat(index$1.dist.StateEditor.copy({
      value,
      selection: { start, end: start, direction: "none" },
    }))));
  }
  componentDidRender() {
    if (this.keepFocusOnReRender) {
      this.inputElement.focus();
      this.keepFocusOnReRender = false;
    }
  }
  async setKeepFocusOnReRender(keepFocus) {
    this.keepFocusOnReRender = keepFocus;
  }
  async setSelectionRange(start, end, direction) {
    const formatter = this.formatter;
    this.state = formatter.format(index$1.dist.StateEditor.copy(formatter.unformat(index$1.dist.StateEditor.copy(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.direction } })))));
    const after = this.formatter.format(index$1.dist.StateEditor.copy(this.formatter.unformat(index$1.dist.StateEditor.copy(Object.assign({}, this.state)))));
    this.updateBackend(after, this.inputElement);
  }
  onBlur(event) { }
  onFocus(event) {
    const after = this.formatter.format(index$1.dist.StateEditor.copy(this.formatter.unformat(index$1.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,
        direction: backend.selectionDirection ? backend.selectionDirection : "none",
      } });
    const after = this.formatter.format(index$1.dist.StateEditor.copy(this.formatter.unformat(index$1.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,
          direction: backend.selectionDirection ? backend.selectionDirection : "none",
        } });
      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);
      }
      else if (event.key == "ArrowUp" || event.key == "ArrowDown")
        event.preventDefault();
    }
  }
  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 = index$1.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;
    backend.selectionDirection = after.selection.direction ? after.selection.direction : backend.selectionDirection;
    this.state = after;
    this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(index$1.dist.StateEditor.copy(Object.assign({}, this.state))).value);
  }
  render() {
    var _a;
    return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, index.h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", 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), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), index.h("label", { htmlFor: this.name }, index.h("slot", null))));
  }
  static get watchers() { return {
    "value": ["valueWatcher"]
  }; }
};
SmoothlyInput.style = styleCss;

exports.smoothly_input = SmoothlyInput;
