import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './_commonjsHelpers-91fffb88.js';
import { g as PhoneNumbers } from './index-df45deab.js';
import { d as dist } from './index-fdd60c34.js';

const sv = {
  Add: "Lägg till",
};

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

const styleCss = ".sc-payfunc-phone-numbers-h{display:block}smoothly-icon.sc-payfunc-phone-numbers{cursor:pointer;float:right;margin-top:-1.5em;padding-bottom:.5em;visibility:hidden}payfunc-phone-number.sc-payfunc-phone-numbers{clear:both}.sc-payfunc-phone-numbers-h:hover smoothly-icon.sc-payfunc-phone-numbers{visibility:visible}";

const PayfuncPhoneNumbers = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.changed = createEvent(this, "changed", 7);
    this.editable = true;
    this.adding = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  get types() {
    return PhoneNumbers.types.filter(type => PhoneNumbers.is(this.value) ? !this.value[type] : this.value ? type != "primary" : type);
  }
  get phoneNumbers() {
    return PhoneNumbers.is(this.value) ? Object.assign({}, this.value) : { primary: this.value };
  }
  onEdit(e) {
    const type = e.detail.type;
    delete e.detail.type;
    let result;
    if (!PhoneNumbers.is(this.value))
      result = e.detail.value;
    else {
      result = Object.assign({}, this.value);
      result[type] = e.detail.value;
    }
    this.changed.emit((this.value = result));
  }
  onDelete(e) {
    const type = e.detail;
    const result = Object.assign({}, this.phoneNumbers);
    delete result[type];
    this.changed.emit((this.value = result));
  }
  onAdd(e) {
    const type = e.detail.type;
    const value = e.detail.value;
    const result = this.phoneNumbers;
    result[type] = value;
    this.changed.emit((this.value = result));
    this.adding = false;
  }
  render() {
    return [
      this.adding ? (h("payfunc-phone-number-input", { onEdit: (e) => (this.adding = false), types: this.types, mode: "add", onAdd: (e) => this.onAdd(e) })) : ([]),
      this.editable && this.types.length > 0 ? (h("smoothly-icon", { name: "add-circle", toolTip: this.t("Add"), fill: "clear", size: "medium", color: "success", style: this.adding ? { display: "none" } : {}, onClick: () => (this.adding = true) })) : ([]),
      this.phoneNumbers ? (PhoneNumbers.is(this.value) ? (PhoneNumbers.map(this.value, (type, value) => [
        h("payfunc-phone-number", { value: value, type: type, editable: this.editable, onEdit: (e) => this.onEdit(e), onDelete: (e) => this.onDelete(e) }),
      ])) : (h("payfunc-phone-number", { value: this.value, editable: this.editable, onEdit: (e) => this.onEdit(e), onDelete: (e) => this.onDelete(e) }))) : ([]),
    ];
  }
  get element() { return getElement(this); }
};
PayfuncPhoneNumbers.style = styleCss;

export { PayfuncPhoneNumbers as payfunc_phone_numbers };
