'use strict';

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

const index$1 = require('./index-140bcbcd.js');
const index = require('./index-d3079b93.js');
const Token = require('./Token-8c5ba5d9.js');
require('./_commonjsHelpers-537d719a.js');

const sv$1 = {
  Delete: "Radera",
  "Confirm removal": "Bekräfta borttagning",
};

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

const styleCss$4 = ":host{display:-ms-flexbox;display:flex;position:relative}:host>.card{height:calc(14.49em - 1.4em);background-color:rgb(var(--smoothly-default-shade));-webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius:0.7em;width:calc(23em - 1.4em);padding:0.7em;position:relative}:host>.card>smoothly-display:nth-of-type(1){position:absolute;top:45%;left:25%;font-size:120%;width:50%}:host>.card>p{position:absolute;bottom:15%;left:75%;font-size:80%;text-transform:uppercase}:host>.card>smoothly-display:nth-of-type(2){position:absolute;bottom:10%;left:75%;font-size:1.1em}:host>.card>smoothly-icon{position:absolute;top:7em;right:-3em;cursor:pointer}:host>.table{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host>.table>*{width:10em}:host>.table>*:nth-child(2){width:15em}:host>.table>p{display:none}:host>.table>smoothly-icon{position:absolute;right:0em;cursor:pointer;display:none}:host>.table:hover>smoothly-icon{display:block}";

const IntergiroPaymentMethod = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.deleteMethod = index$1.createEvent(this, "deleteMethod", 7);
    this.deletable = false;
    this.selected = false;
  }
  componentWillLoad() {
    this.t = create$1(this.element);
  }
  methodDeletedHandler(method) {
    this.deleteMethod.emit(method);
  }
  render() {
    return (index$1.h("div", { class: this.mode }, index$1.h("ig-scheme-logotype", { size: this.mode == "card" ? "large" : "small", scheme: this.method.scheme }), index$1.h("smoothly-display", { type: "card-number", value: this.method.iin + "******" + this.method.last4 }), index$1.h("p", null, "Expires"), index$1.h("smoothly-display", { type: "card-expires", value: this.method.expires }), this.deletable
      ? [
        index$1.h("smoothly-icon", { name: "trash-outline", toolTip: this.t("Delete"), style: { display: this.selected ? "none" : "" }, size: this.mode == "card" ? "medium" : "small", onClick: () => (this.selected = true) }),
        index$1.h("smoothly-icon", { name: "trash", toolTip: this.t("Confirm removal"), style: { display: this.selected ? "block" : "none" }, color: "danger", size: this.mode == "card" ? "medium" : "small", onClick: () => this.methodDeletedHandler(this.method) }),
      ]
      : null));
  }
  get element() { return index$1.getElement(this); }
};
IntergiroPaymentMethod.style = styleCss$4;

const styleCss$3 = ".sc-ig-payment-method-add-h{width:30%}@media only screen and (min-width: 1000px){h1.sc-ig-payment-method-add{visibility:visible}}@media only screen and (max-width: 1000px){h1.sc-ig-payment-method-add{display:none}}";

const IntergiroMethodAdd = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.add = index$1.createEvent(this, "add", 7);
  }
  submit(event) {
    event.preventDefault();
    this.add.emit(event.detail.method);
  }
  render() {
    return [
      index$1.h("intergiro-onboard", { customer: this.customer, onCreate: (event) => this.submit(event), "api-key": this.apiKey }),
    ];
  }
};
IntergiroMethodAdd.style = styleCss$3;

const sv = {
  Scheme: "System",
  "Card number": "Kortnummer",
  Expires: "Giltigt t.o.m.",
  Close: "Stäng",
  "Add method": "Lägg till metod",
  "The customer has no payment method.": "Kunden har ingen betalningsmetod.",
};

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

