import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './App-418c0118.js';
import './_commonjsHelpers-91fffb88.js';
import { N as Notice } from './index-4920b0b3.js';
import './index-66cd4113.js';
import { d as dist } from './index-fdd60c34.js';

const sv = {
  Save: "Spara",
  Cancel: "Avbryt",
  primary: "primär",
  cellphone: "mobiltelefon",
  landline: "fast telefon",
  "Please enter a valid phone number.": "Ange ett giltigt telefonnummer.",
  "Phone number": "Telefonnummer",
};

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

const styleCss = ".sc-payfunc-phone-number-input-h{margin-top:.5em;display:block}smoothly-submit.sc-payfunc-phone-number-input,smoothly-submit.sc-payfunc-phone-number-input>button.sc-payfunc-phone-number-input{background-color:transparent;border:none;cursor:pointer;color:transparent;width:auto;float:right;margin-top:.2em}smoothly-input.sc-payfunc-phone-number-input{border:1px solid rgb(var(--smoothly-medium-color))}form.sc-payfunc-phone-number-input{display:flex;flex-flow:row;flex-wrap:wrap}form.sc-payfunc-phone-number-input>*.sc-payfunc-phone-number-input:not(smoothly-icon){width:100%}form.sc-payfunc-phone-number-input>tr.sc-payfunc-phone-number-input>span.sc-payfunc-phone-number-input>smoothly-icon.sc-payfunc-phone-number-input{float:left;margin-right:.2em}form.sc-payfunc-phone-number-input>tr.sc-payfunc-phone-number-input>span.sc-payfunc-phone-number-input{float:left;margin-right:1em;padding-bottom:.5em;padding-top:.5em;font-size:.9em}";

const PayfuncPhoneNumberInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.add = createEvent(this, "add", 7);
    this.edit = createEvent(this, "edit", 7);
    this.notice = 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.phone;
    if (value) {
      if (this.mode == "add")
        this.add.emit({ type: this.type, value });
      else
        this.edit.emit(value);
    }
    else
      this.notice.emit(Notice.failed(this.t("Please enter a valid phone number.")));
  }
  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 (h("form", null, this.mode == "add" ? (h("smoothly-select", { background: "transparent" }, this.types.map(option => this.type == option ? (h("option", { value: option, selected: true }, this.toUpperCase(t(option)))) : (h("option", { value: option }, this.toUpperCase(t(option))))))) : ([]), h("smoothly-input", { type: "phone", name: "phone", value: this.value }, this.mode == "add" ? t("Phone number") : t(this.type)), h("div", null, h("smoothly-submit", { prevent: true, onSubmit: (e) => this.onSubmit(e) }, h("smoothly-icon", { name: "checkmark-circle", toolTip: t("Save"), color: "success", fill: "clear", size: "small" })), h("smoothly-submit", { prevent: true, onSubmit: () => this.onCancel() }, h("smoothly-icon", { name: "close-circle", toolTip: t("Cancel"), color: "light", fill: "clear", size: "small" })))));
  }
  get element() { return getElement(this); }
};
PayfuncPhoneNumberInput.style = styleCss;

export { PayfuncPhoneNumberInput as payfunc_phone_number_input };
