@nextcloud/vue 8.12.0 → 8.13.0

package/dist/chunks/referencePickerModal-CGhrhjCk.mjs

@@ -0,0 +1,1114 @@
+import '../assets/referencePickerModal-C_c_8fEM.css';
+import { e as hasFullWidth, i as isWidgetRegistered, h as hasInteractiveView, a as renderWidget, f as destroyWidget, d as isCustomPickerElementRegistered, g as destroyCustomPickerElement, c as renderCustomPickerElement, j as getCustomPickerElementSize } from "./index-BwyQ2N-M.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
+import { r as register, P as t20, a as t, Q as t7, R as t38, S as t34, T as t21, x as t36, U as t27, q as t16, V as t11 } from "./_l10n-B6zipH_A.mjs";
+import axios from "@nextcloud/axios";
+import { loadState } from "@nextcloud/initial-state";
+import { imagePath, generateOcsUrl } from "@nextcloud/router";
+import NcEmptyContent from "../Components/NcEmptyContent.mjs";
+import { N as NcHighlight } from "./index-CsogA-K5.mjs";
+import { N as NcSelect } from "./NcSelect-BVltxWdw.mjs";
+import { useElementSize, useIntersectionObserver } from "@vueuse/core";
+import Vue, { ref, nextTick } from "vue";
+import { RouterLink } from "vue-router";
+import { g as getRoute } from "./autolink-cbuFALXr.mjs";
+import NcButton from "../Components/NcButton.mjs";
+import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
+import { N as NcTextField } from "./NcTextField-C8iERu7z.mjs";
+import { D as DotsHorizontal } from "./DotsHorizontal-C0STD_HU.mjs";
+import NcModal from "../Components/NcModal.mjs";
+import { emit } from "@nextcloud/event-bus";
+import { A as ArrowLeft } from "./ArrowLeft-B9iGweTd.mjs";
+import { C as Close } from "./Close-1V1F2F-M.mjs";
+register(t20);
+const IDLE_TIMEOUT = 3 * 60 * 1e3;
+const _sfc_main$8 = {
+  name: "NcReferenceWidget",
+  components: {
+    NcButton
+  },
+  props: {
+    reference: {
+      type: Object,
+      required: true
+    },
+    interactive: {
+      type: Boolean,
+      default: true
+    },
+    interactiveOptIn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup() {
+    const isVisible = ref(false);
+    const widgetRoot = ref();
+    const { width } = useElementSize(widgetRoot);
+    useIntersectionObserver(widgetRoot, () => {
+      nextTick(() => {
+        var _a, _b;
+        isVisible.value = (_b = (_a = widgetRoot.value) == null ? void 0 : _a.isIntersecting) != null ? _b : false;
+      });
+    });
+    return {
+      width,
+      isVisible,
+      widgetRoot
+    };
+  },
+  data() {
+    return {
+      showInteractive: false,
+      rendered: false,
+      idleTimeout: null
+    };
+  },
+  computed: {
+    isInteractive() {
+      return !this.interactiveOptIn && this.interactive || this.showInteractive;
+    },
+    hasFullWidth() {
+      return hasFullWidth(this.reference.richObjectType);
+    },
+    hasCustomWidget() {
+      return isWidgetRegistered(this.reference.richObjectType);
+    },
+    hasInteractiveView() {
+      return isWidgetRegistered(this.reference.richObjectType) && hasInteractiveView(this.reference.richObjectType);
+    },
+    noAccess() {
+      return this.reference && !this.reference.accessible;
+    },
+    descriptionStyle() {
+      if (this.numberOfLines === 0) {
+        return {
+          display: "none"
+        };
+      }
+      const lineClamp = this.numberOfLines;
+      return {
+        lineClamp,
+        webkitLineClamp: lineClamp
+      };
+    },
+    numberOfLines() {
+      const lineCountOffsets = [450, 550, 650, Infinity];
+      return lineCountOffsets.findIndex((max) => this.width < max);
+    },
+    compactLink() {
+      const link = this.reference.openGraphObject.link;
+      if (!link) {
+        return "";
+      }
+      if (link.startsWith("https://")) {
+        return link.substring(8);
+      }
+      if (link.startsWith("http://")) {
+        return link.substring(7);
+      }
+      return link;
+    },
+    route() {
+      return getRoute(this.$router, this.reference.openGraphObject.link);
+    },
+    referenceWidgetLinkComponent() {
+      return this.route ? RouterLink : "a";
+    },
+    referenceWidgetLinkProps() {
+      return this.route ? { to: this.route } : { href: this.reference.openGraphObject.link, target: "_blank" };
+    }
+  },
+  watch: {
+    isVisible: {
+      handler(val) {
+        if (!val) {
+          this.idleTimeout = setTimeout(() => {
+            if (!this.isVisible) {
+              this.destroyWidget();
+            }
+          }, IDLE_TIMEOUT);
+          return;
+        }
+        if (this.idleTimeout) {
+          clearTimeout(this.idleTimeout);
+          this.idleTimeout = null;
+        }
+        if (!this.rendered) {
+          this.renderWidget();
+        }
+      },
+      immediate: true
+    }
+  },
+  beforeDestroy() {
+    this.destroyWidget();
+  },
+  methods: {
+    t,
+    enableInteractive() {
+      this.showInteractive = true;
+      this.renderWidget();
+    },
+    renderWidget() {
+      var _a;
+      if (!this.$refs.customWidget) {
+        return;
+      }
+      if (((_a = this == null ? void 0 : this.reference) == null ? void 0 : _a.richObjectType) === "open-graph") {
+        return;
+      }
+      this.$refs.customWidget.innerHTML = "";
+      const widget = document.createElement("div");
+      this.$refs.customWidget.appendChild(widget);
+      this.$nextTick(() => {
+        renderWidget(widget, {
+          ...this.reference,
+          interactive: this.isInteractive
+        });
+        this.rendered = true;
+      });
+    },
+    destroyWidget() {
+      if (this.rendered) {
+        destroyWidget(this.reference.richObjectType, this.$el);
+        this.rendered = false;
+      }
+    }
+  }
+};
+var _sfc_render$8 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { ref: "widgetRoot", class: { "toggle-interactive": _vm.hasInteractiveView && !_vm.isInteractive } }, [_vm.reference && _vm.hasCustomWidget ? _c("div", { ref: "customWidget", staticClass: "widget-custom", class: { "full-width": _vm.hasFullWidth } }) : !_vm.noAccess && _vm.reference && _vm.reference.openGraphObject && !_vm.hasCustomWidget ? _c(_vm.referenceWidgetLinkComponent, _vm._b({ tag: "component", staticClass: "widget-default", attrs: { "rel": "noopener noreferrer" } }, "component", _vm.referenceWidgetLinkProps, false), [_vm.reference.openGraphObject.thumb ? _c("img", { staticClass: "widget-default--image", attrs: { "src": _vm.reference.openGraphObject.thumb } }) : _vm._e(), _c("div", { staticClass: "widget-default--details" }, [_c("p", { staticClass: "widget-default--name" }, [_vm._v(" " + _vm._s(_vm.reference.openGraphObject.name) + " ")]), _c("p", { staticClass: "widget-default--description", style: _vm.descriptionStyle }, [_vm._v(" " + _vm._s(_vm.reference.openGraphObject.description) + " ")]), _c("p", { staticClass: "widget-default--link" }, [_vm._v(" " + _vm._s(_vm.compactLink) + " ")])])]) : _vm._e(), _vm.interactiveOptIn && _vm.hasInteractiveView && !_vm.isInteractive ? _c("NcButton", { staticClass: "toggle-interactive--button", on: { "click": _vm.enableInteractive } }, [_vm._v(" " + _vm._s(_vm.t("Enable interactive view")) + " ")]) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns$8 = [];
+var __component__$8 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$8,
+  _sfc_render$8,
+  _sfc_staticRenderFns$8,
+  false,
+  null,
+  "d0c31aa3",
+  null,
+  null
+);
+const NcReferenceWidget = __component__$8.exports;
+const _sfc_main$7 = {
+  name: "NcCustomPickerElement",
+  props: {
+    /**
+     * The reference provider
+     */
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: [
+    "cancel",
+    "submit"
+  ],
+  data() {
+    return {
+      isRegistered: isCustomPickerElementRegistered(this.provider.id),
+      renderResult: null
+    };
+  },
+  mounted() {
+    if (this.isRegistered) {
+      this.renderElement();
+    }
+  },
+  beforeDestroy() {
+    if (this.isRegistered) {
+      destroyCustomPickerElement(this.provider.id, this.$el, this.renderResult);
+    }
+  },
+  methods: {
+    renderElement() {
+      if (this.$refs.domElement) {
+        this.$refs.domElement.innerHTML = "";
+      }
+      const renderFunctionResult = renderCustomPickerElement(this.$refs.domElement, { providerId: this.provider.id, accessible: false });
+      Promise.resolve(renderFunctionResult).then((result) => {
+        var _a, _b;
+        this.renderResult = result;
+        if (((_a = this.renderResult.object) == null ? void 0 : _a._isVue) && ((_b = this.renderResult.object) == null ? void 0 : _b.$on)) {
+          this.renderResult.object.$on("submit", this.onSubmit);
+          this.renderResult.object.$on("cancel", this.onCancel);
+        }
+        this.renderResult.element.addEventListener("submit", (e) => {
+          this.onSubmit(e.detail);
+        });
+        this.renderResult.element.addEventListener("cancel", this.onCancel);
+      });
+    },
+    onSubmit(value) {
+      this.$emit("submit", value);
+    },
+    onCancel() {
+      this.$emit("cancel");
+    }
+  }
+};
+var _sfc_render$7 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { ref: "domElement" });
+};
+var _sfc_staticRenderFns$7 = [];
+var __component__$7 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$7,
+  _sfc_render$7,
+  _sfc_staticRenderFns$7,
+  false,
+  null,
+  "de9850e4",
+  null,
+  null
+);
+const NcCustomPickerElement = __component__$7.exports;
+register(t7);
+const anyLinkProviderId = "any-link";
+const anyLinkProvider = {
+  id: anyLinkProviderId,
+  title: t("Any link"),
+  icon_url: imagePath("core", "filetypes/link.svg")
+};
+if (!window._vue_richtext_reference_providers) {
+  window._vue_richtext_reference_providers = loadState("core", "reference-provider-list", []);
+}
+if (!window._vue_richtext_reference_provider_timestamps) {
+  window._vue_richtext_reference_provider_timestamps = loadState("core", "reference-provider-timestamps", {});
+}
+function getProvider(providerId) {
+  if (providerId === anyLinkProviderId) {
+    return anyLinkProvider;
+  }
+  return getProviders().find((p) => p.id === providerId);
+}
+function getProviders() {
+  return window._vue_richtext_reference_providers.filter((p) => {
+    const keep = !!p.search_providers_ids && p.search_providers_ids.length > 0 || isCustomPickerElementRegistered(p.id);
+    if (!keep) {
+      console.debug("[smart picker]", p.id, "reference provider is discoverable but does not have any related search provider or custom picker component registered");
+    }
+    return keep;
+  });
+}
+function sortProviders(providerList) {
+  const timestamps = window._vue_richtext_reference_provider_timestamps;
+  return providerList.sort((a, b) => {
+    return a.order === b.order ? 0 : a.order > b.order ? 1 : -1;
+  }).sort((a, b) => {
+    const ta = timestamps[a.id];
+    const tb = timestamps[b.id];
+    return ta === tb ? 0 : tb === void 0 ? -1 : ta === void 0 ? 1 : ta > tb ? -1 : 1;
+  });
+}
+function searchProvider(query, limit = null) {
+  const providers = getProviders();
+  const escapedQuery = query.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
+  const regexp = new RegExp(escapedQuery, "i");
+  const sortedProviders = sortProviders(providers);
+  const filteredSortedProviders = sortedProviders.filter((p) => {
+    return p.title.match(regexp);
+  });
+  const searchResult = limit ? filteredSortedProviders.slice(0, limit) : filteredSortedProviders;
+  if (query === "" || searchResult.length === 0) {
+    searchResult.push(anyLinkProvider);
+  }
+  return searchResult;
+}
+function touchProvider(providerId) {
+  const timestamp = Math.floor(Date.now() / 1e3);
+  const params = {
+    timestamp
+  };
+  const url = generateOcsUrl("references/provider/{providerId}", { providerId });
+  axios.put(url, params).then((response) => {
+    window._vue_richtext_reference_provider_timestamps[providerId] = timestamp;
+  });
+}
+let mytimer = 0;
+function delay(callback, ms) {
+  return function() {
+    const context = this;
+    const args = arguments;
+    clearTimeout(mytimer);
+    mytimer = setTimeout(function() {
+      callback.apply(context, args);
+    }, ms || 0);
+  };
+}
+function isUrl(str) {
+  try {
+    return Boolean(new URL(str));
+  } catch (error) {
+    return false;
+  }
+}
+register(t34, t38);
+const _sfc_main$6 = {
+  name: "LinkVariantIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$6 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon link-variant-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$6 = [];
+var __component__$6 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$6,
+  _sfc_render$6,
+  _sfc_staticRenderFns$6,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const LinkVariantIcon = __component__$6.exports;
+const _sfc_main$5 = {
+  name: "NcProviderList",
+  components: {
+    NcSelect,
+    NcHighlight,
+    NcEmptyContent,
+    LinkVariantIcon
+  },
+  emits: [
+    "select-provider",
+    "submit"
+  ],
+  data() {
+    return {
+      selectedProvider: null,
+      query: "",
+      multiselectPlaceholder: t("Select provider"),
+      providerIconAlt: t("Provider icon")
+    };
+  },
+  computed: {
+    options() {
+      const result = [];
+      if (this.query !== "" && isUrl(this.query)) {
+        result.push({
+          id: this.query,
+          title: this.query,
+          isLink: true
+        });
+      }
+      result.push(...searchProvider(this.query));
+      return result;
+    }
+  },
+  methods: {
+    focus() {
+      setTimeout(() => {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.$refs["provider-select"]) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector("#provider-select-input")) == null ? void 0 : _c.focus();
+      }, 300);
+    },
+    onProviderSelected(p) {
+      if (p !== null) {
+        if (p.isLink) {
+          this.$emit("submit", p.title);
+        } else {
+          this.$emit("select-provider", p);
+        }
+        this.selectedProvider = null;
+      }
+    },
+    onSearch(query, loading) {
+      this.query = query;
+    }
+  }
+};
+var _sfc_render$5 = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "provider-list" }, [_c("NcSelect", { ref: "provider-select", staticClass: "provider-list--select", attrs: { "input-id": "provider-select-input", "label": "title", "placeholder": _vm.multiselectPlaceholder, "options": _vm.options, "append-to-body": false, "clear-search-on-select": true, "clear-search-on-blur": () => false, "filterable": false }, on: { "search": _vm.onSearch, "input": _vm.onProviderSelected }, scopedSlots: _vm._u([{ key: "option", fn: function(option) {
+    return [option.isLink ? _c("div", { staticClass: "provider" }, [_c("LinkVariantIcon", { staticClass: "link-icon", attrs: { "size": 20 } }), _c("span", [_vm._v(_vm._s(option.title))])], 1) : _c("div", { staticClass: "provider" }, [_c("img", { staticClass: "provider-icon", attrs: { "src": option.icon_url, "alt": _vm.providerIconAlt } }), _c("NcHighlight", { staticClass: "option-text", attrs: { "search": _vm.query, "text": option.title } })], 1)];
+  } }]), model: { value: _vm.selectedProvider, callback: function($$v) {
+    _vm.selectedProvider = $$v;
+  }, expression: "selectedProvider" } }), _c("NcEmptyContent", { staticClass: "provider-list--empty-content", scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("LinkVariantIcon")];
+  }, proxy: true }]) })], 1);
+};
+var _sfc_staticRenderFns$5 = [];
+var __component__$5 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
+  false,
+  null,
+  "e54e09d6",
+  null,
+  null
+);
+const NcProviderList = __component__$5.exports;
+register(t21);
+const _sfc_main$4 = {
+  name: "NcRawLinkInput",
+  components: {
+    LinkVariantIcon,
+    NcEmptyContent,
+    NcLoadingIcon,
+    NcReferenceWidget,
+    NcTextField
+  },
+  props: {
+    /**
+     * The reference provider
+     */
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: [
+    "submit"
+  ],
+  data() {
+    return {
+      inputValue: "",
+      loading: false,
+      reference: null,
+      abortController: null,
+      inputPlaceholder: t("Enter link")
+    };
+  },
+  computed: {
+    isLinkValid() {
+      return isUrl(this.inputValue);
+    }
+  },
+  methods: {
+    focus() {
+      var _a;
+      (_a = this.$refs["url-input"].$el.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
+    },
+    onSubmit(e) {
+      const value = e.target.value;
+      if (this.isLinkValid) {
+        this.$emit("submit", value);
+      }
+    },
+    onClear() {
+      this.inputValue = "";
+      this.reference = null;
+    },
+    onInput() {
+      this.reference = null;
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+      if (this.isLinkValid) {
+        delay(() => {
+          this.updateReference();
+        }, 500)();
+      }
+    },
+    updateReference() {
+      this.loading = true;
+      this.abortController = new AbortController();
+      axios.get(generateOcsUrl("references/resolve", 2) + "?reference=" + encodeURIComponent(this.inputValue), {
+        signal: this.abortController.signal
+      }).then((response) => {
+        this.reference = response.data.ocs.data.references[this.inputValue];
+      }).catch((error) => {
+        console.error(error);
+      }).then(() => {
+        this.loading = false;
+      });
+    }
+  }
+};
+var _sfc_render$4 = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "raw-link" }, [_c("div", { staticClass: "input-wrapper" }, [_c("NcTextField", { ref: "url-input", attrs: { "value": _vm.inputValue, "show-trailing-button": _vm.inputValue !== "", "label": _vm.inputPlaceholder }, on: { "update:value": [function($event) {
+    _vm.inputValue = $event;
+  }, _vm.onInput], "trailing-button-click": _vm.onClear }, nativeOn: { "keyup": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+    return _vm.onSubmit.apply(null, arguments);
+  } } }, [_vm.loading ? _c("NcLoadingIcon", { attrs: { "size": 16 } }) : _c("LinkVariantIcon", { attrs: { "size": 16 } })], 1)], 1), _vm.reference !== null ? _c("NcReferenceWidget", { staticClass: "reference-widget", attrs: { "reference": _vm.reference } }) : _c("NcEmptyContent", { staticClass: "raw-link--empty-content", scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm.provider.icon_url ? _c("img", { staticClass: "provider-icon", attrs: { "src": _vm.provider.icon_url } }) : _c("LinkVariantIcon")];
+  }, proxy: true }]) })], 1);
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  "3c1803b5",
+  null,
+  null
+);
+const NcRawLinkInput = __component__$4.exports;
+const _sfc_main$3 = {
+  name: "NcSearchResult",
+  components: {
+    NcHighlight
+  },
+  props: {
+    /**
+     * Unified search result entry
+     */
+    entry: {
+      type: Object,
+      required: true
+    },
+    /**
+     * The query that led to getting this result
+     * Used to highlight the entry text
+     */
+    query: {
+      type: String,
+      required: true
+    }
+  }
+};
+var _sfc_render$3 = function render6() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "result" }, [_vm.entry.icon ? _c("div", { staticClass: "result--icon-class", class: { [_vm.entry.icon]: true, rounded: _vm.entry.rounded } }) : _c("img", { staticClass: "result--image", class: { rounded: _vm.entry.rounded }, attrs: { "src": _vm.entry.thumbnailUrl } }), _c("div", { staticClass: "result--content" }, [_c("span", { staticClass: "result--content--name" }, [_c("NcHighlight", { attrs: { "search": _vm.query, "text": _vm.entry.title } })], 1), _c("span", { staticClass: "result--content--subline" }, [_c("NcHighlight", { attrs: { "search": _vm.query, "text": _vm.entry.subline } })], 1)])]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  "2ae26ab4",
+  null,
+  null
+);
+const NcSearchResult = __component__$3.exports;
+register(t27, t34, t36);
+const LIMIT = 5;
+const _sfc_main$2 = {
+  name: "NcSearch",
+  components: {
+    LinkVariantIcon,
+    DotsHorizontalIcon: DotsHorizontal,
+    NcEmptyContent,
+    NcSelect,
+    NcSearchResult
+  },
+  props: {
+    /**
+     * The selected reference provider
+     */
+    provider: {
+      type: Object,
+      required: true
+    },
+    showEmptyContent: {
+      type: Boolean,
+      default: true
+    },
+    searchPlaceholder: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "submit"
+  ],
+  data() {
+    return {
+      searchQuery: "",
+      selectedResult: null,
+      resultsBySearchProvider: {},
+      searching: false,
+      searchingMoreOf: null,
+      abortController: null,
+      noOptionsText: t("Start typing to search"),
+      providerIconAlt: t("Provider icon")
+    };
+  },
+  computed: {
+    mySearchPlaceholder() {
+      return this.searchPlaceholder || t("Search");
+    },
+    searchProviderIds() {
+      return this.provider.search_providers_ids;
+    },
+    options() {
+      if (this.searchQuery === "") {
+        return [];
+      }
+      const options = [];
+      if (isUrl(this.searchQuery)) {
+        options.push(this.rawLinkEntry);
+      }
+      options.push(...this.formattedSearchResults);
+      return options;
+    },
+    rawLinkEntry() {
+      return {
+        id: "rawLinkEntry",
+        resourceUrl: this.searchQuery,
+        isRawLink: true
+      };
+    },
+    formattedSearchResults() {
+      const results = [];
+      this.searchProviderIds.forEach((pid) => {
+        if (this.resultsBySearchProvider[pid].entries.length > 0) {
+          if (this.searchProviderIds.length > 1 || this.resultsBySearchProvider[pid].entries.length > 1) {
+            results.push({
+              id: "groupTitle-" + pid,
+              name: this.resultsBySearchProvider[pid].name,
+              isCustomGroupTitle: true,
+              providerId: pid
+            });
+          }
+          const providerEntriesWithId = this.resultsBySearchProvider[pid].entries.map((entry, index) => {
+            return {
+              id: "provider-" + pid + "-entry-" + index,
+              ...entry
+            };
+          });
+          results.push(...providerEntriesWithId);
+          if (this.resultsBySearchProvider[pid].isPaginated) {
+            results.push({
+              id: "moreOf-" + pid,
+              name: this.resultsBySearchProvider[pid].name,
+              isMore: true,
+              providerId: pid,
+              isLoading: this.searchingMoreOf === pid
+            });
+          }
+        }
+      });
+      return results;
+    }
+  },
+  mounted() {
+    this.resetResults();
+  },
+  beforeDestroy() {
+    this.cancelSearchRequests();
+  },
+  methods: {
+    t,
+    resetResults() {
+      const resultsBySearchProvider = {};
+      this.searchProviderIds.forEach((pid) => {
+        resultsBySearchProvider[pid] = {
+          entries: []
+        };
+      });
+      this.resultsBySearchProvider = resultsBySearchProvider;
+    },
+    focus() {
+      setTimeout(() => {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.$refs["search-select"]) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector("#search-select-input")) == null ? void 0 : _c.focus();
+      }, 300);
+    },
+    cancelSearchRequests() {
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+    },
+    onSearchInput(query, loading) {
+      this.searchQuery = query;
+      delay(() => {
+        this.updateSearch();
+      }, 500)();
+    },
+    onSelectResultSelected(item) {
+      if (item !== null) {
+        if (item.resourceUrl) {
+          this.cancelSearchRequests();
+          this.$emit("submit", item.resourceUrl);
+        } else if (item.isMore) {
+          this.searchMoreOf(item.providerId).then(() => {
+            this.selectedResult = null;
+          });
+        }
+      }
+    },
+    searchMoreOf(searchProviderId) {
+      this.searchingMoreOf = searchProviderId;
+      this.cancelSearchRequests();
+      return this.searchProviders(searchProviderId);
+    },
+    updateSearch() {
+      this.cancelSearchRequests();
+      this.resetResults();
+      if (this.searchQuery === "") {
+        this.searching = false;
+        return;
+      }
+      return this.searchProviders();
+    },
+    searchProviders(searchProviderId = null) {
+      var _a, _b;
+      this.abortController = new AbortController();
+      this.searching = true;
+      const searchPromises = searchProviderId === null ? [...this.searchProviderIds].map((pid) => {
+        return this.searchOneProvider(pid);
+      }) : [this.searchOneProvider(searchProviderId, (_b = (_a = this.resultsBySearchProvider[searchProviderId]) == null ? void 0 : _a.cursor) != null ? _b : null)];
+      return Promise.allSettled(searchPromises).then((promises) => {
+        const isOneCanceled = !!promises.find((p) => {
+          return p.status === "rejected" && (p.reason.name === "CanceledError" || p.reason.code === "ERR_CANCELED");
+        });
+        if (!isOneCanceled) {
+          this.searching = false;
+          this.searchingMoreOf = null;
+        }
+      });
+    },
+    searchOneProvider(providerId, cursor = null) {
+      const url = cursor === null ? generateOcsUrl("search/providers/{providerId}/search?term={term}&limit={limit}", { providerId, term: this.searchQuery, limit: LIMIT }) : generateOcsUrl("search/providers/{providerId}/search?term={term}&limit={limit}&cursor={cursor}", { providerId, term: this.searchQuery, limit: LIMIT, cursor });
+      return axios.get(url, {
+        signal: this.abortController.signal
+      }).then((response) => {
+        const data = response.data.ocs.data;
+        this.resultsBySearchProvider[providerId].name = data.name;
+        this.resultsBySearchProvider[providerId].cursor = data.cursor;
+        this.resultsBySearchProvider[providerId].isPaginated = data.isPaginated;
+        this.resultsBySearchProvider[providerId].entries.push(...data.entries);
+      });
+    }
+  }
+};
+var _sfc_render$2 = function render7() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "smart-picker-search", class: { "with-empty-content": _vm.showEmptyContent } }, [_c("NcSelect", { ref: "search-select", staticClass: "smart-picker-search--select", attrs: { "input-id": "search-select-input", "label": "name", "placeholder": _vm.mySearchPlaceholder, "options": _vm.options, "append-to-body": false, "close-on-select": false, "clear-search-on-select": false, "clear-search-on-blur": () => false, "reset-focus-on-options-change": false, "filterable": false, "autoscroll": true, "reset-on-options-change": false, "loading": _vm.searching }, on: { "search": _vm.onSearchInput, "input": _vm.onSelectResultSelected }, scopedSlots: _vm._u([{ key: "option", fn: function(option) {
+    return [option.isRawLink ? _c("div", { staticClass: "custom-option" }, [_c("LinkVariantIcon", { staticClass: "option-simple-icon", attrs: { "size": 20 } }), _c("span", { staticClass: "option-text" }, [_vm._v(" " + _vm._s(_vm.t("Raw link {options}", { options: option.resourceUrl })) + " ")])], 1) : option.resourceUrl ? _c("NcSearchResult", { staticClass: "search-result", attrs: { "entry": option, "query": _vm.searchQuery } }) : option.isCustomGroupTitle ? _c("span", { staticClass: "custom-option group-name" }, [_vm.provider.icon_url ? _c("img", { staticClass: "provider-icon group-name-icon", attrs: { "src": _vm.provider.icon_url } }) : _vm._e(), _c("span", { staticClass: "option-text" }, [_c("strong", [_vm._v(_vm._s(option.name))])])]) : option.isMore ? _c("span", { class: { "custom-option": true } }, [option.isLoading ? _c("span", { staticClass: "option-simple-icon icon-loading-small" }) : _c("DotsHorizontalIcon", { staticClass: "option-simple-icon", attrs: { "size": 20 } }), _c("span", { staticClass: "option-text" }, [_vm._v(" " + _vm._s(_vm.t('Load more "{options}"', { options: option.name })) + " ")])], 1) : _vm._e()];
+  } }, { key: "no-options", fn: function() {
+    return [_vm._v(" " + _vm._s(_vm.noOptionsText) + " ")];
+  }, proxy: true }]), model: { value: _vm.selectedResult, callback: function($$v) {
+    _vm.selectedResult = $$v;
+  }, expression: "selectedResult" } }), _vm.showEmptyContent ? _c("NcEmptyContent", { staticClass: "smart-picker-search--empty-content", scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm.provider.icon_url ? _c("img", { staticClass: "provider-icon", attrs: { "alt": _vm.providerIconAlt, "src": _vm.provider.icon_url } }) : _c("LinkVariantIcon")];
+  }, proxy: true }], null, false, 2922132592) }) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  "909d416e",
+  null,
+  null
+);
+const NcSearch = __component__$2.exports;
+const MODES = {
+  providerList: 1,
+  standardLinkInput: 2,
+  searchInput: 3,
+  customElement: 4
+};
+const _sfc_main$1 = {
+  name: "NcReferencePicker",
+  components: {
+    NcCustomPickerElement,
+    NcProviderList,
+    NcRawLinkInput,
+    NcSearch
+  },
+  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: true
+    }
+  },
+  emits: [
+    "cancel",
+    "cancel-raw-link",
+    "cancel-search",
+    "provider-selected",
+    "submit"
+  ],
+  data() {
+    return {
+      MODES,
+      selectedProvider: this.initialProvider
+    };
+  },
+  computed: {
+    mode() {
+      return this.selectedProvider === null ? MODES.providerList : isCustomPickerElementRegistered(this.selectedProvider.id) ? MODES.customElement : this.selectedProvider.search_providers_ids ? MODES.searchInput : MODES.standardLinkInput;
+    },
+    pickerWrapperStyle() {
+      return {
+        width: this.width ? this.width + "px" : void 0
+      };
+    }
+  },
+  mounted() {
+    if (this.focusOnCreate) {
+      if (this.initialProvider) {
+        setTimeout(() => {
+          var _a;
+          (_a = this.$refs["url-input"]) == null ? void 0 : _a.focus();
+        }, 300);
+      } else {
+        this.$nextTick(() => {
+          var _a;
+          (_a = this.$refs["provider-list"]) == null ? void 0 : _a.focus();
+        });
+      }
+    }
+  },
+  methods: {
+    onEscapePressed() {
+      if (this.selectedProvider !== null) {
+        this.deselectProvider();
+      } else {
+        this.cancelProviderSelection();
+      }
+    },
+    onProviderSelected(provider) {
+      this.selectedProvider = provider;
+      this.$emit("provider-selected", provider);
+      this.$nextTick(() => {
+        var _a;
+        (_a = this.$refs["url-input"]) == null ? void 0 : _a.focus();
+      });
+    },
+    cancelCustomElement() {
+      this.deselectProvider();
+    },
+    cancelSearch() {
+      var _a;
+      this.$emit("cancel-search", (_a = this.selectedProvider) == null ? void 0 : _a.title);
+      this.deselectProvider();
+    },
+    cancelRawLinkInput() {
+      var _a;
+      this.$emit("cancel-raw-link", (_a = this.selectedProvider) == null ? void 0 : _a.title);
+      this.deselectProvider();
+    },
+    cancelProviderSelection() {
+      this.$emit("cancel");
+    },
+    submitLink(link) {
+      if (this.selectedProvider !== null) {
+        touchProvider(this.selectedProvider.id);
+      }
+      this.$emit("submit", link);
+      this.deselectProvider();
+    },
+    deselectProvider() {
+      this.selectedProvider = null;
+      this.$emit("provider-selected", null);
+      setTimeout(() => {
+        var _a;
+        (_a = this.$refs["provider-list"]) == null ? void 0 : _a.focus();
+      }, 300);
+    }
+  }
+};
+var _sfc_render$1 = function render8() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "reference-picker", style: _vm.pickerWrapperStyle, attrs: { "tabindex": "-1" }, on: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.onEscapePressed.apply(null, arguments);
+  } } }, [_vm.mode === _vm.MODES.providerList ? _c("NcProviderList", { ref: "provider-list", on: { "select-provider": _vm.onProviderSelected, "submit": _vm.submitLink, "cancel": _vm.cancelProviderSelection } }) : _vm.mode === _vm.MODES.standardLinkInput ? _c("NcRawLinkInput", { ref: "url-input", attrs: { "provider": _vm.selectedProvider }, on: { "submit": _vm.submitLink, "cancel": _vm.cancelRawLinkInput } }) : _vm.mode === _vm.MODES.searchInput ? _c("NcSearch", { ref: "url-input", attrs: { "provider": _vm.selectedProvider }, on: { "cancel": _vm.cancelSearch, "submit": _vm.submitLink } }) : _vm.mode === _vm.MODES.customElement ? _c("div", { staticClass: "custom-element-wrapper" }, [_c("NcCustomPickerElement", { attrs: { "provider": _vm.selectedProvider }, on: { "submit": _vm.submitLink, "cancel": _vm.cancelCustomElement } })], 1) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  "f3f0de17",
+  null,
+  null
+);
+const NcReferencePicker = __component__$1.exports;
+register(t11, t16);
+const _sfc_main = {
+  name: "NcReferencePickerModal",
+  components: {
+    NcReferencePicker,
+    NcModal,
+    NcButton,
+    ArrowLeftIcon: ArrowLeft,
+    CloseIcon: Close
+  },
+  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: true
+    },
+    /**
+     * If true, add the modal content to the Viewer trap elements via the event-bus
+     */
+    isInsideViewer: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "cancel",
+    "submit"
+  ],
+  data() {
+    return {
+      show: true,
+      selectedProvider: this.initialProvider,
+      backButtonTitle: t("Back to provider selection"),
+      closeButtonTitle: t("Close"),
+      closeButtonLabel: t("Close Smart Picker")
+    };
+  },
+  computed: {
+    isProviderSelected() {
+      return this.selectedProvider !== null;
+    },
+    showBackButton() {
+      return this.initialProvider === null && this.isProviderSelected;
+    },
+    modalSize() {
+      var _a;
+      return this.isProviderSelected && isCustomPickerElementRegistered(this.selectedProvider.id) ? (_a = getCustomPickerElementSize(this.selectedProvider.id)) != null ? _a : "large" : "normal";
+    },
+    showModalName() {
+      return !this.isProviderSelected || !isCustomPickerElementRegistered(this.selectedProvider.id);
+    },
+    modalName() {
+      return this.isProviderSelected ? this.selectedProvider.title : t("Smart Picker");
+    }
+  },
+  mounted() {
+    if (this.isInsideViewer) {
+      const elem = this.$refs.modal_content;
+      emit("viewer:trapElements:changed", elem);
+    }
+  },
+  methods: {
+    onCancel() {
+      this.show = false;
+      this.$emit("cancel");
+    },
+    onSubmit(value) {
+      this.show = false;
+      this.$emit("submit", value);
+    },
+    onProviderSelect(provider) {
+      this.selectedProvider = provider;
+      if (provider === null && this.initialProvider !== null) {
+        this.onCancel();
+      }
+    },
+    onBackClicked() {
+      this.$refs.referencePicker.deselectProvider();
+    }
+  }
+};
+var _sfc_render = function render9() {
+  var _vm = this, _c = _vm._self._c;
+  return _vm.show ? _c("NcModal", { staticClass: "reference-picker-modal", attrs: { "size": _vm.modalSize, "can-close": false }, on: { "close": _vm.onCancel } }, [_c("div", { ref: "modal_content", staticClass: "reference-picker-modal--content" }, [_vm.showBackButton ? _c("NcButton", { staticClass: "back-button", attrs: { "aria-label": _vm.backButtonTitle, "title": _vm.backButtonTitle }, on: { "click": _vm.onBackClicked }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ArrowLeftIcon")];
+  }, proxy: true }], null, false, 3001860362) }) : _vm._e(), _c("NcButton", { staticClass: "close-button", attrs: { "aria-label": _vm.closeButtonLabel, "title": _vm.closeButtonTitle, "type": "tertiary" }, on: { "click": _vm.onCancel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("CloseIcon")];
+  }, proxy: true }], null, false, 2491825086) }), _vm.showModalName ? _c("h2", [_vm._v(" " + _vm._s(_vm.modalName) + " ")]) : _vm._e(), _c("NcReferencePicker", { ref: "referencePicker", attrs: { "initial-provider": _vm.initialProvider, "focus-on-create": _vm.focusOnCreate }, on: { "provider-selected": _vm.onProviderSelect, "submit": _vm.onSubmit, "cancel": _vm.onCancel } })], 1)]) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "19d3f57d",
+  null,
+  null
+);
+const NcReferencePickerModal = __component__.exports;
+async function getLinkWithPicker(providerId = null, isInsideViewer = void 0) {
+  return await new Promise((resolve, reject) => {
+    var _a;
+    const modalId = "referencePickerModal";
+    const modalElement = document.createElement("div");
+    modalElement.id = modalId;
+    document.body.append(modalElement);
+    const initialProvider = providerId === null ? null : (_a = getProvider(providerId)) != null ? _a : null;
+    const View = Vue.extend(NcReferencePickerModal);
+    const view = new View({
+      propsData: {
+        initialProvider,
+        isInsideViewer
+      }
+    }).$mount(modalElement);
+    view.$on("cancel", () => {
+      view.$destroy();
+      reject(new Error("User cancellation"));
+    });
+    view.$on("submit", (link) => {
+      view.$destroy();
+      resolve(link);
+    });
+  });
+}
+export {
+  NcReferenceWidget as N,
+  anyLinkProviderId as a,
+  getProvider as b,
+  getProviders as c,
+  searchProvider as d,
+  NcReferencePicker as e,
+  NcReferencePickerModal as f,
+  getLinkWithPicker as g,
+  NcSearch as h,
+  sortProviders as s
+};