import { r as registerInstance, j as createEvent, h, g as getElement } from './index-07845439.js';
import { d as dist } from './index-3cc80977.js';
import './_commonjsHelpers-9bc404fc.js';

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

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

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

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

export { IntergiroDisplayEdit as ig_display_edit };