const styleCss$2 = "[hidden].sc-ig-payment-methods-h{display:none}section.sc-ig-payment-methods{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-weight:bold}section.sc-ig-payment-methods>*.sc-ig-payment-methods{width:10em}section.sc-ig-payment-methods>*.sc-ig-payment-methods:nth-of-type(2){width:15em}@media only screen and (min-width: 1000px){smoothly-icon.sc-ig-payment-methods{visibility:hidden}smoothly-reorder.sc-ig-payment-methods{float:left}smoothly-reorder.sc-ig-payment-methods>*.sc-ig-payment-methods{margin-top:10px}ig-payment-method-add.sc-ig-payment-methods{position:relative;display:block;visibility:visible;width:50%;float:right}}@media only screen and (max-width: 1000px){smoothly-icon.sc-ig-payment-methods{visibility:visible;position:fixed;right:5%;cursor:pointer}ig-payment-method-add.sc-ig-payment-methods,#desktop.sc-ig-payment-methods{display:none}ig-payment-method-add.sc-ig-payment-methods,#phone.sc-ig-payment-methods{display:block;width:25rem;max-width:90%;margin:0 auto}.sc-ig-payment-methods-h>smoothly-reorder.sc-ig-payment-methods>*.sc-ig-payment-methods,table.sc-ig-payment-methods{max-width:60%;margin:0 auto;margin-top:10px}}";

const IntergiroPaymentMethods = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.update = index$1.createEvent(this, "update", 7);
    this.delete = index$1.createEvent(this, "delete", 7);
    this.addable = false;
    this.deletable = false;
    this.mode = "card";
    this.opened = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  renderMethods() {
    this.methods = [...this.methods];
  }
  deleteMethod(index) {
    window.setTimeout(() => {
      this.methods.splice(index, 1);
      this.renderMethods();
      this.delete.emit(this.methods);
    }, 500);
  }
  reorderMethods(event) {
    const fromIndex = event.detail[0];
    const toIndex = event.detail[1];
    const e = this.methods.splice(fromIndex, 1);
    this.methods.splice(toIndex, 0, ...e);
    this.update.emit(this.methods);
  }
  render() {
    return [
      this.addable
        ? [
          index$1.h("smoothly-icon", { name: this.opened ? "close-circle" : "add-circle", toolTip: this.opened ? this.t("Close") : this.t("Add method"), size: "large", onClick: () => (this.opened = !this.opened) }),
          index$1.h("ig-payment-method-add", { id: this.opened ? "phone" : "desktop", customer: this.customer, "api-key": this.apiKey, onAdd: () => this.renderMethods() }),
        ]
        : null,
      this.mode == "table" &&
        (this.methods.length > 0 ? (index$1.h("section", null, index$1.h("label", null, this.t("Scheme")), index$1.h("label", null, this.t("Card number")), index$1.h("label", null, this.t("Expires")))) : (index$1.h("p", null, this.t("The customer has no payment method.")))),
      index$1.h("smoothly-reorder", { onReorder: (event) => this.reorderMethods(event) }, this.methods.map((method, index) => [
        index$1.h("ig-payment-method", { mode: this.mode, method: method, deletable: this.deletable, onDeleteMethod: () => this.deleteMethod(index) }),
      ])),
    ];
  }
  get element() { return index$1.getElement(this); }
};
IntergiroPaymentMethods.style = styleCss$2;

const styleCss$1 = ".sc-intergiro-onboard-h{display:block;max-width:40em}";

const IntergiroOnboard = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.create = index$1.createEvent(this, "create", 7);
  }
  componentWillLoad() {
    if (!this.number)
      this.number = Token.Identifier.generate(16);
  }
  onCreate(event) {
    this.create.emit(event.detail);
  }
  render() {
    return (index$1.h("payfunc-onboard", { "api-key": this.apiKey, customer: this.customer, number: this.number, cosmetic: this.cosmetic, responseTimer: this.responseTimer }));
  }
};
IntergiroOnboard.style = styleCss$1;

