@nextcloud/vue/dist/chunks/referencePickerModal-2b16b319.mjs

Nextcloud vue components

import "../assets/referencePickerModal.css";
import { n as c } from "./_plugin-vue2_normalizer-5b4c43a4.mjs";
import { t as o } from "./l10n-9a5a6afc.mjs";
import m from "@nextcloud/axios";
import { loadState as b } from "@nextcloud/initial-state";
import { imagePath as L, generateOcsUrl as h } from "@nextcloud/router";
import v from "../Components/NcEmptyContent.mjs";
import { N as k } from "./index-cd3f1f8f.mjs";
import P from "../Components/NcSelect.mjs";
import f from "vue-material-design-icons/LinkVariant.vue";
import N from "../Components/NcLoadingIcon.mjs";
import E from "../Components/NcTextField.mjs";
import $ from "vue-material-design-icons/DotsHorizontal.vue";
import O from "../Components/NcButton.mjs";
import B from "../Components/NcModal.mjs";
import { emit as j } from "@nextcloud/event-bus";
import T from "vue-material-design-icons/ArrowLeft.vue";
import q from "vue-material-design-icons/Close.vue";
import M from "vue";
window._vue_richtext_widgets || (window._vue_richtext_widgets = {});
const V = (e) => !!window._vue_richtext_widgets[e], W = (e, t, r = (i) => {
}) => {
  if (window._vue_richtext_widgets[e]) {
    console.error("Widget for id " + e + " already registered");
    return;
  }
  window._vue_richtext_widgets[e] = { id: e, callback: t, onDestroy: r };
}, D = (e, { richObjectType: t, richObject: r, accessible: i }) => {
  if (t !== "open-graph") {
    if (!window._vue_richtext_widgets[t]) {
      console.error("Widget for rich object type " + t + " not registered");
      return;
    }
    window._vue_richtext_widgets[t].callback(e, { richObjectType: t, richObject: r, accessible: i });
  }
}, z = (e, t) => {
  e !== "open-graph" && window._vue_richtext_widgets[e] && window._vue_richtext_widgets[e].onDestroy(t);
};
window._registerWidget = W;
const A = { name: "NcReferenceWidget", props: { reference: { type: Object, required: !0 } }, data() {
  return { compact: 3 };
}, computed: { hasCustomWidget() {
  return V(this.reference.richObjectType);
}, noAccess() {
  return this.reference && !this.reference.accessible;
}, descriptionStyle() {
  if (this.compact === 0)
    return { display: "none" };
  const e = this.compact < 4 ? this.compact : 3;
  return { lineClamp: e, webkitLineClamp: e };
}, compactLink() {
  const e = this.reference.openGraphObject.link;
  return e ? e.startsWith("https://") ? e.substring(8) : e.startsWith("http://") ? e.substring(7) : e : "";
} }, mounted() {
  this.renderWidget(), this.observer = new ResizeObserver((e) => {
    e[0].contentRect.width < 450 ? this.compact = 0 : e[0].contentRect.width < 550 ? this.compact = 1 : e[0].contentRect.width < 650 ? this.compact = 2 : this.compact = 3;
  }), this.observer.observe(this.$el);
}, beforeDestroy() {
  this.observer.disconnect(), z(this.reference.richObjectType, this.$el);
}, methods: { renderWidget() {
  var e;
  this.$refs.customWidget && (this.$refs.customWidget.innerHTML = ""), ((e = this == null ? void 0 : this.reference) == null ? void 0 : e.richObjectType) !== "open-graph" && this.$nextTick(() => {
    D(this.$refs.customWidget, this.reference);
  });
} } };
var U = function() {
  var e = this, t = e._self._c;
  return t("div", [e.reference && e.hasCustomWidget ? t("div", { staticClass: "widget-custom" }, [t("div", { ref: "customWidget" })]) : !e.noAccess && e.reference && e.reference.openGraphObject && !e.hasCustomWidget ? t("a", { staticClass: "widget-default", attrs: { href: e.reference.openGraphObject.link, rel: "noopener noreferrer", target: "_blank" } }, [e.reference.openGraphObject.thumb ? t("img", { staticClass: "widget-default--image", attrs: { src: e.reference.openGraphObject.thumb } }) : e._e(), t("div", { staticClass: "widget-default--details" }, [t("p", { staticClass: "widget-default--name" }, [e._v(e._s(e.reference.openGraphObject.name))]), t("p", { staticClass: "widget-default--description", style: e.descriptionStyle }, [e._v(e._s(e.reference.openGraphObject.description))]), t("p", { staticClass: "widget-default--link" }, [e._v(e._s(e.compactLink))])])]) : e._e()]);
}, G = [], H = c(A, U, G, !1, null, "b1c5a80f", null, null);
const Q = H.exports;
window._vue_richtext_custom_picker_elements || (window._vue_richtext_custom_picker_elements = {});
class rt {
  constructor(t, r) {
    this.element = t, this.object = r;
  }
}
const d = (e) => !!window._vue_richtext_custom_picker_elements[e], F = (e) => {
  var r;
  const t = (r = window._vue_richtext_custom_picker_elements[e]) == null ? void 0 : r.size;
  return ["small", "normal", "large", "full"].includes(t) ? t : null;
}, J = (e, t, r = (s) => {
}, i = "large") => {
  if (window._vue_richtext_custom_picker_elements[e]) {
    console.error("Custom reference picker element for id " + e + " already registered");
    return;
  }
  window._vue_richtext_custom_picker_elements[e] = { id: e, callback: t, onDestroy: r, size: i };
}, K = (e, { providerId: t, accessible: r }) => {
  if (!window._vue_richtext_custom_picker_elements[t]) {
    console.error("Custom reference picker element for reference provider ID " + t + " not registered");
    return;
  }
  return window._vue_richtext_custom_picker_elements[t].callback(e, { providerId: t, accessible: r });
}, X = (e, t, r) => {
  window._vue_richtext_custom_picker_elements[e] && window._vue_richtext_custom_picker_elements[e].onDestroy(t, r);
};
window._registerCustomPickerElement = J;
const Y = { name: "NcCustomPickerElement", props: { provider: { type: Object, required: !0 } }, emits: ["cancel", "submit"], data() {
  return { isRegistered: d(this.provider.id), renderResult: null };
}, mounted() {
  this.isRegistered && this.renderElement();
}, beforeDestroy() {
  this.isRegistered && X(this.provider.id, this.$el, this.renderResult);
}, methods: { renderElement() {
  this.$refs.domElement && (this.$refs.domElement.innerHTML = "");
  const e = K(this.$refs.domElement, { providerId: this.provider.id, accessible: !1 });
  Promise.resolve(e).then((t) => {
    var r, i;
    this.renderResult = t, (r = this.renderResult.object) != null && r._isVue && ((i = this.renderResult.object) != null && i.$on) && (this.renderResult.object.$on("submit", this.onSubmit), this.renderResult.object.$on("cancel", this.onCancel)), this.renderResult.element.addEventListener("submit", (s) => {
      this.onSubmit(s.detail);
    }), this.renderResult.element.addEventListener("cancel", this.onCancel);
  });
}, onSubmit(e) {
  this.$emit("submit", e);
}, onCancel() {
  this.$emit("cancel");
} } };
var Z = function() {
  var e = this, t = e._self._c;
  return t("div", { ref: "domElement" });
}, ee = [], te = c(Y, Z, ee, !1, null, "cf695ff9", null, null);
const re = te.exports, C = "any-link", S = { id: C, title: o("Any link"), icon_url: L("core", "filetypes/link.svg") };
window._vue_richtext_reference_providers || (window._vue_richtext_reference_providers = b("core", "reference-provider-list", [])), window._vue_richtext_reference_provider_timestamps || (window._vue_richtext_reference_provider_timestamps = b("core", "reference-provider-timestamps", {}));
function ie(e) {
  return e === C ? S : x().find((t) => t.id === e);
}
function x() {
  return window._vue_richtext_reference_providers.filter((e) => {
    const t = !!e.search_providers_ids && e.search_providers_ids.length > 0 || d(e.id);
    return t || console.debug("[smart picker]", e.id, "reference provider is discoverable but does not have any related search provider or custom picker component registered"), t;
  });
}
function se(e) {
  const t = window._vue_richtext_reference_provider_timestamps;
  return e.sort((r, i) => r.order === i.order ? 0 : r.order > i.order ? 1 : -1).sort((r, i) => {
    const s = t[r.id], n = t[i.id];
    return s === n ? 0 : n === void 0 ? -1 : s === void 0 ? 1 : s > n ? -1 : 1;
  });
}
function ne(e, t = null) {
  const r = x(), i = e.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&"), s = new RegExp(i, "i"), n = se(r).filter((p) => p.title.match(s)), l = t ? n.slice(0, t) : n;
  return (e === "" || l.length === 0) && l.push(S), l;
}
function oe(e) {
  const t = Math.floor(Date.now() / 1e3), r = { timestamp: t }, i = h("references/provider/{providerId}", { providerId: e });
  m.put(i, r).then((s) => {
    window._vue_richtext_reference_provider_timestamps[e] = t;
  });
}
let g = 0;
function I(e, t) {
  return function() {
    const r = this, i = arguments;
    clearTimeout(g), g = setTimeout(function() {
      e.apply(r, i);
    }, t || 0);
  };
}
function _(e) {
  try {
    return !!new URL(e);
  } catch {
    return !1;
  }
}
const ce = { name: "NcProviderList", components: { NcSelect: P, NcHighlight: k, NcEmptyContent: v, LinkVariantIcon: f }, emits: ["select-provider", "submit"], data() {
  return { selectedProvider: null, query: "", multiselectPlaceholder: o("Select provider"), providerIconAlt: o("Provider icon") };
}, computed: { options() {
  const e = [];
  return this.query !== "" && _(this.query) && e.push({ id: this.query, title: this.query, isLink: !0 }), e.push(...ne(this.query)), e;
} }, methods: { focus() {
  setTimeout(() => {
    var e, t, r;
    (r = (t = (e = this.$refs["provider-select"]) == null ? void 0 : e.$el) == null ? void 0 : t.querySelector("#provider-select-input")) == null || r.focus();
  }, 300);
}, onProviderSelected(e) {
  e !== null && (e.isLink ? this.$emit("submit", e.title) : this.$emit("select-provider", e), this.selectedProvider = null);
}, onSearch(e, t) {
  this.query = e;
} } };
var le = function() {
  var e = this, t = e._self._c;
  return t("div", { staticClass: "provider-list" }, [t("NcSelect", { ref: "provider-select", staticClass: "provider-list--select", attrs: { "input-id": "provider-select-input", label: "title", placeholder: e.multiselectPlaceholder, options: e.options, "append-to-body": !1, "clear-search-on-select": !0, "clear-search-on-blur": () => !1, filterable: !1 }, on: { search: e.onSearch, input: e.onProviderSelected }, scopedSlots: e._u([{ key: "option", fn: function(r) {
    return [r.isLink ? t("div", { staticClass: "provider" }, [t("LinkVariantIcon", { staticClass: "link-icon", attrs: { size: 20 } }), t("span", [e._v(e._s(r.title))])], 1) : t("div", { staticClass: "provider" }, [t("img", { staticClass: "provider-icon", attrs: { src: r.icon_url, alt: e.providerIconAlt } }), t("NcHighlight", { staticClass: "option-text", attrs: { search: e.query, text: r.title } })], 1)];
  } }]), model: { value: e.selectedProvider, callback: function(r) {
    e.selectedProvider = r;
  }, expression: "selectedProvider" } }), t("NcEmptyContent", { staticClass: "provider-list--empty-content", scopedSlots: e._u([{ key: "icon", fn: function() {
    return [t("LinkVariantIcon")];
  }, proxy: !0 }]) })], 1);
}, ae = [], de = c(ce, le, ae, !1, null, "9d850ea5", null, null);
const ue = de.exports;
const he = { name: "NcRawLinkInput", components: { LinkVariantIcon: f, NcEmptyContent: v, NcLoadingIcon: N, NcReferenceWidget: Q, NcTextField: E }, props: { provider: { type: Object, required: !0 } }, emits: ["submit"], data() {
  return { inputValue: "", loading: !1, reference: null, abortController: null, inputPlaceholder: o("Enter link") };
}, computed: { isLinkValid() {
  return _(this.inputValue);
} }, methods: { focus() {
  var e;
  (e = this.$refs["url-input"].$el.getElementsByTagName("input")[0]) == null || e.focus();
}, onSubmit(e) {
  const t = e.target.value;
  this.isLinkValid && this.$emit("submit", t);
}, onClear() {
  this.inputValue = "", this.reference = null;
}, onInput() {
  this.reference = null, this.abortController && this.abortController.abort(), this.isLinkValid && I(() => {
    this.updateReference();
  }, 500)();
}, updateReference() {
  this.loading = !0, this.abortController = new AbortController(), m.get(h("references/resolve", 2) + "?reference=" + encodeURIComponent(this.inputValue), { signal: this.abortController.signal }).then((e) => {
    this.reference = e.data.ocs.data.references[this.inputValue];
  }).catch((e) => {
    console.error(e);
  }).then(() => {
    this.loading = !1;
  });
} } };
var pe = function() {
  var e = this, t = e._self._c;
  return t("div", { staticClass: "raw-link" }, [t("div", { staticClass: "input-wrapper" }, [t("NcTextField", { ref: "url-input", attrs: { value: e.inputValue, "show-trailing-button": e.inputValue !== "", label: e.inputPlaceholder }, on: { "update:value": [function(r) {
    e.inputValue = r;
  }, e.onInput], "trailing-button-click": e.onClear }, nativeOn: { keyup: function(r) {
    return !r.type.indexOf("key") && e._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : e.onSubmit.apply(null, arguments);
  } } }, [e.loading ? t("NcLoadingIcon", { attrs: { size: 16 } }) : t("LinkVariantIcon", { attrs: { size: 16 } })], 1)], 1), e.reference !== null ? t("NcReferenceWidget", { staticClass: "reference-widget", attrs: { reference: e.reference } }) : t("NcEmptyContent", { staticClass: "raw-link--empty-content", scopedSlots: e._u([{ key: "icon", fn: function() {
    return [e.provider.icon_url ? t("img", { staticClass: "provider-icon", attrs: { src: e.provider.icon_url } }) : t("LinkVariantIcon")];
  }, proxy: !0 }]) })], 1);
}, me = [], ve = c(he, pe, me, !1, null, "d0ba247a", null, null);
const fe = ve.exports;
const _e = { name: "NcSearchResult", components: { NcHighlight: k }, props: { entry: { type: Object, required: !0 }, query: { type: String, required: !0 } } };
var ye = function() {
  var e = this, t = e._self._c;
  return t("div", { staticClass: "result" }, [e.entry.icon ? t("div", { staticClass: "result--icon-class", class: { [e.entry.icon]: !0, rounded: e.entry.rounded } }) : t("img", { staticClass: "result--image", class: { rounded: e.entry.rounded }, attrs: { src: e.entry.thumbnailUrl } }), t("div", { staticClass: "result--content" }, [t("span", { staticClass: "result--content--name" }, [t("NcHighlight", { attrs: { search: e.query, text: e.entry.title } })], 1), t("span", { staticClass: "result--content--subline" }, [t("NcHighlight", { attrs: { search: e.query, text: e.entry.subline } })], 1)])]);
}, be = [], ge = c(_e, ye, be, !1, null, "7a394a58", null, null);
const we = ge.exports;
const w = 5, ke = { name: "NcSearch", components: { LinkVariantIcon: f, DotsHorizontalIcon: $, NcEmptyContent: v, NcSelect: P, NcSearchResult: we }, props: { provider: { type: Object, required: !0 }, showEmptyContent: { type: Boolean, default: !0 }, searchPlaceholder: { type: String, default: null } }, emits: ["submit"], data() {
  return { searchQuery: "", selectedResult: null, resultsBySearchProvider: {}, searching: !1, searchingMoreOf: null, abortController: null, noOptionsText: o("Start typing to search"), providerIconAlt: o("Provider icon") };
}, computed: { mySearchPlaceholder() {
  return this.searchPlaceholder || o("Search");
}, searchProviderIds() {
  return this.provider.search_providers_ids;
}, options() {
  if (this.searchQuery === "")
    return [];
  const e = [];
  return _(this.searchQuery) && e.push(this.rawLinkEntry), e.push(...this.formattedSearchResults), e;
}, rawLinkEntry() {
  return { id: "rawLinkEntry", resourceUrl: this.searchQuery, isRawLink: !0 };
}, formattedSearchResults() {
  const e = [];
  return this.searchProviderIds.forEach((t) => {
    if (this.resultsBySearchProvider[t].entries.length > 0) {
      (this.searchProviderIds.length > 1 || this.resultsBySearchProvider[t].entries.length > 1) && e.push({ id: "groupTitle-" + t, name: this.resultsBySearchProvider[t].name, isCustomGroupTitle: !0, providerId: t });
      const r = this.resultsBySearchProvider[t].entries.map((i, s) => ({ id: "provider-" + t + "-entry-" + s, ...i }));
      e.push(...r), this.resultsBySearchProvider[t].isPaginated && e.push({ id: "moreOf-" + t, name: this.resultsBySearchProvider[t].name, isMore: !0, providerId: t, isLoading: this.searchingMoreOf === t });
    }
  }), e;
} }, mounted() {
  this.resetResults();
}, beforeDestroy() {
  this.cancelSearchRequests();
}, methods: { t: o, resetResults() {
  const e = {};
  this.searchProviderIds.forEach((t) => {
    e[t] = { entries: [] };
  }), this.resultsBySearchProvider = e;
}, focus() {
  setTimeout(() => {
    var e, t, r;
    (r = (t = (e = this.$refs["search-select"]) == null ? void 0 : e.$el) == null ? void 0 : t.querySelector("#search-select-input")) == null || r.focus();
  }, 300);
}, cancelSearchRequests() {
  this.abortController && this.abortController.abort();
}, onSearchInput(e, t) {
  this.searchQuery = e, I(() => {
    this.updateSearch();
  }, 500)();
}, onSelectResultSelected(e) {
  e !== null && (e.resourceUrl ? (this.cancelSearchRequests(), this.$emit("submit", e.resourceUrl)) : e.isMore && this.searchMoreOf(e.providerId).then(() => {
    this.selectedResult = null;
  }));
}, searchMoreOf(e) {
  return this.searchingMoreOf = e, this.cancelSearchRequests(), this.searchProviders(e);
}, updateSearch() {
  if (this.cancelSearchRequests(), this.resetResults(), this.searchQuery === "") {
    this.searching = !1;
    return;
  }
  return this.searchProviders();
}, searchProviders(e = null) {
  var r, i;
  this.abortController = new AbortController(), this.searching = !0;
  const t = e === null ? [...this.searchProviderIds].map((s) => this.searchOneProvider(s)) : [this.searchOneProvider(e, (i = (r = this.resultsBySearchProvider[e]) == null ? void 0 : r.cursor) != null ? i : null)];
  return Promise.allSettled(t).then((s) => {
    s.find((n) => n.status === "rejected" && (n.reason.name === "CanceledError" || n.reason.code === "ERR_CANCELED")) || (this.searching = !1, this.searchingMoreOf = null);
  });
}, searchOneProvider(e, t = null) {
  const r = t === null ? h("search/providers/{providerId}/search?term={term}&limit={limit}", { providerId: e, term: this.searchQuery, limit: w }) : h("search/providers/{providerId}/search?term={term}&limit={limit}&cursor={cursor}", { providerId: e, term: this.searchQuery, limit: w, cursor: t });
  return m.get(r, { signal: this.abortController.signal }).then((i) => {
    const s = i.data.ocs.data;
    this.resultsBySearchProvider[e].name = s.name, this.resultsBySearchProvider[e].cursor = s.cursor, this.resultsBySearchProvider[e].isPaginated = s.isPaginated, this.resultsBySearchProvider[e].entries.push(...s.entries);
  });
} } };
var Pe = function() {
  var e = this, t = e._self._c;
  return t("div", { staticClass: "smart-picker-search", class: { "with-empty-content": e.showEmptyContent } }, [t("NcSelect", { ref: "search-select", staticClass: "smart-picker-search--select", attrs: { "input-id": "search-select-input", label: "name", placeholder: e.mySearchPlaceholder, options: e.options, "append-to-body": !1, "close-on-select": !1, "clear-search-on-select": !1, "clear-search-on-blur": () => !1, "reset-focus-on-options-change": !1, filterable: !1, autoscroll: !0, "reset-on-options-change": !1, loading: e.searching }, on: { search: e.onSearchInput, input: e.onSelectResultSelected }, scopedSlots: e._u([{ key: "option", fn: function(r) {
    return [r.isRawLink ? t("div", { staticClass: "custom-option" }, [t("LinkVariantIcon", { staticClass: "option-simple-icon", attrs: { size: 20 } }), t("span", { staticClass: "option-text" }, [e._v(" " + e._s(e.t("Raw link {options}", { options: r.resourceUrl })) + " ")])], 1) : r.resourceUrl ? t("NcSearchResult", { staticClass: "search-result", attrs: { entry: r, query: e.searchQuery } }) : r.isCustomGroupTitle ? t("span", { staticClass: "custom-option group-name" }, [e.provider.icon_url ? t("img", { staticClass: "provider-icon group-name-icon", attrs: { src: e.provider.icon_url } }) : e._e(), t("span", { staticClass: "option-text" }, [t("strong", [e._v(e._s(r.name))])])]) : r.isMore ? t("span", { class: { "custom-option": !0 } }, [r.isLoading ? t("span", { staticClass: "option-simple-icon icon-loading-small" }) : t("DotsHorizontalIcon", { staticClass: "option-simple-icon", attrs: { size: 20 } }), t("span", { staticClass: "option-text" }, [e._v(" " + e._s(e.t('Load more "{options}"', { options: r.name })) + " ")])], 1) : e._e()];
  } }, { key: "no-options", fn: function() {
    return [e._v(" " + e._s(e.noOptionsText) + " ")];
  }, proxy: !0 }]), model: { value: e.selectedResult, callback: function(r) {
    e.selectedResult = r;
  }, expression: "selectedResult" } }), e.showEmptyContent ? t("NcEmptyContent", { staticClass: "smart-picker-search--empty-content", scopedSlots: e._u([{ key: "icon", fn: function() {
    return [e.provider.icon_url ? t("img", { staticClass: "provider-icon", attrs: { alt: e.providerIconAlt, src: e.provider.icon_url } }) : t("LinkVariantIcon")];
  }, proxy: !0 }], null, !1, 2922132592) }) : e._e()], 1);
}, Ce = [], Se = c(ke, Pe, Ce, !1, null, "97d196f0", null, null);
const xe = Se.exports;
const a = { providerList: 1, standardLinkInput: 2, searchInput: 3, customElement: 4 }, Ie = { name: "NcReferencePicker", components: { NcCustomPickerElement: re, NcProviderList: ue, NcRawLinkInput: fe, NcSearch: xe }, props: { initialProvider: { type: Object, default: () => null }, width: { type: Number, default: null }, focusOnCreate: { type: Boolean, default: !0 } }, emits: ["cancel", "cancel-raw-link", "cancel-search", "provider-selected", "submit"], data() {
  return { MODES: a, selectedProvider: this.initialProvider };
}, computed: { mode() {
  return this.selectedProvider === null ? a.providerList : d(this.selectedProvider.id) ? a.customElement : this.selectedProvider.search_providers_ids ? a.searchInput : a.standardLinkInput;
}, pickerWrapperStyle() {
  return { width: this.width ? this.width + "px" : void 0 };
} }, mounted() {
  this.focusOnCreate && (this.initialProvider ? setTimeout(() => {
    var e;
    (e = this.$refs["url-input"]) == null || e.focus();
  }, 300) : this.$nextTick(() => {
    var e;
    (e = this.$refs["provider-list"]) == null || e.focus();
  }));
}, methods: { onEscapePressed() {
  this.selectedProvider !== null ? this.deselectProvider() : this.cancelProviderSelection();
}, onProviderSelected(e) {
  this.selectedProvider = e, this.$emit("provider-selected", e), this.$nextTick(() => {
    var t;
    (t = this.$refs["url-input"]) == null || t.focus();
  });
}, cancelCustomElement() {
  this.deselectProvider();
}, cancelSearch() {
  var e;
  this.$emit("cancel-search", (e = this.selectedProvider) == null ? void 0 : e.title), this.deselectProvider();
}, cancelRawLinkInput() {
  var e;
  this.$emit("cancel-raw-link", (e = this.selectedProvider) == null ? void 0 : e.title), this.deselectProvider();
}, cancelProviderSelection() {
  this.$emit("cancel");
}, submitLink(e) {
  this.selectedProvider !== null && oe(this.selectedProvider.id), this.$emit("submit", e), this.deselectProvider();
}, deselectProvider() {
  this.selectedProvider = null, this.$emit("provider-selected", null), setTimeout(() => {
    var e;
    (e = this.$refs["provider-list"]) == null || e.focus();
  }, 300);
} } };
var Re = function() {
  var e = this, t = e._self._c;
  return t("div", { staticClass: "reference-picker", style: e.pickerWrapperStyle, attrs: { tabindex: "-1" }, on: { keydown: function(r) {
    return !r.type.indexOf("key") && e._k(r.keyCode, "esc", 27, r.key, ["Esc", "Escape"]) ? null : (r.stopPropagation(), r.preventDefault(), e.onEscapePressed.apply(null, arguments));
  } } }, [e.mode === e.MODES.providerList ? t("NcProviderList", { ref: "provider-list", on: { "select-provider": e.onProviderSelected, submit: e.submitLink, cancel: e.cancelProviderSelection } }) : e.mode === e.MODES.standardLinkInput ? t("NcRawLinkInput", { ref: "url-input", attrs: { provider: e.selectedProvider }, on: { submit: e.submitLink, cancel: e.cancelRawLinkInput } }) : e.mode === e.MODES.searchInput ? t("NcSearch", { ref: "url-input", attrs: { provider: e.selectedProvider }, on: { cancel: e.cancelSearch, submit: e.submitLink } }) : e.mode === e.MODES.customElement ? t("div", { staticClass: "custom-element-wrapper" }, [t("NcCustomPickerElement", { attrs: { provider: e.selectedProvider }, on: { submit: e.submitLink, cancel: e.cancelCustomElement } })], 1) : e._e()], 1);
}, Le = [], Ne = c(Ie, Re, Le, !1, null, "aa77d0d3", null, null);
const Ee = Ne.exports;
const $e = { name: "NcReferencePickerModal", components: { NcReferencePicker: Ee, NcModal: B, NcButton: O, ArrowLeftIcon: T, CloseIcon: q }, props: { initialProvider: { type: Object, default: () => null }, focusOnCreate: { type: Boolean, default: !0 }, isInsideViewer: { type: Boolean, default: !1 } }, emits: ["cancel", "submit"], data() {
  return { show: !0, selectedProvider: this.initialProvider, backButtonTitle: o("Back to provider selection"), closeButtonTitle: o("Close"), closeButtonLabel: o("Close Smart Picker") };
}, computed: { isProviderSelected() {
  return this.selectedProvider !== null;
}, showBackButton() {
  return this.initialProvider === null && this.isProviderSelected;
}, modalSize() {
  var e;
  return this.isProviderSelected && d(this.selectedProvider.id) ? (e = F(this.selectedProvider.id)) != null ? e : "large" : "normal";
}, showModalName() {
  return !this.isProviderSelected || !d(this.selectedProvider.id);
}, modalName() {
  return this.isProviderSelected ? this.selectedProvider.title : o("Smart Picker");
} }, mounted() {
  if (this.isInsideViewer) {
    const e = this.$refs.modal_content;
    j("viewer:trapElements:changed", e);
  }
}, methods: { onCancel() {
  this.show = !1, this.$emit("cancel");
}, onSubmit(e) {
  this.show = !1, this.$emit("submit", e);
}, onProviderSelect(e) {
  this.selectedProvider = e, e === null && this.initialProvider !== null && this.onCancel();
}, onBackClicked() {
  this.$refs.referencePicker.deselectProvider();
} } };
var Oe = function() {
  var e = this, t = e._self._c;
  return e.show ? t("NcModal", { staticClass: "reference-picker-modal", attrs: { size: e.modalSize, "can-close": !1 }, on: { close: e.onCancel } }, [t("div", { ref: "modal_content", staticClass: "reference-picker-modal--content" }, [e.showBackButton ? t("NcButton", { staticClass: "back-button", attrs: { "aria-label": e.backButtonTitle, title: e.backButtonTitle }, on: { click: e.onBackClicked }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [t("ArrowLeftIcon")];
  }, proxy: !0 }], null, !1, 3001860362) }) : e._e(), t("NcButton", { staticClass: "close-button", attrs: { "aria-label": e.closeButtonLabel, title: e.closeButtonTitle, type: "tertiary" }, on: { click: e.onCancel }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [t("CloseIcon")];
  }, proxy: !0 }], null, !1, 2491825086) }), e.showModalName ? t("h2", [e._v(" " + e._s(e.modalName) + " ")]) : e._e(), t("NcReferencePicker", { ref: "referencePicker", attrs: { "initial-provider": e.initialProvider, "focus-on-create": e.focusOnCreate }, on: { "provider-selected": e.onProviderSelect, submit: e.onSubmit, cancel: e.onCancel } })], 1)]) : e._e();
}, Be = [], je = c($e, Oe, Be, !1, null, "3f1a4ac7", null, null);
const Te = je.exports;
async function it(e = null, t = void 0) {
  return await new Promise((r, i) => {
    var y;
    const s = "referencePickerModal", n = document.createElement("div");
    n.id = s, document.body.append(n);
    const l = e === null ? null : (y = ie(e)) != null ? y : null, p = M.extend(Te), u = new p({ propsData: { initialProvider: l, isInsideViewer: t } }).$mount(n);
    u.$on("cancel", () => {
      u.$destroy(), i(new Error("User cancellation"));
    }), u.$on("submit", (R) => {
      u.$destroy(), r(R);
    });
  });
}
export {
  Q as N,
  Ee as a,
  Te as b,
  xe as c,
  D as d,
  rt as e,
  J as f,
  K as g,
  d as h,
  V as i,
  it as j,
  C as k,
  ie as l,
  x as m,
  ne as n,
  W as r,
  se as s
};