import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const klevuPaginationCss = ":host{--klevu-pagination-selected-color:var(--klevu-color-primary);display:flex;gap:var(--klevu-spacing-03);justify-content:center;flex-wrap:wrap}span{display:flex;height:32px;width:32px;color:var(--klevu-color-neutral-8);border-radius:var(--klevu-border-radius-m);justify-content:center;align-items:center;font-size:var(--klevu-body-s-size);box-sizing:border-box}span.current{font-weight:bold;cursor:inherit;border:1px solid var(--klevu-pagination-selected-color);color:var(--klevu-pagination-selected-color)}span:not(.disabled):not(.current):hover{color:var(--klevu-pagination-selected-color);background-color:var(--klevu-color-neutral-2);cursor:pointer}span.disabled{opacity:var(--klevu-opacity-disabled);cursor:inherit}span.dots{width:auto}@media (max-width: 600px){:host{gap:var(--klevu-spacing-02)}}";

const KlevuPagination = /*@__PURE__*/ proxyCustomElement(class KlevuPagination extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuPaginationChange = createEvent(this, "klevuPaginationChange", 7);
    this.current = undefined;
    this.min = undefined;
    this.max = undefined;
    this.queryResult = undefined;
  }
  render() {
    let min, max, current;
    if (this.queryResult) {
      min = 1;
      max = Math.floor(this.queryResult.meta.totalResultsFound / this.queryResult.meta.noOfResults) + 1;
      current = Math.floor(this.queryResult.meta.offset / this.queryResult.meta.noOfResults) + 1;
    }
    else {
      if ([this.current, this.max, this.min].some((i) => i === undefined)) {
        throw new Error("queryResult or current, min & max needs to be defined");
      }
      min = this.min;
      max = this.max;
      current = this.current;
    }
    let pages = [];
    for (let i = min; i <= max; i++) {
      pages.push(i);
    }
    if (pages.length > 8) {
      let startIndex = min + 1;
      let endIndex = max - 1;
      let currentStartIndex = current > 3 ? current - 1 : 0;
      let currentEndIndex = current < endIndex - 1 ? currentStartIndex + 2 : endIndex - 1;
      if (currentStartIndex < startIndex) {
        currentStartIndex = startIndex + 1;
        currentEndIndex = currentStartIndex + 2;
      }
      pages = [];
      for (let i = min; i <= startIndex; i++) {
        pages.push(i);
      }
      if (startIndex + 1 < currentStartIndex) {
        pages.push(-1);
      }
      for (let i = currentStartIndex; i <= currentEndIndex; i++) {
        pages.push(i);
      }
      if (currentEndIndex + 1 < endIndex) {
        pages.push(-1);
      }
      for (let i = endIndex; i <= max; i++) {
        pages.push(i);
      }
    }
    return (h(Host, null, h("span", { class: {
        disabled: current === min,
      }, onClick: () => current !== min && this.klevuPaginationChange.emit(current - 1), part: "material-icon" }, "navigate_before"), pages.map((i) => {
      if (i == -1) {
        return h("span", { class: "disabled dots" }, "...");
      }
      return (h("span", { class: {
          current: current === i,
        }, onClick: () => current !== i && this.klevuPaginationChange.emit(i) }, i));
    }), h("span", { class: {
        disabled: current === max,
      }, onClick: () => current !== max && this.klevuPaginationChange.emit(current + 1), part: "material-icon" }, "navigate_next")));
  }
  static get style() { return klevuPaginationCss; }
}, [1, "klevu-pagination", {
    "current": [2],
    "min": [2],
    "max": [2],
    "queryResult": [16]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-pagination"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-pagination":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuPagination);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuPagination as K, defineCustomElement as d };

//# sourceMappingURL=klevu-pagination2.js.map