import { r as registerInstance, c as createEvent, h, g as getElement } from './index-08b73e9e.js';
import { d as dist } from './index-a0a71287.js';
import './_commonjsHelpers-9943807e.js';

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

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

const styleCss$2 = ".sc-ig-display-edit-h{display:block}[hidden].sc-ig-display-edit-h{display:none}label.sc-ig-display-edit{display:block;font-weight:bold;margin-bottom:0.5em}.sc-ig-display-edit-h:not([label]) label.sc-ig-display-edit{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:0.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$2(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("label", null, this.label),
      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$2;

const sv$1 = {
  " number": "nummer",
  " reference": "referens",
  customer: "kund",
  order: "order",
  subscription: "prenumerations",
  " ID": "-ID",
  "Updating subscription number...": "Uppdaterar prenumerationsnummer...",
  "Failed to update subscription number.": "Kunde inte uppdatera prenumerationsnummer.",
  "Updated subscription number.": "Prenummerationsnummer uppdaterat.",
};

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

const styleCss$1 = ".sc-ig-number-details-h{display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;padding:1em;padding-left:4.5em}[hidden].sc-ig-number-details-h{display:none}dt.sc-ig-number-details{font-weight:bold;text-align:left;margin-bottom:0.2em}dt.sc-ig-number-details::first-letter{text-transform:capitalize}smoothly-display.sc-ig-number-details,ig-display-edit.sc-ig-number-details{text-align:left;margin:0;width:35%}section.sc-ig-number-details{width:50%}";

const IntergiroNumberDetails = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.numberUpdated = createEvent(this, "numberUpdated", 7);
  }
  componentWillLoad() {
    this.t = create$1(this.element);
  }
  render() {
    return [
      this.number && (h("section", null, h("dt", null, (this.name ? this.t(this.name) : "") + this.t(" number")), this.name == "subscription" ? (h("ig-display-edit", { name: "number", value: this.number, onChanged: (e) => this.numberUpdated.emit(e.detail) })) : (h("smoothly-display", null, this.number)))),
      this.identifier && (h("section", null, h("dt", null, this.name ? this.t(this.name) + this.t(" ID") : "ID"), h("smoothly-display", null, this.identifier))),
      this.reference && (h("section", null, h("dt", null, (this.name ? this.t(this.name) : "") + this.t(" reference")), h("smoothly-display", null, this.reference))),
    ];
  }
  get element() { return getElement(this); }
};
IntergiroNumberDetails.style = styleCss$1;

const sv = {
  "Select all": "Markera alla",
  "Deselect all": "Avmarkera alla",
  Select: "Markera",
  Deselect: "Avmarkera",
};

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

const styleCss = ".sc-smoothly-checkbox-h{display:block}[hidden].sc-smoothly-checkbox-h{display:none}smoothly-icon.sc-smoothly-checkbox{cursor:pointer}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{stroke:rgba(var(--smoothly-color-contrast), 0.3)}";

const SmoothlyCheckbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.checked = createEvent(this, "checked", 7);
    this.selectAll = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  toggle() {
    if (!this.disabled) {
      this.selected = !this.selected;
      this.checked.emit({ selected: this.selected });
    }
  }
  render() {
    return [
      h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Deselect all" : "Deselect"), onClick: () => this.toggle(), style: { display: this.selected ? "" : "none" }, name: "checkbox-outline" }),
      h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Select all" : "Select"), onClick: () => this.toggle(), style: { display: !this.selected ? "" : "none" }, name: "square-outline" }),
    ];
  }
  get element() { return getElement(this); }
};
SmoothlyCheckbox.style = styleCss;

export { IntergiroDisplayEdit as ig_display_edit, IntergiroNumberDetails as ig_number_details, SmoothlyCheckbox as smoothly_checkbox };
