import { _ as u, D as h } from "./install-BuMO14Rb.js";
import { resolveComponent as r, resolveDirective as g, createElementBlock as m, openBlock as z, createElementVNode as o, createVNode as a, toDisplayString as b, withDirectives as d } from "vue";
const t = 10, f = {
  name: "WtPagination",
  model: {
    prop: "size",
    event: "change"
  },
  /**
   * @emits {string | number} change - Fires when size changes. The same as input, but if "debounce" is true, event is debounced
   * @emits {string | number} input - Fires when size changes. SIZE CHANGE IS DEBOUNCED
   * @emits {void} next - Event is triggered on "next" arrow click
   * @emits {void} prev - Event is triggered on "prev" arrow click
   */
  props: {
    /**
     * SIZE CHANGE IS DEBOUNCED
     * @type {string | number}
     * @model size
     */
    size: {
      type: [
        String,
        Number
      ]
    },
    /**
     * Is false, disables paging arrow
     * @type {boolean}
     * @default false
     */
    next: {
      type: Boolean,
      default: !1
    },
    /**
     * Is false, disables paging arrow
     * @type {boolean}
     * @default false
     */
    prev: {
      type: Boolean,
      default: !1
    },
    /**
     * If true, @change event is delayed for debounceDelay from last change
     * @type {boolean}
     * @default false
     */
    debounce: {
      type: Boolean,
      default: !1
    },
    /**
     * Debounce delay in milliseconds
     * @type {number}
     * @default 1000
     */
    debounceDelay: {
      type: Number,
      default: 1e3
    }
  },
  emits: [
    "change",
    "input",
    "prev",
    "next"
  ],
  data() {
    return {
      internalSize: this.size != null ? +this.size : t
    };
  },
  watch: {
    internalSize(e) {
      e !== null && this.changeSize(e);
    },
    size(e) {
      this.internalSize = e != null ? +e : t;
    }
  },
  created() {
    this.debounce && (this.changeSize = h(this.changeSize, this.debounceDelay));
  },
  methods: {
    inputHandler(e) {
      if (e === null) {
        this.internalSize = null, this.$nextTick(() => {
          this.internalSize = t, this.$emit("input", t);
        });
        return;
      }
      const n = e >= 0 && e <= 1e3 ? e : t;
      this.internalSize = n, this.$emit("input", n);
    },
    changeSize(e) {
      this.$emit("change", e);
    },
    goNext() {
      this.$emit("next");
    },
    goPrev() {
      this.$emit("prev");
    }
  }
}, w = { class: "wt-pagination typo-body-1" }, v = { class: "wt-pagination__size" }, S = { class: "wt-pagination__size-text" }, x = { class: "wt-pagination__page-controls" };
function y(e, n, s, k, p, i) {
  const _ = r("wt-input-number"), l = r("wt-icon-btn"), c = g("tooltip");
  return z(), m("footer", w, [
    o("div", v, [
      o("div", S, b(e.$t("webitelUI.pagination.sizeText")), 1),
      a(_, {
        max: 1e3,
        min: 1,
        "model-value": p.internalSize,
        class: "wt-pagination__size-input",
        "onUpdate:modelValue": i.inputHandler
      }, null, 8, ["model-value", "onUpdate:modelValue"])
    ]),
    o("div", x, [
      d(a(l, {
        disabled: !s.prev,
        class: "wt-pagination__page-control",
        icon: "arrow-left",
        onClick: i.goPrev
      }, null, 8, ["disabled", "onClick"]), [
        [c, e.$t("webitelUI.pagination.prev")]
      ]),
      d(a(l, {
        disabled: !s.next,
        class: "wt-pagination__page-control",
        icon: "arrow-right",
        onClick: i.goNext
      }, null, 8, ["disabled", "onClick"]), [
        [c, e.$t("webitelUI.pagination.next")]
      ])
    ])
  ]);
}
const N = /* @__PURE__ */ u(f, [["render", y], ["__scopeId", "data-v-4183dd40"]]);
export {
  N as default
};
