import { defineComponent as c, useSlots as E, computed as C, createElementBlock as o, openBlock as n, normalizeClass as l, createElementVNode as p, createCommentVNode as t, createBlock as P, createVNode as r, unref as a, renderSlot as v, withModifiers as m } from "vue";
import g from "../PlIcon16/PlIcon16.vue.js";
import b from "../PlIcon24/PlIcon24.vue.js";
const f = ["data-draggable"], h = /* @__PURE__ */ c({
  __name: "PlElementListItem",
  props: {
    item: {},
    index: {},
    showDragHandle: { type: Boolean },
    isActive: { type: Boolean },
    isDraggable: { type: Boolean },
    isRemovable: { type: Boolean },
    isExpandable: { type: Boolean },
    isExpanded: { type: Boolean },
    isToggable: { type: Boolean },
    isToggled: { type: Boolean },
    isPinnable: { type: Boolean },
    isPinned: { type: Boolean }
  },
  emits: ["expand", "toggle", "pin", "remove"],
  setup(k, { emit: u }) {
    const s = k, B = E(), $ = C(() => B.content !== void 0), d = u;
    return (e, i) => (n(), o("div", {
      class: l([e.$style.root, {
        [e.$style.active]: s.isActive,
        [e.$style.pinned]: s.isPinned,
        [e.$style.opened]: s.isExpanded,
        [e.$style.disabled]: s.isToggled
      }])
    }, [
      p("div", {
        class: l([e.$style.head, {
          [e.$style.clickable]: $.value
        }]),
        onClick: i[3] || (i[3] = (y) => e.isExpandable && d("expand", s.item, s.index))
      }, [
        s.showDragHandle ? (n(), o("div", {
          key: 0,
          class: l([e.$style.action, e.$style.draggable, { [e.$style.disable]: !s.isDraggable }]),
          "data-draggable": s.isDraggable
        }, [
          r(a(g), { name: "drag-dots" })
        ], 10, f)) : t("", !0),
        e.isExpandable ? (n(), P(a(g), {
          key: 1,
          class: l([e.$style.contentChevron, { [e.$style.opened]: s.isExpanded }]),
          name: "chevron-down"
        }, null, 8, ["class"])) : t("", !0),
        p("div", {
          class: l(e.$style.title)
        }, [
          v(e.$slots, "title", {
            item: s.item,
            index: s.index
          })
        ], 2),
        p("div", {
          class: l([e.$style.actions, e.$style.showOnHover])
        }, [
          s.isToggable ? (n(), o("div", {
            key: 0,
            class: l([e.$style.action, e.$style.clickable, { [e.$style.disable]: !s.isToggable }]),
            onClick: i[0] || (i[0] = m((y) => d("toggle", s.item, s.index), ["stop"]))
          }, [
            r(a(b), {
              name: s.isToggled === !0 ? "view-hide" : "view-show",
              size: "16"
            }, null, 8, ["name"])
          ], 2)) : t("", !0),
          s.isPinnable ? (n(), o("div", {
            key: 1,
            class: l([e.$style.action, e.$style.clickable, {
              [e.$style.disable]: !s.isPinnable,
              [e.$style.activated]: s.isPinned
            }]),
            onClick: i[1] || (i[1] = m((y) => d("pin", s.item, s.index), ["stop"]))
          }, [
            r(a(b), {
              name: "pin",
              size: "16"
            })
          ], 2)) : t("", !0),
          s.isRemovable ? (n(), o("div", {
            key: 2,
            class: l([e.$style.action, e.$style.clickable]),
            onClick: i[2] || (i[2] = m((y) => d("remove", s.item, s.index), ["stop"]))
          }, [
            r(a(g), { name: "close" })
          ], 2)) : t("", !0)
        ], 2)
      ], 2),
      $.value && s.isExpanded ? (n(), o("div", {
        key: 0,
        class: l([e.$style.body, { [e.$style.disabled]: s.isToggled }])
      }, [
        v(e.$slots, "content", {
          item: s.item,
          index: s.index
        })
      ], 2)) : t("", !0)
    ], 2));
  }
});
export {
  h as default
};
//# sourceMappingURL=PlElementListItem.vue2.js.map