const styleCss = "smoothly-reorder>*{cursor:move;-webkit-transition:-webkit-transform 0.3s;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s, -webkit-transform 0.3s}smoothly-reorder>*.dragging{-webkit-transition:none;transition:none;-webkit-box-shadow:0 0 10px rgba(var(--smoothly-dark-color));box-shadow:0 0 10px rgba(var(--smoothly-dark-color));z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";

const SmoothlyReorder = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.reorder = index$1.createEvent(this, "reorder", 7);
  }
  get children() {
    let result = [];
    if (this.childrenCache)
      result = this.childrenCache;
    else {
      for (let index = 0; index < this.element.children.length; index++) {
        const element = this.element.children[index];
        if (element instanceof HTMLElement) {
          const bounds = element.getBoundingClientRect();
          result.push({
            top: bounds.top,
            middle: bounds.top + bounds.height / 2,
            bottom: bounds.bottom,
            element: element,
          });
        }
      }
      this.childrenCache = result;
    }
    return result;
  }
  onMouseDown(event) {
    if (!this.move && this.element.children.length > 1) {
      this.bounds = this.element.getBoundingClientRect();
      this.childrenCache = undefined;
      const index = this.getCurrentIndex(event.clientY);
      this.dragged = Object.assign(Object.assign({}, this.children[index]), { startY: event.clientY, offsetY: event.clientY - this.children[index].middle, index, height: index < this.children.length - 1
          ? this.children[index + 1].top - this.children[index].top
          : this.children[index].bottom - this.children[index - 1].bottom });
      this.dragged.element.className += " dragging";
    }
  }
  onMouseMove(event) {
    if (this.dragged && this.bounds && event.clientY >= this.bounds.top && event.clientY <= this.bounds.bottom) {
      const currentIndex = this.getCurrentIndex(event.clientY - this.dragged.offsetY);
      this.translate(this.dragged.index, currentIndex, event.clientY - this.dragged.startY);
    }
  }
  onMouseUp(event) {
    if (this.dragged) {
      this.dragged.element.className = this.dragged.element.className.replace(" dragging", "");
      const index = this.getCurrentIndex(event.clientY - this.dragged.offsetY);
      this.translate(this.dragged.index, index, this.children[index].top - this.dragged.top);
      this.move = { from: this.dragged.index, to: index };
      this.dragged = undefined;
      window.setTimeout(() => {
        if (this.move) {
          const children = [...this.children.map(c => c.element)];
          const e = children.splice(this.move.from, 1);
          children.splice(this.move.to, 0, ...e);
          children.forEach(child => this.element.removeChild(child));
          children.forEach(child => {
            child.style.transform = "";
            this.element.appendChild(child);
          });
          this.reorder.emit([this.move.from, this.move.to]);
          this.move = undefined;
        }
      }, 500);
    }
  }
  translate(fromIndex, toIndex, y) {
    for (let index = 0; index < this.children.length; index++) {
      let value;
      if (this.dragged) {
        if (fromIndex < toIndex && index > fromIndex && index <= toIndex)
          value = -this.dragged.height;
        else if (fromIndex > toIndex && index < fromIndex && index >= toIndex)
          value = this.dragged.height;
        else
          value = index == fromIndex ? y : 0;
        this.children[index].element.style.transform = `translateY(${value}px)`;
      }
    }
  }
  getCurrentIndex(y) {
    return this.children.findIndex(c => y < c.bottom);
  }
  componentDidLoad() {
    this.element.childNodes.forEach(child => {
      child.addEventListener("mousedown", (e) => this.onMouseDown(e));
      child.addEventListener("mousemove", (e) => this.onMouseMove(e));
      child.addEventListener("mouseup", (e) => this.onMouseUp(e));
    });
  }
  get element() { return index$1.getElement(this); }
};
SmoothlyReorder.style = styleCss;

exports.ig_payment_method = IntergiroPaymentMethod;
exports.ig_payment_method_add = IntergiroMethodAdd;
exports.ig_payment_methods = IntergiroPaymentMethods;
exports.intergiro_onboard = IntergiroOnboard;
exports.smoothly_reorder = SmoothlyReorder;
