require('../assets/NcListItem-GE5S37TT.css');
"use strict";
const NcActions = require("./NcActions-DTICeoTz.cjs");
const NcCounterBubble = require("./NcCounterBubble-BRrUO34D.cjs");
const Components_NcVNodes = require("../Components/NcVNodes.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
  name: "NcListItem",
  components: {
    NcActions: NcActions.NcActions,
    NcCounterBubble: NcCounterBubble.NcCounterBubble,
    NcVNodes: Components_NcVNodes
  },
  props: {
    /**
     * The details text displayed in the upper right part of the component
     */
    details: {
      type: String,
      default: ""
    },
    /**
     * Name (first line of text)
     */
    name: {
      type: String,
      default: void 0
    },
    /**
     * Pass in `true` if you want the matching behavior to
     * be non-inclusive: https://router.vuejs.org/api/#exact
     */
    exact: {
      type: Boolean,
      default: false
    },
    /**
     * The route for the router link.
     */
    to: {
      type: [String, Object],
      default: null
    },
    /**
     * The value for the external link
     */
    href: {
      type: String,
      default: "#"
    },
    target: {
      type: String,
      default: ""
    },
    /**
     * Id for the `<a>` element
     */
    anchorId: {
      type: String,
      default: ""
    },
    /**
     * Make subname bold
     */
    bold: {
      type: Boolean,
      default: false
    },
    /**
     * Show the NcListItem in compact design
     */
    compact: {
      type: Boolean,
      default: false
    },
    /**
     * Toggle the active state of the component
     */
    active: {
      type: Boolean,
      default: false
    },
    /**
     * Aria label for the wrapper element
     */
    linkAriaLabel: {
      type: String,
      default: ""
    },
    /**
     * Aria label for the actions toggle
     */
    actionsAriaLabel: {
      type: String,
      default: void 0
    },
    /**
     * If different from 0 this component will display the
     * NcCounterBubble component
     */
    counterNumber: {
      type: [Number, String],
      default: 0
    },
    /**
     * Outlined or highlighted state of the counter
     */
    counterType: {
      type: String,
      default: "",
      validator(value) {
        return ["highlighted", "outlined", ""].indexOf(value) !== -1;
      }
    },
    /**
     * To be used only when the elements in the actions menu are very important
     */
    forceDisplayActions: {
      type: Boolean,
      default: false
    },
    /**
     * Force the actions to display in a three dot menu
     */
    forceMenu: {
      type: Boolean,
      default: false
    },
    /**
     * Show the list component layout
     */
    oneLine: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    "click",
    "update:menuOpen"
  ],
  setup() {
    const [major] = window._oc_config?.version.split(".", 2) ?? [];
    const isLegacy = major && Number.parseInt(major) < 30;
    return {
      isLegacy
    };
  },
  data() {
    return {
      hovered: false,
      hasActions: false,
      hasSubname: false,
      displayActionsOnHoverFocus: false,
      menuOpen: false,
      hasIndicator: false,
      hasDetails: false
    };
  },
  computed: {
    showAdditionalElements() {
      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
    },
    showDetails() {
      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
    }
  },
  watch: {
    menuOpen(newValue) {
      if (!newValue && !this.hovered) {
        this.displayActionsOnHoverFocus = false;
      }
    }
  },
  mounted() {
    this.checkSlots();
  },
  updated() {
    this.checkSlots();
  },
  methods: {
    /**
     * Handle link click
     *
     * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
     * @param {Function} [navigate] - VueRouter link's navigate if any
     * @param {string} [routerLinkHref] - VueRouter link's href
     */
    onClick(event, navigate, routerLinkHref) {
      this.$emit("click", event);
      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
        return;
      }
      if (routerLinkHref) {
        navigate?.(event);
        event.preventDefault();
      }
    },
    showActions() {
      if (this.hasActions) {
        this.displayActionsOnHoverFocus = true;
      }
      this.hovered = false;
    },
    hideActions() {
      this.displayActionsOnHoverFocus = false;
    },
    /**
     * @param {FocusEvent} event UI event
     */
    handleBlur(event) {
      if (this.menuOpen) {
        return;
      }
      if (this.$refs["list-item"].contains(event.relatedTarget)) {
        return;
      }
      this.hideActions();
    },
    /**
     * Hide the actions on mouseleave unless the menu is open
     */
    handleMouseleave() {
      if (!this.menuOpen) {
        this.displayActionsOnHoverFocus = false;
      }
      this.hovered = false;
    },
    handleMouseover() {
      this.showActions();
      this.hovered = true;
    },
    handleActionsUpdateOpen(e) {
      this.menuOpen = e;
      this.$emit("update:menuOpen", e);
    },
    // Check if subname and actions slots are populated
    checkSlots() {
      if (this.hasActions !== !!this.$slots.actions) {
        this.hasActions = !!this.$slots.actions;
      }
      if (this.hasSubname !== !!this.$slots.subname) {
        this.hasSubname = !!this.$slots.subname;
      }
      if (this.hasIndicator !== !!this.$slots.indicator) {
        this.hasIndicator = !!this.$slots.indicator;
      }
      if (this.hasDetails !== !!this.$slots.details) {
        this.hasDetails = !!this.$slots.details;
      }
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c(_vm.to ? "router-link" : "NcVNodes", { tag: "component", attrs: { "custom": _vm.to ? true : null, "to": _vm.to, "exact": _vm.to ? _vm.exact : null }, scopedSlots: _vm._u([{ key: "default", fn: function({ href: routerLinkHref, navigate, isActive }) {
    return [_c("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": isActive || _vm.active } }, [_c("div", { ref: "list-item", staticClass: "list-item", class: {
      "list-item--compact": _vm.compact,
      "list-item--legacy": _vm.isLegacy,
      "list-item--one-line": _vm.oneLine
    }, on: { "mouseover": _vm.handleMouseover, "mouseleave": _vm.handleMouseleave } }, [_c("a", { staticClass: "list-item__anchor", attrs: { "id": _vm.anchorId || void 0, "aria-label": _vm.linkAriaLabel, "href": routerLinkHref || _vm.href, "target": _vm.target || (_vm.href === "#" ? void 0 : "_blank"), "rel": _vm.href === "#" ? void 0 : "noopener noreferrer" }, on: { "focus": _vm.showActions, "focusout": _vm.handleBlur, "click": function($event) {
      return _vm.onClick($event, navigate, routerLinkHref);
    }, "keydown": function($event) {
      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
      return _vm.hideActions.apply(null, arguments);
    } } }, [_vm._t("icon"), _c("div", { staticClass: "list-item-content" }, [_c("div", { staticClass: "list-item-content__main" }, [_c("div", { staticClass: "list-item-content__name" }, [_vm._t("name", function() {
      return [_vm._v(_vm._s(_vm.name))];
    })], 2), _vm.hasSubname ? _c("div", { staticClass: "list-item-content__subname", class: { "list-item-content__subname--bold": _vm.bold } }, [_vm._t("subname")], 2) : _vm._e()]), _c("div", { staticClass: "list-item-content__details" }, [_vm.showDetails ? _c("div", { staticClass: "list-item-details__details" }, [_vm._t("details", function() {
      return [_vm._v(_vm._s(_vm.details))];
    })], 2) : _vm._e(), _vm.counterNumber || _vm.hasIndicator ? _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "list-item-details__extra" }, [_vm.counterNumber ? _c("NcCounterBubble", { staticClass: "list-item-details__counter", attrs: { "active": isActive || _vm.active, "type": _vm.counterType } }, [_vm._v(" " + _vm._s(_vm.counterNumber) + " ")]) : _vm._e(), _vm.hasIndicator ? _c("span", { staticClass: "list-item-details__indicator" }, [_vm._t("indicator")], 2) : _vm._e()], 1) : _vm._e()])])], 2), _vm.$slots["extra-actions"] ? _c("div", { staticClass: "list-item-content__extra-actions" }, [_vm._t("extra-actions")], 2) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.forceDisplayActions || _vm.displayActionsOnHoverFocus, expression: "forceDisplayActions || displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { "focusout": _vm.handleBlur } }, [_c("NcActions", { ref: "actions", attrs: { "primary": isActive || _vm.active, "force-menu": _vm.forceMenu, "aria-label": _vm.actionsAriaLabel }, on: { "update:open": _vm.handleActionsUpdateOpen }, scopedSlots: _vm._u([_vm.$slots["actions-icon"] ? { key: "icon", fn: function() {
      return [_vm._t("actions-icon")];
    }, proxy: true } : null], null, true) }, [_vm._t("actions")], 2)], 1), _vm.$slots.extra ? _c("div", { staticClass: "list-item__extra" }, [_vm._t("extra")], 2) : _vm._e()])])];
  } }], null, true) });
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "ccc793f0"
);
const NcListItem = __component__.exports;
exports.NcListItem = NcListItem;