import { ref as J, onMounted as H, nextTick as x, onBeforeUnmount as Q, watch as P, defineComponent as Y, useTemplateRef as A, inject as Z, useCssModule as ee, computed as te, onBeforeMount as oe, openBlock as r, createElementBlock as g, normalizeClass as L, unref as e, createElementVNode as ae, createBlock as F, createCommentVNode as w, withCtx as d, renderSlot as E, createVNode as h, createTextVNode as se, toDisplayString as U, Fragment as ne } from "vue";
import { u as le } from "./usePaginationStats-d_q39naC.js";
import { t as R } from "./locale.js";
import D from "./Button.js";
import ie from "./Checkbox.js";
import "es-toolkit";
import "./Module.keys-DcqBbvvT.js";
import j from "./Icon.js";
import { D as K } from "./DataView.keys-aSOnA4AD.js";
import re from "./IconLabel.js";
import de from "./MoreActions.js";
import { getOwnerDomContext as ce } from "./utils/helpers.js";
import { t as C, a as ue } from "./templateRefNarrowing-CeANDylX.js";
import { _ as pe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function me(T) {
  const { toolbarEl: y, paginationEl: t, checkboxEl: W, isPaginationEnabled: c, isSelectable: u, isEmpty: p } = T, m = J(null);
  let l = null, o = null;
  const s = () => {
    const a = C(y.value);
    if (!a) return;
    const n = a.getBoundingClientRect().width;
    let v = 0, S = 0;
    if (c != null && c.value) {
      const i = C(t.value);
      i && (v = i.getBoundingClientRect().width);
    }
    if (u != null && u.value && !(p != null && p.value)) {
      const i = ue(W.value);
      i && (S = i.getBoundingClientRect().width);
    }
    const { ownerWin: V } = ce(a), z = V.getComputedStyle(a), $ = parseFloat(z.paddingLeft) || 0, B = parseFloat(z.paddingRight) || 0, k = Math.max(0, n - v - S - $ - B);
    m.value = `${k}px`;
  }, _ = () => {
    const a = C(y.value);
    if (!a) return;
    l = new ResizeObserver(() => {
      x(() => {
        s();
      });
    }), l.observe(a);
    const n = C(t.value);
    n && (o = new ResizeObserver(() => {
      x(() => {
        s();
      });
    }), o.observe(n));
  }, O = () => {
    l && (l.disconnect(), l = null), o && (o.disconnect(), o = null);
  };
  return H(() => {
    x(() => {
      s(), _();
    });
  }), Q(() => {
    O();
  }), P([c, u, p], () => {
    x(() => {
      s();
    });
  }), P(t, (a) => {
    o && (o.disconnect(), o = null);
    const n = C(a);
    n && (o = new ResizeObserver(() => {
      x(() => {
        s();
      });
    }), o.observe(n));
  }), {
    actionsWidth: m,
    updateActionsWidth: s
  };
}
const fe = { class: "flex place-items-center" }, be = {
  key: 0,
  ref: "paginationEl",
  class: "stash-data-view-toolbar__pagination flex shrink-0 items-center"
}, ge = {
  key: 0,
  class: "mx-1.5"
}, he = {
  key: 0,
  class: "mx-1.5 hidden md:block"
}, ve = /* @__PURE__ */ Y({
  __name: "DataViewToolbar",
  props: {
    allRowsSelected: { type: Boolean, default: !1 },
    hidePageStats: { type: Boolean, default: !1 },
    radius: { default: void 0 },
    someRowsSelected: { type: Boolean, default: !1 },
    selectedItemsCount: { default: void 0 },
    hasTabsAbove: { type: Boolean, default: !1 }
  },
  emits: ["select"],
  setup(T, { emit: y }) {
    const t = T, W = y, c = A("toolbarEl"), u = A("paginationEl"), p = A("checkboxEl"), {
      isWithinModule: m,
      variant: l,
      density: o,
      currentPage: s,
      hasToolbar: _,
      isPaginateNextDisabled: O,
      isPaginationEnabled: a,
      isSelectable: n,
      pageCount: v,
      pageSize: S,
      totalDataCount: V,
      goPrevPage: z,
      goNextPage: $,
      isEmpty: B,
      isLoading: k
    } = Z(K.key, K.defaults), i = J(0), X = ee(), { actionsWidth: q } = me({
      toolbarEl: c,
      paginationEl: u,
      checkboxEl: p,
      isPaginationEnabled: a,
      isSelectable: n,
      isEmpty: B
    }), I = te(() => t.radius ? t.radius : m.value ? "none" : l.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), G = le({ currentPage: s, pageSize: S, totalItems: V });
    function N() {
      W("select"), i.value++;
    }
    return oe(() => {
      _ && (_.value = !0);
    }), (f, b) => (r(), g("div", {
      ref: "toolbarEl",
      class: L(["stash-data-view-toolbar flex min-h-15 items-center justify-between bg-white py-1.5 shadow", {
        "border-t border-ice-200": e(m),
        "rounded-tr": I.value === "rounded-top-right",
        rounded: I.value === "rounded",
        "rounded-t": I.value === "rounded-top",
        "mb-3": e(l) !== "table" && !e(m),
        "px-3": e(o) === "compact",
        "px-3 lg:px-6": e(o) === "comfortable"
      }]),
      "data-test": "stash-data-view-toolbar"
    }, [
      ae("div", fe, [
        e(n) && !e(B) ? (r(), F(ie, {
          ref: "checkboxEl",
          key: i.value,
          checked: t.allRowsSelected,
          indeterminate: t.someRowsSelected && !t.allRowsSelected,
          title: e(R)("ll.selectAll"),
          disabled: e(k),
          "onUpdate:indeterminate": N,
          "onUpdate:checked": N
        }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : w("", !0),
        f.$slots["more-actions"] ? (r(), F(de, {
          key: 1,
          "more-button-align": "together",
          width: e(q) || void 0,
          "actions-container-class": "flex items-center gap-x-2 lg:mr-6 lg:gap-x-6"
        }, {
          toggle: d(({ toggle: M }) => [
            h(D, {
              "icon-label": "",
              class: "text-blue-500",
              "data-test": "stash-data-view-sort-button|sort-menu-button",
              onClick: M
            }, {
              default: d(() => [
                h(re, {
                  icon: "ellipsis",
                  stacked: ""
                }, {
                  default: d(() => [...b[2] || (b[2] = [
                    se(" More ", -1)
                  ])]),
                  _: 1
                })
              ]),
              _: 1
            }, 8, ["onClick"])
          ]),
          "more-actions": d(() => [
            E(f.$slots, "more-actions")
          ]),
          default: d(() => [
            E(f.$slots, "default")
          ]),
          _: 3
        }, 8, ["width"])) : (r(), g("div", {
          key: 2,
          class: L([e(X).actions, "stash-data-view-toolbar__actions flex items-center gap-x-2 lg:gap-x-4"])
        }, [
          E(f.$slots, "default")
        ], 2))
      ]),
      e(a) ? (r(), g("div", be, [
        E(f.$slots, "selected-stats", {}, () => [
          t.someRowsSelected && t.selectedItemsCount !== void 0 ? (r(), g("span", ge, U(e(R)("ll.listView.numberOfTotalSelected", { num: t.selectedItemsCount, total: e(V) })), 1)) : w("", !0)
        ]),
        E(f.$slots, "page-stats", {}, () => [
          t.hidePageStats ? w("", !0) : (r(), g("span", he, U(e(R)("ll.pageStats", e(G))), 1))
        ]),
        e(v) > 1 ? (r(), g(ne, { key: 0 }, [
          h(D, {
            icon: "",
            "aria-label": e(R)("ll.previous"),
            class: "size-9 p-1.5",
            "data-test": "button|prev-page",
            disabled: e(k) || e(s) === 1,
            onClick: b[0] || (b[0] = (M) => e(z)({ shouldEmit: !0 }))
          }, {
            default: d(() => [
              h(j, {
                name: "chevron-left",
                size: "dense"
              })
            ]),
            _: 1
          }, 8, ["aria-label", "disabled"]),
          h(D, {
            icon: "",
            "aria-label": e(R)("ll.next"),
            class: "size-9 p-1.5",
            "data-test": "button|next-page",
            disabled: e(k) || e(O) || e(s) === e(v),
            onClick: b[1] || (b[1] = (M) => e($)({ shouldEmit: !0 }))
          }, {
            default: d(() => [
              h(j, {
                name: "chevron-right",
                size: "dense"
              })
            ]),
            _: 1
          }, 8, ["aria-label", "disabled"])
        ], 64)) : w("", !0)
      ], 512)) : w("", !0)
    ], 2));
  }
}), ke = "_actions_XfnKi", xe = {
  actions: ke
}, we = {
  $style: xe
}, Me = /* @__PURE__ */ pe(ve, [["__cssModules", we]]);
export {
  Me as default
};
//# sourceMappingURL=DataViewToolbar.js.map
