'use strict';

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

const index$1 = require('./index-8bb493f3.js');
require('./_commonjsHelpers-fc53004f.js');
const index = require('./index-b1b1dbe1.js');

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

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

const styleCss = ":host{display:flex;position:relative}:host>.card{height:10.8em;background-color:rgb(var(--smoothly-default-shade));box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius:.7em;width:23em;padding:.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:5em;right:-3em;cursor:pointer}:host>.table{display:flex;justify-content:space-between}:host>.table>*{width:10em}:host>.table>*:nth-child(2){width:15em}:host>.table>payfunc-scheme-logotype>svg{height:.8em}: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 PayfuncPaymentMethod = 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(this.element);
  }
  methodDeletedHandler(method) {
    this.deleteMethod.emit(method);
  }
  render() {
    return (index$1.h("div", { class: this.mode }, index$1.h("payfunc-scheme-logotype", { 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); }
};
PayfuncPaymentMethod.style = styleCss;

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

const PayfuncMethodAdd = 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("payfunc-onboard", { account: this.account, onCreate: (event) => this.submit(event), "api-key": this.apiKey }),
    ];
  }
};
PayfuncMethodAdd.style = styleCss$1;

const styleCss$2 = "p.sc-payfunc-scheme-logotype{font-size:small;margin-top:-7px;margin-left:2px}";

const PayfuncSchemeLogotype = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
  }
  render() {
    return this.scheme === "visa" ? (index$1.h("svg", { xmlns: "http://www.w3.org/2000/svg", id: "svg8", version: "1.1", viewBox: "0 0 69.426948 28.154205", height: "35" }, index$1.h("path", { id: "path30", fill: "#1a1f71", d: "M 34.417564,4.5815956 30.343687,23.622847 h -4.925343 l 4.07416,-19.0412514 z m 20.724142,12.2947294 2.593058,-7.1501006 1.492391,7.1501006 z m 5.495431,6.746522 h 4.556478 L 61.217668,4.5815956 h -4.205676 c -0.944879,0 -1.742157,0.5497688 -2.09691,1.397 L 47.525093,23.622847 h 5.172287 l 1.027006,-2.843389 h 6.319802 z M 47.781916,17.406056 c 0.02117,-5.025814 -6.950288,-5.302674 -6.902028,-7.5477516 0.01439,-0.6835423 0.665763,-1.4094178 2.089009,-1.5954023 0.706967,-0.092287 2.650349,-0.1631244 4.857609,0.8523111 l 0.863882,-4.037471 c -1.185051,-0.4306711 -2.710462,-0.8444089 -4.60756,-0.8444089 -4.868332,0 -8.295357,2.5885422 -8.324426,6.2949667 -0.03048,2.740943 2.44602,4.270023 4.31292,5.181601 1.918546,0.933591 2.563425,1.531055 2.55524,2.365869 -0.0127,1.278466 -1.531055,1.841217 -2.946964,1.863795 -2.477347,0.03923 -3.914422,-0.668584 -5.060245,-1.202549 l -0.892386,4.172091 c 1.15062,0.528885 3.274624,0.98806 5.478497,1.011767 5.17398,0 8.559518,-2.556933 8.576452,-6.514818 M 27.378942,4.5815956 19.398544,23.622847 H 14.19098 L 10.263857,8.426591 C 10.02538,7.49046 9.8179463,7.1481244 9.0926353,6.75386 7.9098423,6.1115222 5.9543243,5.5086956 4.2333333,5.1347511 l 0.117969,-0.5531555 h 8.3811537 c 1.067929,0 2.029178,0.7109177 2.271324,1.9411244 l 2.074616,11.019367 5.12572,-12.9604914 z" }))) : ([
      index$1.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 131.39 86.9", height: "45" }, index$1.h("rect", { opacity: "0", fill: "#fff", width: "131.39", height: "86.9" }), index$1.h("rect", { fill: "#ff5f00", x: "48.37", y: "15.14", width: "34.66", height: "56.61" }), index$1.h("path", { fill: "#eb001b", d: "M51.94,43.45a35.94,35.94,0,0,1,13.75-28.3,36,36,0,1,0,0,56.61A35.94,35.94,0,0,1,51.94,43.45Z" }), index$1.h("path", { fill: "#f79e1b", d: "M123.94,43.45a36,36,0,0,1-58.25,28.3,36,36,0,0,0,0-56.61,36,36,0,0,1,58.25,28.3Z" })),
      index$1.h("p", null, this.scheme),
    ]);
  }
};
PayfuncSchemeLogotype.style = styleCss$2;

const styleCss$3 = "smoothly-reorder>*{cursor:move;transition:transform 0.3s}smoothly-reorder>*.dragging{transition:none;box-shadow:0 0 10px rgba(var(--smoothly-dark-color));z-index:1;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$3;

exports.payfunc_payment_method = PayfuncPaymentMethod;
exports.payfunc_payment_method_add = PayfuncMethodAdd;
exports.payfunc_scheme_logotype = PayfuncSchemeLogotype;
exports.smoothly_reorder = SmoothlyReorder;
