import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './App-418c0118.js';
import './_commonjsHelpers-91fffb88.js';
import './index-4920b0b3.js';
import './index-66cd4113.js';
import './index-df45deab.js';
import { d as dist } from './index-fdd60c34.js';
import './index-909faba2.js';
import './index-6b5931f4.js';
import './index-ff2f9e0e.js';
import './index-31b724c4.js';
import './index-c9d6523e.js';

const sv = {
  "Loading orders from server.": "Laddar ordrar från servern.",
  "There are no orders to display.": "Det finns inga ordrar att visa.",
  "Order number": "Ordernummer",
  Customer: "Kund",
  Amount: "Summa",
  Receipt: "Kvitto",
  Payment: "Betalning",
  Created: "Skapad",
  Status: "Status",
  "Select all orders": "Markera alla ordrar",
  "Deselect all orders": "Avmarkera alla ordrar",
  "Download order report": "Ladda ner orderrapport",
  "Load more orders": "Ladda in fler ordrar",
};

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

const styleCss = ".sc-payfunc-orders-table-h{display:block;width:100%;max-width:90em;margin:auto}[hidden].sc-payfunc-orders-table-h{display:none}.sc-payfunc-orders-table-h>table.sc-payfunc-orders-table{width:100%}.sc-payfunc-orders-table-h>p.sc-payfunc-orders-table{padding-left:.5em}[id].sc-payfunc-orders-table{scroll-margin-top:calc(1.6cm + 2em)}thead.sc-payfunc-orders-table>tr.sc-payfunc-orders-table{display:table-row;font-weight:bold;height:2em;border-top:solid 1px rgb(var(--smoothly-dark-shadow));border-bottom:solid 1px rgb(var(--smoothly-dark-shadow))}thead.sc-payfunc-orders-table>tr.sc-payfunc-orders-table>*.sc-payfunc-orders-table{display:table-cell;padding-right:.5em;padding-left:.3em;vertical-align:middle;position:sticky;top:1.55cm;z-index:1;text-align:left}thead.sc-payfunc-orders-table>tr.sc-payfunc-orders-table>*.sc-payfunc-orders-table>smoothly-icon.sc-payfunc-orders-table{vertical-align:-50%;margin-left:.1em}.sc-payfunc-orders-table-h .loadMore.sc-payfunc-orders-table{text-align:center}.sc-payfunc-orders-table-h>table.sc-payfunc-orders-table>td.sc-payfunc-orders-table>button.sc-payfunc-orders-table:focus{outline:none}payfunc-orders-table-row.sc-payfunc-orders-table{display:table-row-group;border-top:1px solid transparent}payfunc-orders-table-row.sc-payfunc-orders-table:last-of-type{border-bottom:1px solid transparent}payfunc-orders-table-row.sc-payfunc-orders-table:hover{border-top:1px solid rgb(var(--smoothly-medium-color));border-bottom:1px solid rgb(var(--smoothly-medium-color));box-shadow:var(--smoothly-shadow)}payfunc-orders-table-row[hidden].sc-payfunc-orders-table{display:none}";

const PayfuncOrdersTable = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selectedChanged = createEvent(this, "selectedChanged", 7);
    this.selected = {};
    this.display = false;
    this.opened = {};
    this.count = 100;
    this.hash = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  componentDidRender() {
    var _a;
    if (window.location.hash && !this.hash) {
      const element = document.getElementById(window.location.hash.substring(1));
      if (element) {
        element.scrollIntoView();
        const order = (_a = this.orders) === null || _a === void 0 ? void 0 : _a.find(order => { var _a; return ((_a = order.number) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "").toLowerCase()) == window.location.hash.substring(1); });
        if (order) {
          const opened = Object.assign({}, this.opened);
          opened[order.id] = "number";
          this.opened = opened;
        }
        this.hash = true;
      }
    }
  }
  toggleColumn(e) {
    const opened = Object.assign({}, this.opened);
    if (Object.prototype.hasOwnProperty.call(e.detail, "id") && opened[e.detail.id] == e.detail.column)
      delete opened[e.detail.id];
    else
      opened[e.detail.id] = e.detail.column;
    this.opened = opened;
  }
  handleToggle(event) {
    const orders = Object.assign({}, this.selected);
    if (event.detail.checked)
      orders[event.detail.order.id] = event.detail.order;
    else
      delete orders[event.detail.order.id];
    this.selectedChanged.emit((this.selected = orders));
  }
  onChecked(event) {
    this.selected = {};
    if (event.detail.selected && this.orders)
      for (const order of this.orders)
        this.selected[order.id] = order;
    this.selectedChanged.emit(this.selected);
    event.stopPropagation();
    event.preventDefault();
  }
  render() {
    const t = this.t;
    let result;
    if (!this.orders)
      result = h("p", null, t("Loading orders from server."));
    else if (this.orders.length <= 0)
      result = h("p", null, t("There are no orders to display."));
    else {
      const amountOrders = this.orders.length;
      result = (h("table", null, h("thead", null, h("tr", null, !this.display ? (h("th", { style: { width: "5%" }, color: "light" }, h("smoothly-checkbox", { "select-all": true }))) : (""), h("th", { color: "light" }, t("Order number")), !this.display ? h("th", { color: "light" }, t("Customer")) : "", h("th", { color: "light" }, t("Amount")), this.receipt ? h("th", { color: "light" }, t("Receipt")) : "", h("th", { color: "light" }, t("Payment")), h("th", { color: "light" }, t("Created")), h("th", { color: "light" }, t("Status")))), this.orders
        .slice(0, this.count)
        .map(order => {
        var _a;
        return [
          h("payfunc-orders-table-row", { id: (_a = order.number) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "").toLowerCase(), selected: this.selected.hasOwnProperty.call(this.selected, order.id), order: order, display: this.display, opened: this.opened.hasOwnProperty.call(this.opened, order.id) ? this.opened[order.id] : "", receipt: this.receipt }),
          h("payfunc-orders-table-details", { order: order, opened: this.opened.hasOwnProperty.call(this.opened, order.id) ? this.opened[order.id] : "" }),
        ];
      }), h("td", { class: "loadMore", colSpan: 7 }, this.count < amountOrders ? (h("button", { onClick: () => (this.count += 100) }, h("smoothly-icon", { name: "chevron-down-circle", size: "large", toolTip: t("Load more orders") }))) : ("")), h("td", null)));
    }
    return result;
  }
  get element() { return getElement(this); }
};
PayfuncOrdersTable.style = styleCss;

export { PayfuncOrdersTable as payfunc_orders_table };
