import { LIST_ITEM_TYPES as l, LIST_ITEM_NAVIGATION_TYPES as s } from "./list-item-constants.js";
import h from "../../common/utils/index.js";
import { DtIconCheck as g } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as r, openBlock as n, createBlock as d, resolveDynamicComponent as f, mergeProps as _, toHandlers as p, withCtx as a, normalizeClass as y, createSlots as v, renderList as T, renderSlot as m, createVNode as b } from "vue";
import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import k from "../item-layout/item-layout.js";
const L = ["listitem", "menuitem", "option"], S = {
  compatConfig: { MODE: 3 },
  name: "DtListItem",
  components: {
    DtItemLayout: k,
    DtIconCheck: g
  },
  /**
   * Value provided from keyboard_list_navigation.js using id prop.
   */
  inject: {
    highlightId: { default: null }
  },
  props: {
    /**
     * Id for the item.
     */
    id: {
      type: String,
      default() {
        return h.getUniqueString();
      }
    },
    /**
     * String to use for the item's role.
     */
    role: {
      type: String,
      default: "listitem",
      validator: (e) => L.includes(e)
    },
    /**
     * HTML element type (tag name) of the content wrapper element.
     */
    elementType: {
      type: String,
      default: "li"
    },
    /**
     * The type of child list item to use.
     * @values default, custom
     */
    type: {
      type: String,
      default: l.DEFAULT,
      validator: (e) => Object.values(l).includes(e)
    },
    /**
     * The type of navigation that this component should support.
     * - "arrow-keys" for items that are navigated with UP/DOWN keys.
     * - "tab" for items that are navigated using the TAB key.
     * - "none" for static items that are not interactive.
     * @values arrow-keys, tab, none
     */
    navigationType: {
      type: String,
      default: s.NONE,
      validator: (e) => Object.values(s).includes(e)
    },
    /**
     * Applies selected styles to the list item
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Additional Classes to apply to the wrapper element,
     * note: it only applies on "default" type
     * Can accept all of: String, Object, and Array, i.e. has the
     * same api as Vue's built-in handling of the class attribute.
     */
    wrapperClass: {
      type: [String, Object, Array],
      default: ""
    }
  },
  emits: [
    /**
     * Key down event
     *
     * @event keydown
     * @type {KeyboardEvent}
     */
    "keydown",
    /**
     * Native mouse move event
     *
     * @event mousemove
     * @type {MouseEvent}
     */
    "mousemove",
    /**
     * Native mouse leave event
     *
     * @event mouseleave
     * @type {MouseEvent}
     */
    "mouseleave"
  ],
  data() {
    return {
      injected: !1,
      mouseHighlighted: !1
    };
  },
  computed: {
    isDefaultType() {
      return this.type === l.DEFAULT;
    },
    listItemListeners() {
      return {
        keydown: (e) => {
          ["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
        },
        mousemove: (e) => {
          this.onMouseHover(e), this.$emit("mousemove", e);
        },
        mouseleave: (e) => {
          this.onMouseLeave(e), this.$emit("mouseleave", e);
        }
      };
    },
    /**
     * For keyboard navigation, whether this item is currently highlighted.
     * An injected highlightId will override the default mouseover highlight.
     */
    isHighlighted() {
      return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
    },
    isFocusable() {
      return this.navigationType === s.TAB;
    },
    /**
     * Whether to apply hover styles.
     */
    isHoverable() {
      return this.navigationType !== s.NONE;
    }
  },
  methods: {
    onClick(e) {
      this.$emit("click", e);
    },
    onMouseHover() {
      this.mouseHighlighted = !0;
    },
    onMouseLeave() {
      this.mouseHighlighted = !1;
    }
  }
};
function H(e, C, i, D, E, t) {
  const c = r("dt-icon-check"), u = r("dt-item-layout");
  return n(), d(f(i.elementType), _({
    id: i.id,
    class: [
      "d-list-item",
      {
        "d-list-item--focusable": t.isFocusable,
        "d-list-item--highlighted": t.isHighlighted,
        "d-list-item--static": !t.isHoverable
      }
    ],
    tabindex: t.isFocusable ? 0 : -1,
    role: i.role,
    "aria-selected": i.role === "listitem" ? void 0 : t.isHighlighted
  }, p(t.listItemListeners)), {
    default: a(() => [
      t.isDefaultType ? (n(), d(u, {
        key: 0,
        unstyled: "",
        class: y(["d-list-item__wrapper", i.wrapperClass]),
        "left-class": "d-list-item__left",
        "content-class": "d-list-item__content",
        "title-class": "d-list-item__title",
        "subtitle-class": "d-list-item__subtitle",
        "bottom-class": "d-list-item__bottom",
        "right-class": "d-list-item__right",
        "selected-class": "d-list-item__selected",
        "data-qa": "dt-list-item-wrapper"
      }, v({ _: 2 }, [
        T(e.$slots, (w, o) => ({
          name: o,
          fn: a(() => [
            m(e.$slots, o)
          ])
        })),
        i.selected ? {
          name: "selected",
          fn: a(() => [
            b(c, { size: "400" })
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["class"])) : m(e.$slots, "default", { key: 1 })
    ]),
    _: 3
  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
}
const B = /* @__PURE__ */ I(S, [["render", H]]);
export {
  B as default
};
//# sourceMappingURL=list-item.js.map
