'use strict';

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

const index$1 = require('./index-0b1e2673.js');
require('./_commonjsHelpers-937cd5b3.js');
const index = require('./index-36cf3884.js');

const sv = {
  Edit: "Redigera",
  Delete: "Radera",
  Add: "Lägg till",
  Cancel: "Avbryt",
  Save: "Spara",
};

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

const styleCss = ".sc-payfunc-display-edit-h{display:block}[hidden].sc-payfunc-display-edit-h{display:none}smoothly-submit.sc-payfunc-display-edit,smoothly-submit.sc-payfunc-display-edit>button.sc-payfunc-display-edit{background-color:transparent;border:none;cursor:pointer;color:transparent;width:auto;float:right;margin-bottom:.5em}smoothly-input.sc-payfunc-display-edit,smoothly-select.sc-payfunc-display-edit{border:1px solid rgb(var(--smoothly-medium-color))}smoothly-select.sc-payfunc-display-edit{display:grid}.sc-payfunc-display-edit-h:hover>form.sc-payfunc-display-edit>smoothly-popup.sc-payfunc-display-edit{display:block;margin:0;float:right}.sc-payfunc-display-edit-h>form.sc-payfunc-display-edit>smoothly-popup.sc-payfunc-display-edit{display:none}smoothly-icon.sc-payfunc-display-edit{cursor:pointer}.sc-payfunc-display-edit-h:hover>form.sc-payfunc-display-edit>smoothly-icon.sc-payfunc-display-edit{visibility:visible}.sc-payfunc-display-edit-h>form.sc-payfunc-display-edit>smoothly-icon.sc-payfunc-display-edit{margin:0;float:right;margin-top:-1.8em;visibility:hidden}";

const PayfuncDisplayEdit = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.changed = index$1.createEvent(this, "changed", 7);
    this.type = "text";
    this.deletable = true;
    this.adding = false;
    this.mode = "display";
  }
  componentWillLoad() {
    if (this.select && this.value)
      this.selected = this.value;
    this.t = create(this.element);
  }
  onSubmit(e) {
    var _a;
    this.mode = "display";
    this.changed.emit((this.value = this.select ? (_a = this.selected) !== null && _a !== void 0 ? _a : this.select[this.select.length - 1] : e.detail.value));
  }
  onDelete() {
    this.changed.emit((this.value = undefined));
    this.reset();
  }
  reset() {
    this.mode = "display";
    this.adding = false;
  }
  onSelectionChanged(e) {
    this.selected = e.detail.value;
  }
  render() {
    return (index$1.h("form", null, this.mode == "display" && this.value
      ? [
        index$1.h("smoothly-popup", null, index$1.h("smoothly-icon", { name: "ellipsis-vertical-outline", size: "small" }), index$1.h("div", { color: "light", slot: "popup" }, index$1.h("smoothly-icon", { size: "small", name: "pencil-outline", toolTip: this.t("Edit"), onClick: () => (this.mode = "input") }), this.deletable ? (index$1.h("smoothly-icon", { size: "small", name: "trash", toolTip: this.t("Delete"), onClick: () => this.onDelete() })) : ([]))),
      ]
      : [], !this.value || this.value == "" ? (index$1.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.mode = "input")) })) : ([]), this.mode == "display" ? (index$1.h("smoothly-display", { type: this.type, value: this.value })) : ([
      this.select ? (index$1.h("smoothly-select", { background: "transparent" }, this.select.map(option => this.selected && this.selected == option ? (index$1.h("option", { value: option, selected: true }, option.charAt(0).toUpperCase() + option.slice(1))) : (index$1.h("option", { value: option }, option.charAt(0).toUpperCase() + option.slice(1)))))) : (index$1.h("smoothly-input", { type: this.type, value: this.value, name: "value" }, this.name)),
      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: this.t("Save"), color: "success", fill: "clear", size: "small" })), index$1.h("smoothly-submit", { prevent: true, onSubmit: () => this.reset() }, index$1.h("smoothly-icon", { name: "close-circle", toolTip: this.t("Cancel"), color: "light", fill: "clear", size: "small" }))),
    ])));
  }
  get element() { return index$1.getElement(this); }
};
PayfuncDisplayEdit.style = styleCss;

exports.payfunc_display_edit = PayfuncDisplayEdit;
