'use strict';

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

const index$1 = require('./index-0b1e2673.js');
require('./App-1647a125.js');
require('./_commonjsHelpers-937cd5b3.js');
const index$2 = require('./index-1a9e1965.js');
require('./index-451ca284.js');
const index = require('./index-36cf3884.js');

const sv = {
  Save: "Spara",
  Cancel: "Avbryt",
  primary: "primär",
  billing: "fakturering",
  "Please enter a valid email address.": "Ange en giltig e-postadress.",
};

function create(language) {
  return index.dist.create({
    sv,
  }, language);
}

const styleCss = ".sc-payfunc-email-input-h{display:block;margin-top:.5em}smoothly-submit.sc-payfunc-email-input,smoothly-submit.sc-payfunc-email-input>button.sc-payfunc-email-input{background-color:transparent;border:none;cursor:pointer;color:transparent;width:auto;float:right;margin-bottom:.2em}smoothly-input.sc-payfunc-email-input{border:1px solid rgb(var(--smoothly-medium-color))}form.sc-payfunc-email-input{display:flex;flex-flow:row;flex-wrap:wrap}form.sc-payfunc-email-input>*.sc-payfunc-email-input{width:100%}smoothly-select.sc-payfunc-email-input{display:grid;margin-bottom:.5em}";

const PayfuncEmailInput = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.edit = index$1.createEvent(this, "edit", 7);
    this.add = index$1.createEvent(this, "add", 7);
    this.notice = index$1.createEvent(this, "notice", 7);
    this.types = [];
    this.type = this.types[0];
    this.mode = "edit";
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  onSubmit(e) {
    const value = e.detail.email;
    if (value) {
      if (this.mode == "add")
        this.add.emit({ type: this.type, value });
      else
        this.edit.emit(e.detail.email);
    }
    else
      this.notice.emit(index$2.Notice.failed(this.t("Please enter a valid email address.")));
  }
  onCancel() {
    this.edit.emit(this.value);
  }
  onSelectionChanged(e) {
    this.type = e.detail.value;
  }
  toUpperCase(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
  render() {
    const t = this.t;
    return (index$1.h("form", null, this.mode == "add" ? (index$1.h("smoothly-select", { background: "transparent" }, this.types.map(option => this.type == option ? (index$1.h("option", { value: option, selected: true }, this.toUpperCase(t(option)))) : (index$1.h("option", { value: option }, this.toUpperCase(t(option))))))) : ([]), index$1.h("smoothly-input", { type: "email", name: "email", value: this.value }, this.mode == "add" ? t("Email") : t(this.type)), index$1.h("div", null, index$1.h("smoothly-submit", { prevent: true, onSubmit: (e) => this.onSubmit(e) }, index$1.h("smoothly-icon", { name: "checkmark-circle", toolTip: t("Save"), color: "success", fill: "clear", size: "small" })), index$1.h("smoothly-submit", { prevent: true, onSubmit: () => this.onCancel() }, index$1.h("smoothly-icon", { name: "close-circle", toolTip: t("Cancel"), color: "light", fill: "clear", size: "small" })))));
  }
  get element() { return index$1.getElement(this); }
};
PayfuncEmailInput.style = styleCss;

exports.payfunc_email_input = PayfuncEmailInput;
