import { r as registerInstance, c as createEvent, h, H as Host } from './index-08b73e9e.js';
import { d as dist } from './index-dee6801e.js';
import './_commonjsHelpers-9943807e.js';

const styleCss$2 = ".sc-smoothly-input-h{display:block;position:relative}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-text-tint));opacity:0.8;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:inherit;-webkit-transition:font-size 0.1s;transition:font-size 0.1s;-webkit-transition-timing-function:ease;transition-timing-function:ease}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;width:calc(100% - 0.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:0.2em;top:0.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:0.3em;top:0.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.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 = 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, 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(dist.StateEditor.copy(formatter.unformat(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(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
    this.updateBackend(after, this.inputElement);
  }
  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,
        direction: backend.selectionDirection ? backend.selectionDirection : "none",
      } });
    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,
          direction: backend.selectionDirection ? backend.selectionDirection : "none",
        } });
      if ((!((event.ctrlKey || event.metaKey) && 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 = 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(dist.StateEditor.copy(Object.assign({}, this.state))).value);
  }
  render() {
    var _a;
    return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, 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) }), 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"]
  }; }
};
SmoothlyInput.style = styleCss$2;

const styleCss$1 = ".sc-smoothly-popup-h{display:-ms-inline-flexbox;display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;left:var(--left);right:var(--right);background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;-webkit-box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black;box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;-webkit-box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black;box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);left:calc(var(--left) + 1em);right:calc(var(--right) + 1em)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";

const SmoothlyPopup = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.popup = createEvent(this, "popup", 7);
    this.visible = false;
    this.direction = "down";
    this.cssVariables = { "--left": "0.1em" };
  }
  onClick() {
    var _a, _b, _c, _d, _e, _f;
    if (this.visible == false) {
      (_a = this.aside) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
      this.cssVariables =
        ((_c = (_b = this.aside) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) !== null && _c !== void 0 ? _c : 0) >= window.innerWidth
          ? { "--right": "0.1em" }
          : ((_e = (_d = this.aside) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().left) !== null && _e !== void 0 ? _e : 0) < 0
            ? { "--left": "0.1em" }
            : this.cssVariables;
      (_f = this.aside) === null || _f === void 0 ? void 0 : _f.style.removeProperty("display");
    }
    this.visible = !this.visible;
    this.popup.emit(this.visible);
  }
  render() {
    return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
  }
};
SmoothlyPopup.style = styleCss$1;

const styleCss = ".sc-smoothly-select-h{display:block}[hidden].sc-smoothly-select-h{display:none}select.sc-smoothly-select{min-width:1.5em;padding-top:0.5em;border:none;-webkit-appearance:none;background-color:rgb(var(--smoothly-color));padding:0.3em}select.sc-smoothly-select>option.sc-smoothly-select{background-color:inherit}select.sc-smoothly-select:focus{outline:none}";

const SmoothlySelect = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selectionChanged = createEvent(this, "selectionChanged", 7);
  }
  optionSelected() {
    if (this.selectElement)
      this.selectionChanged.emit({ identifier: this.identifier, value: (this.value = this.selectElement.value) });
  }
  componentDidLoad() {
    var _a;
    if (this.selectElement)
      this.value = (_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.value;
  }
  render() {
    return [
      h("select", { ref: e => (this.selectElement = e), id: this.identifier, onChange: () => this.optionSelected(), style: { background: this.background } }, h("slot", null)),
    ];
  }
};
SmoothlySelect.style = styleCss;

export { SmoothlyInput as smoothly_input, SmoothlyPopup as smoothly_popup, SmoothlySelect as smoothly_select };
