import { _ as p, D as _ } from "./install-CMReC2O4.js";
import { resolveComponent as c, resolveDirective as u, createElementBlock as g, openBlock as h, createElementVNode as o, createVNode as a, toDisplayString as m, withDirectives as d } from "vue";
const 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: () => ({
    defaultSize: "10"
  }),
  watch: {
    size(e) {
      this.changeSize(e);
    }
  },
  created() {
    this.debounce && (this.changeSize = _(this.changeSize, this.debounceDelay));
  },
  methods: {
    inputHandler(e) {
      const t = e >= 0 && e <= 1e3 ? e : this.defaultSize;
      this.$emit("input", t), this.changeSize(t);
    },
    changeSize(e) {
      this.$emit("change", e);
    },
    goNext() {
      this.$emit("next");
    },
    goPrev() {
      this.$emit("prev");
    }
  }
}, b = { class: "wt-pagination typo-body-1" }, w = { class: "wt-pagination__size" }, v = { class: "wt-pagination__size-text" }, z = { class: "wt-pagination__page-controls" };
function x(e, t, i, y, S, n) {
  const r = c("wt-input-number"), s = c("wt-icon-btn"), l = u("tooltip");
  return h(), g("footer", b, [
    o("div", w, [
      o("div", v, m(e.$t("webitelUI.pagination.sizeText")), 1),
      a(r, {
        max: 1e3,
        min: 1,
        "model-value": i.size,
        class: "wt-pagination__size-input",
        "onUpdate:modelValue": n.inputHandler
      }, null, 8, ["model-value", "onUpdate:modelValue"])
    ]),
    o("div", z, [
      d(a(s, {
        disabled: !i.prev,
        class: "wt-pagination__page-control",
        icon: "arrow-left",
        onClick: n.goPrev
      }, null, 8, ["disabled", "onClick"]), [
        [l, e.$t("webitelUI.pagination.prev")]
      ]),
      d(a(s, {
        disabled: !i.next,
        class: "wt-pagination__page-control",
        icon: "arrow-right",
        onClick: n.goNext
      }, null, 8, ["disabled", "onClick"]), [
        [l, e.$t("webitelUI.pagination.next")]
      ])
    ])
  ]);
}
const N = /* @__PURE__ */ p(f, [["render", x], ["__scopeId", "data-v-5dff60c4"]]);
export {
  N as default
};
