import '../assets/NcAppNavigationNewItem-fUP3wQTQ.css';
import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-C7a7Nha7.mjs";
import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
  name: "NcAppNavigationNewItem",
  components: {
    NcInputConfirmCancel,
    NcLoadingIcon
  },
  props: {
    /**
     * The name of the element.
     */
    name: {
      type: String,
      required: true
    },
    /**
     * Refers to the icon on the left, this prop accepts a class
     * like 'icon-category-enabled'.
     */
    icon: {
      type: String,
      default: ""
    },
    /**
     * Displays a loading animated icon on the left of the element
     * instead of the icon.
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * Only for 'editable' items, sets label for the edit action button.
     */
    editLabel: {
      type: String,
      default: ""
    },
    /**
     * Sets the placeholder text for the editing form.
     */
    editPlaceholder: {
      type: String,
      default: ""
    }
  },
  emits: ["new-item"],
  data() {
    return {
      newItemValue: "",
      newItemActive: false
    };
  },
  methods: {
    handleNewItem() {
      if (!this.loading) {
        this.newItemActive = true;
        this.$nextTick(() => {
          this.$refs.newItemInput.focusInput();
        });
      }
    },
    cancelNewItem() {
      this.newItemActive = false;
    },
    handleNewItemDone() {
      this.$emit("new-item", this.newItemValue);
      this.newItemValue = "";
      this.newItemActive = false;
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("li", { staticClass: "app-navigation-entry", class: {
    "app-navigation-entry--newItemActive": _vm.newItemActive
  } }, [_c("button", { staticClass: "app-navigation-entry-button", on: { "click": _vm.handleNewItem } }, [_c("span", { staticClass: "app-navigation-entry-icon", class: { [_vm.icon]: !_vm.loading } }, [_vm.loading ? _c("NcLoadingIcon") : _vm._t("icon")], 2), !_vm.newItemActive ? _c("span", { staticClass: "app-navigation-new-item__name", attrs: { "title": _vm.name } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.newItemActive ? _c("span", { staticClass: "newItemContainer" }, [_c("NcInputConfirmCancel", { ref: "newItemInput", attrs: { "placeholder": _vm.editPlaceholder !== "" ? _vm.editPlaceholder : _vm.name }, on: { "cancel": _vm.cancelNewItem, "confirm": _vm.handleNewItemDone }, model: { value: _vm.newItemValue, callback: function($$v) {
    _vm.newItemValue = $$v;
  }, expression: "newItemValue" } })], 1) : _vm._e()])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "46fee9ac"
);
const NcAppNavigationNewItem = __component__.exports;
export {
  NcAppNavigationNewItem as N
};