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