import '../assets/NcActionTextEditable-1TXeJ5zp.css';
import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
import { A as ActionTextMixin } from "./actionText-fFcUPi2g.mjs";
import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
import { A as ArrowLeft } from "./ArrowLeft-DuT2LZOm.mjs";
import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
import { isRTL } from "@nextcloud/l10n";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
  name: "NcActionTextEditable",
  components: {
    ArrowLeft,
    ArrowRight
  },
  mixins: [ActionTextMixin],
  model: {
    prop: "modelValue",
    event: "update:modelValue"
  },
  props: {
    /**
     * id attribute of the checkbox element
     */
    id: {
      type: String,
      default: () => "action-" + GenRandomId(),
      validator: (id) => id.trim() !== ""
    },
    /**
     * disabled state of the text area
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * Removed in v9 - use `modelValue` (`v-model`) instead
     * @deprecated
     */
    value: {
      type: String,
      default: void 0
    },
    /**
     * value attribute of the input field
     */
    modelValue: {
      type: String,
      default: ""
    }
  },
  emits: [
    "input",
    /**
     * Removed in v9 - use `update:modelValue` (`v-model`) instead
     * @deprecated
     */
    "update:value",
    /**
     * Emitted when the inputs value changes
     *
     * @type {string|Date}
     */
    "update:modelValue",
    /** Same as `update:modelValue` but with a different event name */
    "update:model-value",
    "submit"
  ],
  setup() {
    const model = useModelMigration("value", "update:value");
    return {
      model,
      isRTL: isRTL()
    };
  },
  computed: {
    /**
     * determines if the action is focusable
     *
     * @return {boolean} is the action focusable ?
     */
    isFocusable() {
      return !this.disabled;
    },
    computedId() {
      return GenRandomId();
    }
  },
  methods: {
    onInput(event) {
      this.$emit("input", event);
      this.model = event.target.value;
    },
    onSubmit(event) {
      event.preventDefault();
      event.stopPropagation();
      if (!this.disabled) {
        this.$emit("submit", event);
      } else {
        return false;
      }
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled } }, [_c("span", { staticClass: "action-text-editable", on: { "click": _vm.onClick } }, [_vm._t("icon", function() {
    return [_c("span", { staticClass: "action-text-editable__icon", class: [_vm.isIconUrl ? "action-text-editable__icon--url" : _vm.icon], style: { backgroundImage: _vm.isIconUrl ? `url(${_vm.icon})` : null } })];
  }), _c("form", { ref: "form", staticClass: "action-text-editable__form", attrs: { "disabled": _vm.disabled }, on: { "submit": function($event) {
    $event.preventDefault();
    return _vm.onSubmit.apply(null, arguments);
  } } }, [_c("input", { staticClass: "action-text-editable__submit", attrs: { "id": _vm.id, "type": "submit" } }), _vm.name ? _c("label", { staticClass: "action-text-editable__name", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _c("textarea", _vm._b({ class: ["action-text-editable__textarea", { focusable: _vm.isFocusable }], attrs: { "id": _vm.computedId, "disabled": _vm.disabled }, domProps: { "value": _vm.model }, on: { "input": _vm.onInput } }, "textarea", _vm.$attrs, false)), _c("label", { directives: [{ name: "show", rawName: "v-show", value: !_vm.disabled, expression: "!disabled" }], staticClass: "action-text-editable__label", attrs: { "for": _vm.id } }, [_vm.isRTL ? _c("ArrowLeft", { attrs: { "size": 20 } }) : _c("ArrowRight", { attrs: { "size": 20 } })], 1)])], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "35e22bd7"
);
const NcActionTextEditable = __component__.exports;
export {
  NcActionTextEditable as N
};