@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/chunks/referencePickerModal-0fde503d.mjs

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