import { defineComponent as _, computed as i, createElementBlock as s, openBlock as o, normalizeClass as n, createCommentVNode as l, createElementVNode as c, toDisplayString as d } from "vue";
import u from "../assets/images/24_checkbox-light-enabled-unchecked.svg.js";
import h from "../assets/images/24_checkbox-light-enabled-checked.svg.js";
const f = ["innerHTML"], k = { class: "dropdown-list-item__title-container" }, v = { class: "dropdown-list-item__title text-s" }, x = {
  key: 0,
  class: "dropdown-list-item__description text-description"
}, C = {
  key: 1,
  class: "dropdown-list-item__icon flex-self-start"
}, B = /* @__PURE__ */ _({
  __name: "DropdownListItem",
  props: {
    option: {},
    isSelected: { type: Boolean, default: !1 },
    size: { default: "small" },
    isHovered: { type: Boolean, default: !1 },
    useCheckbox: { type: Boolean, default: !1 }
  },
  setup(r) {
    const t = r, a = i(() => {
      const e = [];
      return t.size === "small" && e.push("dropdown-list-item__small"), t.isSelected && e.push("dropdown-list-item__selected"), t.isHovered && e.push("hovered-item"), e.join(" ");
    }), p = i(() => {
      const e = ["dropdown-list-item__checkbox", "flex-self-start"];
      return t.isSelected && e.push("checked"), e.join(" ");
    }), m = i(() => t.isSelected ? h : u);
    return (e, b) => (o(), s("div", {
      class: n([a.value, "dropdown-list-item"])
    }, [
      t.useCheckbox ? (o(), s("div", {
        key: 0,
        class: n(p.value),
        innerHTML: m.value
      }, null, 10, f)) : l("", !0),
      c("div", k, [
        c("div", v, d(e.option.label), 1),
        e.option.description ? (o(), s("div", x, d(e.option.description), 1)) : l("", !0)
      ]),
      !t.useCheckbox && t.isSelected ? (o(), s("div", C)) : l("", !0)
    ], 2));
  }
});
export {
  B as default
};
//# sourceMappingURL=DropdownListItem.vue.js.map
