@nextcloud/vue 8.27.0 → 8.29.0

package/dist/chunks/NcDateTime-C-kLQayi.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDateTime-C-kLQayi.cjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n}\n\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n */\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/** Time string formatted for main text */\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":["t","ref","unref","computed","getCanonicalLocale","getLanguage","watch","onMounted","onUnmounted"],"mappings":"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"}

package/dist/chunks/NcDateTime-DshRFtUU.mjs

@@ -1,159 +0,0 @@
-import { ref, unref, computed, watch, onMounted, onUnmounted } from "vue";
-import { getCanonicalLocale, getLanguage } from "@nextcloud/l10n";
-import { r as register, l as t2, a as t } from "./_l10n-DQgzdF9S.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t2);
-const FEW_SECONDS_AGO = {
-  long: t("a few seconds ago"),
-  short: t("seconds ago"),
-  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
-  narrow: t("sec. ago")
-  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
-};
-function useFormatDateTime(timestamp = Date.now(), opts = {}) {
-  const currentTime = ref(Date.now());
-  let intervalId;
-  const options = ref({
-    format: {
-      timeStyle: "medium",
-      dateStyle: "short"
-    },
-    relativeTime: "long",
-    ignoreSeconds: false,
-    ...unref(opts)
-  });
-  const wrappedOptions = computed(() => ({ ...unref(opts), ...options.value }));
-  const date = computed(() => new Date(unref(timestamp)));
-  const formattedFullTime = computed(() => {
-    const formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format);
-    return formatter.format(date.value);
-  });
-  const formattedTime = computed(() => {
-    if (wrappedOptions.value.relativeTime !== false) {
-      const formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: "auto", style: wrappedOptions.value.relativeTime });
-      const diff = date.value.getTime() - currentTime.value;
-      const seconds = diff / 1e3;
-      if (Math.abs(seconds) < 59.5) {
-        if (wrappedOptions.value.ignoreSeconds) {
-          return FEW_SECONDS_AGO[wrappedOptions.value.relativeTime];
-        } else {
-          return formatter.format(Math.round(seconds), "second");
-        }
-      }
-      const minutes = seconds / 60;
-      if (Math.abs(minutes) <= 59) {
-        return formatter.format(Math.round(minutes), "minute");
-      }
-      const hours = minutes / 60;
-      if (Math.abs(hours) < 23.5) {
-        return formatter.format(Math.round(hours), "hour");
-      }
-      const days = hours / 24;
-      if (Math.abs(days) < 6.5) {
-        return formatter.format(Math.round(days), "day");
-      }
-      if (Math.abs(days) < 27.5) {
-        const weeks = days / 7;
-        return formatter.format(Math.round(weeks), "week");
-      }
-      const months = days / 30;
-      if (Math.abs(months) < 11.5) {
-        return formatter.format(Math.round(months), "month");
-      }
-      return formatter.format(Math.round(days / 365), "year");
-    }
-    return formattedFullTime.value;
-  });
-  watch([wrappedOptions], () => {
-    window.clearInterval(intervalId);
-    intervalId = void 0;
-    if (wrappedOptions.value.relativeTime) {
-      intervalId = window.setInterval(() => {
-        currentTime.value = Date.now();
-      }, 1e3);
-    }
-  });
-  onMounted(() => {
-    if (wrappedOptions.value.relativeTime !== false) {
-      intervalId = window.setInterval(() => {
-        currentTime.value = Date.now();
-      }, 1e3);
-    }
-  });
-  onUnmounted(() => {
-    window.clearInterval(intervalId);
-  });
-  return {
-    formattedTime,
-    formattedFullTime,
-    options
-  };
-}
-const _sfc_main = {
-  name: "NcDateTime",
-  props: {
-    /**
-     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
-     */
-    timestamp: {
-      type: [Date, Number],
-      required: true
-    },
-    /**
-     * The format used for displaying, or if relative time is used the format used for the title (optional)
-     *
-     * @type {Intl.DateTimeFormatOptions}
-     */
-    format: {
-      type: Object,
-      default: () => ({ timeStyle: "medium", dateStyle: "short" })
-    },
-    /**
-     * Wether to display the timestamp as time from now (optional)
-     *
-     * - `false`: Disable relative time
-     * - `'long'`: Long text, like *2 seconds ago* (default)
-     * - `'short'`: Short text, like *2 sec. ago*
-     * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
-     */
-    relativeTime: {
-      type: [Boolean, String],
-      default: "long",
-      validator: (v) => v === false || ["long", "short", "narrow"].includes(v)
-    },
-    /**
-     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
-     */
-    ignoreSeconds: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const timestamp = computed(() => props.timestamp);
-    const { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props);
-    return {
-      formattedTime,
-      formattedFullTime
-    };
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": _vm.timestamp, "title": _vm.formattedFullTime }, domProps: { "textContent": _vm._s(_vm.formattedTime) } });
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const NcDateTime = __component__.exports;
-export {
-  NcDateTime as N,
-  useFormatDateTime as u
-};
-//# sourceMappingURL=NcDateTime-DshRFtUU.mjs.map

package/dist/chunks/NcDateTime-DshRFtUU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDateTime-DshRFtUU.mjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n}\n\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n */\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/** Time string formatted for main text */\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcInputField-C61UUN46.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcInputField-C61UUN46.cjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\"\n\t\t:class=\"{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default,\n\t\t\t'input-field--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t}\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"model?.toString()\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- @slot Leading icon, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t\t<slot />\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t *\n\t\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'trailing-button-click',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tconst newValue = this.type === 'number' && typeof this.model === 'number' ? parseFloat(event.target.value, 10) : event.target.value\n\t\t\tthis.model = newValue\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-large);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-large);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t// If border width differes between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--input-border-width-offset)) !important;\n\t\twidth: 100%;\n\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\t\tpadding-block: var(--input-border-width-offset);\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error,\n\t\t&:user-invalid {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tfont-size: var(--input-label-font-size);\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-large);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","AlertCircle","Check","useModelMigration","GenRandomId"],"mappings":"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"}

package/dist/chunks/NcInputField-DTtUueUZ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcInputField-DTtUueUZ.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\"\n\t\t:class=\"{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default,\n\t\t\t'input-field--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t}\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"model?.toString()\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- @slot Leading icon, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t\t<slot />\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t *\n\t\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'trailing-button-click',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tconst newValue = this.type === 'number' && typeof this.model === 'number' ? parseFloat(event.target.value, 10) : event.target.value\n\t\t\tthis.model = newValue\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-large);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-large);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t// If border width differes between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--input-border-width-offset)) !important;\n\t\twidth: 100%;\n\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\t\tpadding-block: var(--input-border-width-offset);\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error,\n\t\t&:user-invalid {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tfont-size: var(--input-label-font-size);\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-large);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcPasswordField-BCzIotoB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcPasswordField-BCzIotoB.cjs","sources":["../../node_modules/vue-material-design-icons/Eye.vue","../../node_modules/vue-material-design-icons/EyeOff.vue","../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField v-model=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\tv-model=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\tv-model=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField v-model=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField v-model=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\n\t\t<NcPasswordField v-model=\"text6\"\n\t\t\tlabel=\"Secret token\"\n\t\t\tas-text />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t\ttext6: 'secret-token',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden && !asText ? 'password' : 'text'\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\t:input-class=\"{ 'password-field__input--secure-text': isPasswordHidden && asText }\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<template v-if=\"!!$scopedSlots.icon || !!$slots.default || !!$scopedSlots.default\" #icon>\n\t\t\t<!-- @slot Leading icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t<slot />\n\t\t\t</slot>\n\t\t</template>\n\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { loadState } from '@nextcloud/initial-state'\nimport axios from '@nextcloud/axios'\nimport debounce from 'debounce'\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\n\nimport { logger } from '../../utils/logger.ts'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\n/**\n * @typedef PasswordPolicy\n * @property {object} api - The URLs to the password_policy app methods\n * @property {string} api.generate - The URL to the password generator\n * @property {string} api.validate - The URL to the password validator\n * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords\n * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters\n * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters\n * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case\n * @property {number} minLength - The minimum length of the password\n */\n\n/** @type {PasswordPolicy|null} */\nconst passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\t showTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t// Removed NcInputField props, defined only by this component\n\n\t\ttrailingButtonLabel: undefined,\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Render as input[type=text] that looks like password field.\n\t\t * Allows to avoid unwanted password-specific browser behavior,\n\t\t * such as save or generate password prompt.\n\t\t * Useful for secret token fields.\n\t\t * Note: autocomplete=\"off\" is ignored by browsers.\n\t\t */\n\t\tasText: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Triggers when the value inside the password field is\n\t\t * updated.\n\t\t *\n\t\t * @property {string} The new value\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.checkPassword(newValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.model = event.target.value\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.password-field__input--secure-text) {\n\t// Emulate password field look\n\t// This is not a part of the standard but well supported\n\t-webkit-text-security: disc;\n}\n</style>\n"],"names":["_sfc_main","loadState","NcInputField","useModelMigration","t","debounce","axios","generateOcsUrl","logger"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/NcPasswordField-DNjegDVj.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcPasswordField-DNjegDVj.mjs","sources":["../../node_modules/vue-material-design-icons/Eye.vue","../../node_modules/vue-material-design-icons/EyeOff.vue","../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField v-model=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\tv-model=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\tv-model=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField v-model=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField v-model=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\n\t\t<NcPasswordField v-model=\"text6\"\n\t\t\tlabel=\"Secret token\"\n\t\t\tas-text />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t\ttext6: 'secret-token',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden && !asText ? 'password' : 'text'\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\t:input-class=\"{ 'password-field__input--secure-text': isPasswordHidden && asText }\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<template v-if=\"!!$scopedSlots.icon || !!$slots.default || !!$scopedSlots.default\" #icon>\n\t\t\t<!-- @slot Leading icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t<slot />\n\t\t\t</slot>\n\t\t</template>\n\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { loadState } from '@nextcloud/initial-state'\nimport axios from '@nextcloud/axios'\nimport debounce from 'debounce'\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\n\nimport { logger } from '../../utils/logger.ts'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\n/**\n * @typedef PasswordPolicy\n * @property {object} api - The URLs to the password_policy app methods\n * @property {string} api.generate - The URL to the password generator\n * @property {string} api.validate - The URL to the password validator\n * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords\n * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters\n * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters\n * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case\n * @property {number} minLength - The minimum length of the password\n */\n\n/** @type {PasswordPolicy|null} */\nconst passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\t showTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t// Removed NcInputField props, defined only by this component\n\n\t\ttrailingButtonLabel: undefined,\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Render as input[type=text] that looks like password field.\n\t\t * Allows to avoid unwanted password-specific browser behavior,\n\t\t * such as save or generate password prompt.\n\t\t * Useful for secret token fields.\n\t\t * Note: autocomplete=\"off\" is ignored by browsers.\n\t\t */\n\t\tasText: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Triggers when the value inside the password field is\n\t\t * updated.\n\t\t *\n\t\t * @property {string} The new value\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.checkPassword(newValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.model = event.target.value\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.password-field__input--secure-text) {\n\t// Emulate password field look\n\t// This is not a part of the standard but well supported\n\t-webkit-text-security: disc;\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/NcRichContenteditable-B8UqleMX.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRichContenteditable-B8UqleMX.mjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"autocomplete-result\">\n\t\t<!-- Avatar or icon -->\n\t\t<div :class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<span v-if=\"status.icon\"\n\t\t\t\tclass=\"autocomplete-result__status autocomplete-result__status--icon\">\n\t\t\t\t{{ status && status.icon || '' }}\n\t\t\t</span>\n\t\t\t<NcUserStatusIcon v-else-if=\"status.status && status.status !== 'offline'\"\n\t\t\t\tclass=\"autocomplete-result__status\"\n\t\t\t\t:status=\"status.status\" />\n\t\t</div>\n\n\t\t<!-- Label and subline -->\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"labelWithFallback\">\n\t\t\t\t{{ labelWithFallback }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\n\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tcomponents: {\n\t\tNcUserStatusIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated Use `label` instead\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\n\t\t},\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\n\t\t},\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? this.getAvatarUrl(this.id, 44)\n\t\t\t\t: null\n\t\t},\n\t\t// For backwards compatibility\n\t\tlabelWithFallback() {\n\t\t\treturn this.label || this.title\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetAvatarUrl,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.autocomplete-result {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--default-grid-baseline);\n\tline-height: 1.2;\n\t--auto-complete-result-avatar-size: var(--default-clickable-area);\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tmin-width: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tborder-radius: var(--default-clickable-area);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: contain;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\t--auto-complete-result-status-icon-size: clamp(14px, var(--auto-complete-result-avatar-size) * 0.4, 18px);\n\t\t// Avatar Radius * (1 - 1 / sqrt(2)) - Status Icon Radius / 2\n\t\t--auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2);\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: var(--auto-complete-result-status-icon-position);\n\t\tbottom: var(--auto-complete-result-status-icon-position);\n\t\theight: var(--auto-complete-result-status-icon-size);\n\t\twidth: var(--auto-complete-result-status-icon-size);\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: calc(var(--auto-complete-result-status-icon-size) / 1.2);\n\t\tline-height: 1.2;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--auto-complete-result-status-icon-size);\n\t\tbackground-position: center;\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n}\n\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\tlabel=\"Write a comment\"\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\tv-model=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t*\n\t\t* @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t*/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n### Using public methods\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"buttons-wrapper\">\n\t\t\t<NcButton class=\"show-slash-button\" @click=\"showSlashCommands\">Slash commands</NcButton>\n\t\t\t<NcButton class=\"focus-button\" @click=\"focus\">Focus on input</NcButton>\n\t\t</div>\n\t\t<NcRichContenteditable\n\t\t\tref=\"contenteditable\"\n\t\t\tlabel=\"Write a comment\"\n\t\t\tv-model=\"message\"\n\t\t\t:maxlength=\"100\"/>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet. ',\n\t\t}\n\t},\n\tmethods: {\n\t\tshowSlashCommands() {\n\t\t\tthis.$refs.contenteditable.showTribute('/')\n\t\t},\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\t.buttons-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 10px;\n\t\tmargin-bottom: 20px;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div class=\"rich-contenteditable\">\n\t\t<div :id=\"id\"\n\t\t\tref=\"contenteditable\"\n\t\t\t:class=\"{\n\t\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t\t'rich-contenteditable__input--has-label': label,\n\t\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t\t}\"\n\t\t\t:contenteditable=\"canEdit\"\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-placeholder=\"placeholder\"\n\t\t\taria-multiline=\"true\"\n\t\t\tclass=\"rich-contenteditable__input\"\n\t\t\trole=\"textbox\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-autocomplete=\"inline\"\n\t\t\t:aria-controls=\"tributeId\"\n\t\t\t:aria-expanded=\"isAutocompleteOpen ? 'true' : 'false'\"\n\t\t\t:aria-activedescendant=\"autocompleteActiveId\"\n\t\t\t:title=\"tooltipString\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\"\n\t\t\t@focus=\"moveCursorToEnd\"\n\t\t\t@input=\"onInput\"\n\t\t\t@compositionstart=\"isComposing = true\"\n\t\t\t@compositionend=\"isComposing = false\"\n\t\t\t@keydown.esc.capture=\"onKeyEsc\"\n\t\t\t@keydown.enter.exact=\"onEnter\"\n\t\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t\t@paste=\"onPaste\"\n\t\t\t@keyup.stop.prevent.capture=\"onKeyUp\"\n\t\t\t@keydown.up.exact.stop=\"onTributeArrowKeyDown\"\n\t\t\t@keydown.down.exact.stop=\"onTributeArrowKeyDown\"\n\t\t\t@tribute-active-true=\"onTributeActive(true)\"\n\t\t\t@tribute-active-false=\"onTributeActive(false)\" />\n\t\t<div v-if=\"label\"\n\t\t\t:id=\"labelId\"\n\t\t\tclass=\"rich-contenteditable__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { n, t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\n/**\n * Populate the list of text smiles we want to offer via Tribute.\n * We add the colon `:)` and colon-dash `:-)` version for each of them.\n */\nconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/']\nconst textSmiles = []\nsmilesCharacters.forEach((char) => {\n\ttextSmiles.push(':' + char)\n\ttextSmiles.push(':-' + char)\n})\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tmixins: [richEditor],\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The ID attribute of the content editable\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => GenRandomId(7),\n\t\t},\n\n\t\t/**\n\t\t * Visual label of the contenteditable\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/**\n\t\t * Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t */\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Is the content editable ?\n\t\t */\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the editing and show specific disabled design\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Max allowed length\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable emoji autocompletion\n\t\t */\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable link autocompletion\n\t\t */\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'smart-picker-submit',\n\t],\n\n\tsetup() {\n\t\tconst uid = GenRandomId(5)\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t\t// Constants\n\t\t\tlabelId: `nc-rich-contenteditable-${uid}-label`,\n\t\t\ttributeId: `nc-rich-contenteditable-${uid}-tribute`,\n\t\t\t/**\n\t\t\t * Non-reactive property to store Tribute instance\n\t\t\t *\n\t\t\t * @type {import('tributejs').default | null}\n\t\t\t */\n\t\t\ttribute: null,\n\t\t\ttributeStyleMutationObserver: null,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.model,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\n\t\t\t// Tribute autocomplete\n\t\t\tisAutocompleteOpen: false,\n\t\t\tautocompleteActiveId: undefined,\n\t\t\tisTributeIntegrationDone: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current trimmed value empty?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue || this.localValue.trim() === ''\n\t\t},\n\n\t\t/**\n\t\t * Is the current value over maxlength?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue || !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn stringLength(this.localValue) > this.maxlength\n\t\t},\n\n\t\t/**\n\t\t * Tooltip to show if characters count is over limit\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn n('Message limit of %n character reached', 'Message limit of %n characters reached', this.maxlength)\n\t\t},\n\n\t\t/**\n\t\t * Edit is only allowed when contenteditableis true and disabled is false\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * Proxied native event handlers without custom event handlers\n\t\t *\n\t\t * @return {Record<string, Function>}\n\t\t */\n\t\tlisteners() {\n\t\t\t/**\n\t\t\t * All component's event handlers are set as native event handlers with by v-on directive.\n\t\t\t * The component also raised custom events manually by $emit for corresponding events.\n\t\t\t * As a result, it triggers handlers twice.\n\t\t\t * The v-on=\"listeners\" directive should only set proxied native events handler without custom events\n\t\t\t */\n\t\t\tconst listeners = { ...this.$listeners }\n\t\t\tdelete listeners.paste\n\t\t\treturn listeners\n\t\t},\n\n\t\t/**\n\t\t * Compute debounce function for the autocomplete function\n\t\t */\n\t\t debouncedAutoComplete() {\n\t\t\treturn debounce(async (search, callback) => {\n\t\t\t\tthis.autoComplete(search, callback)\n\t\t\t}, 100)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t */\n\t\tmodel() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.model.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.model)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.initializeTribute()\n\n\t\t// Update default value\n\t\tthis.updateContent(this.model)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.tribute) {\n\t\t\tthis.tribute.detach(this.$refs.contenteditable)\n\t\t}\n\n\t\tif (this.tributeStyleMutationObserver) {\n\t\t\tthis.tributeStyleMutationObserver.disconnect()\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the richContenteditable\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tinitializeTribute() {\n\t\t\tconst renderMenuItem = (content) => `<div id=\"nc-rich-contenteditable-tribute-item-${GenRandomId(5)}\" class=\"${this.$style['tribute-item']}\" role=\"option\">${content}</div>`\n\n\t\t\tconst tributesCollection = []\n\t\t\ttributesCollection.push({\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and label (display name) (fallback to title for v8.0.0..8.6.1 compatibility)\n\t\t\t\tlookup: result => `${result.id} ${result.label ?? result.title}`,\n\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => renderMenuItem(this.renderComponentHtml(item.original, NcAutoCompleteResult)),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: item => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-autocomplete']}`,\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: this.$style['tribute-container__item'],\n\n\t\t\t})\n\n\t\t\tif (this.emojiAutocomplete) {\n\t\t\t\ttributesCollection.push({\n\t\t\t\t\ttrigger: ':',\n\t\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t\t// We pass search results as values (see below)\n\t\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\t\tmenuItemTemplate: item => {\n\t\t\t\t\t\tif (textSmiles.includes(item.original)) {\n\t\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\t\treturn item.original\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn renderMenuItem(`<span class=\"${this.$style['tribute-item__emoji']}\">${item.original.native}</span> :${item.original.short_name}`)\n\t\t\t\t\t},\n\t\t\t\t\t// Hide if no results\n\t\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t\t// Display raw emoji along with its name\n\t\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\t\tif (textSmiles.includes(item.original)) {\n\t\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\t\treturn item.original\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\t\treturn item.original.native\n\t\t\t\t\t},\n\t\t\t\t\t// Pass the search results as values\n\t\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\t\tif (textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcb(emojiResults)\n\t\t\t\t\t},\n\t\t\t\t\t// Class added to the menu container\n\t\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-emoji']}`,\n\t\t\t\t\t// Class added to each list item\n\t\t\t\t\titemClass: this.$style['tribute-container__item'],\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (this.linkAutocomplete) {\n\t\t\t\ttributesCollection.push({\n\t\t\t\t\ttrigger: '/',\n\t\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t\t// We pass search results as values (see below)\n\t\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\t\tmenuItemTemplate: item => renderMenuItem(`<img class=\"${this.$style['tribute-item__icon']}\" src=\"${item.original.icon_url}\"> <span class=\"${this.$style['tribute-item__title']}\">${item.original.title}</span>`),\n\t\t\t\t\t// Hide if no results\n\t\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t\t// Pass the search results as values\n\t\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t\t// Class added to the menu container\n\t\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-link']}`,\n\t\t\t\t\t// Class added to each list item\n\t\t\t\t\titemClass: this.$style['tribute-container__item'],\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.tribute = new Tribute({\n\t\t\t\tcollection: tributesCollection,\n\t\t\t\t// FIXME: tributejs doesn't support allowSpaces as a collection option, only as a global one\n\t\t\t\t// Requires to fork a library to allow spaces only in the middle of mentions ('@' trigger)\n\t\t\t\tallowSpaces: false,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t})\n\t\t\tthis.tribute.attach(this.$refs.contenteditable)\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then(result => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smart-picker-submit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.debug('Smart picker promise rejected:', error)\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\tmoveCursorToEnd() {\n\t\t\tif (!document.createRange) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(this.$refs.contenteditable)\n\t\t\trange.collapse(false)\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\t/**\n\t\t * Re-emit the input event to the parent\n\t\t *\n\t\t * @param {Event} event the input event\n\t\t */\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t *\n\t\t * @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t */\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/** The original paste event */\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t|| !Object.values(clipboardData.items).find(item => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\trange.deleteContents()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Collapse the range to the end position\n\t\t\trange.collapse(false)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * Update the value text from the provided html\n\t\t *\n\t\t * @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t */\n\t\tupdateValue(htmlOrText) {\n\t\t\t// Browsers keep <br> after erasing contenteditable\n\t\t\tconst text = this.parseContent(htmlOrText).replace(/^\\n$/, '')\n\t\t\tthis.localValue = text\n\t\t\tthis.model = text\n\t\t},\n\n\t\t/**\n\t\t * Update content and local value\n\t\t *\n\t\t * @param {string} value the message value\n\t\t */\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/**\n\t\t * Enter key pressed. Submits if not multiline\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t|| this.isOverMaxlength\n\t\t\t\t|| this.tribute.isActive\n\t\t\t\t|| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Ctrl + Enter key pressed is used to submit\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\n\t\tonKeyEsc(event) {\n\t\t\t// prevent event from bubbling when tribute is open\n\t\t\tif (this.tribute && this.isAutocompleteOpen) {\n\t\t\t\tevent.stopImmediatePropagation()\n\t\t\t\tthis.tribute.hideMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get HTML element with Tribute.js container\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tgetTributeContainer() {\n\t\t\treturn this.tribute.menu\n\t\t},\n\n\t\t/**\n\t\t * Get the currently selected item element id in Tribute.js container\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tgetTributeSelectedItem() {\n\t\t\t// Tribute does not provide a way to get the active item, only the data index\n\t\t\t// So we have to find it manually by select class\n\t\t\treturn this.getTributeContainer().querySelector('.highlight [id^=\"nc-rich-contenteditable-tribute-item-\"]')\n\t\t},\n\n\t\t/**\n\t\t * Handle Tribute activation\n\t\t * @param {boolean} isActive - is active\n\t\t */\n\t\tonTributeActive(isActive) {\n\t\t\tthis.isAutocompleteOpen = isActive\n\n\t\t\tif (isActive) {\n\t\t\t\t// Tribute.js doesn't support containerClass update when new collection is open\n\t\t\t\t// The first opened collection's containerClass stays forever\n\t\t\t\t// https://github.com/zurb/tribute/issues/595\n\t\t\t\t// https://github.com/zurb/tribute/issues/627\n\t\t\t\t// So we have to manually update the class\n\t\t\t\t// The default class is \"tribute-container\"\n\t\t\t\tthis.getTributeContainer().setAttribute('class', this.tribute.current.collection.containerClass || this.$style['tribute-container'])\n\n\t\t\t\tthis.setupTributeIntegration()\n\t\t\t\t// Remove the event handler if any\n\t\t\t\tdocument.removeEventListener('click', this.hideTribute, true)\n\t\t\t} else {\n\t\t\t\t// Cancel loading data for autocomplete\n\t\t\t\t// Otherwise it could be received when another autocomplete is already opened\n\t\t\t\tthis.debouncedAutoComplete.clear()\n\n\t\t\t\t// Reset active item\n\t\t\t\tthis.autocompleteActiveId = undefined\n\n\t\t\t\tthis.setTributeFocusVisible(false)\n\t\t\t}\n\t\t},\n\n\t\tonTributeArrowKeyDown() {\n\t\t\tif (!this.isAutocompleteOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.setTributeFocusVisible(true)\n\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t},\n\n\t\tonTributeSelectedItemWillChange() {\n\t\t\t// Wait until tribute has updated the selected item\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis.autocompleteActiveId = this.getTributeSelectedItem()?.id\n\t\t\t})\n\t\t},\n\n\t\tsetupTributeIntegration() {\n\t\t\t// Setup integration only once on the first open\n\t\t\tif (this.isTributeIntegrationDone) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.isTributeIntegrationDone = true\n\n\t\t\tconst tributeContainer = this.getTributeContainer()\n\n\t\t\t// For aria-controls\n\t\t\ttributeContainer.id = this.tributeId\n\n\t\t\t// Container with options must be a listbox\n\t\t\ttributeContainer.setAttribute('role', 'listbox')\n\t\t\t// Reset list+listitem role from ul+li\n\t\t\tconst ul = tributeContainer.children[0]\n\t\t\tul.setAttribute('role', 'presentation')\n\n\t\t\t// Tribute.js does not provide a way to react on show/hide\n\t\t\t// tribute-active-true/false events are fired on initial activation, which is too early with async autoComplete function\n\t\t\tthis.tributeStyleMutationObserver = new MutationObserver(([{ target }]) => {\n\t\t\t\tif (target.style.display !== 'none') {\n\t\t\t\t\t// Tribute is visible - there will be selected item\n\t\t\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t\t\t}\n\t\t\t}).observe(tributeContainer, {\n\t\t\t\tattributes: true,\n\t\t\t\tattributeFilter: ['style'],\n\t\t\t})\n\n\t\t\t// Handle selecting new item on mouse selection\n\t\t\ttributeContainer.addEventListener('mousemove', () => {\n\t\t\t\tthis.setTributeFocusVisible(false)\n\t\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t\t}, { passive: true })\n\t\t},\n\n\t\t/**\n\t\t * Set tribute-container--focus-visible class on the Tribute container when the user navigates the listbox via keyboard.\n\t\t *\n\t\t * Because the real focus is kept on the textbox, we cannot use the :focus-visible pseudo-class\n\t\t * to style selected options in the autocomplete listbox.\n\t\t *\n\t\t * @param {boolean} withFocusVisible - should the focus-visible class be added\n\t\t */\n\t\tsetTributeFocusVisible(withFocusVisible) {\n\t\t\tif (withFocusVisible) {\n\t\t\t\tthis.getTributeContainer().classList.add(this.$style['tribute-container--focus-visible'])\n\t\t\t} else {\n\t\t\t\tthis.getTributeContainer().classList.remove(this.$style['tribute-container--focus-visible'])\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Show tribute menu programmatically.\n\t\t * @param {string} trigger - trigger character, can be '/', '@', or ':'\n\t\t *\n\t\t * @public\n\t\t */\n\t\tshowTribute(trigger) {\n\t\t\tthis.focus()\n\t\t\tconst index = this.tribute.collection.findIndex(collection => collection.trigger === trigger)\n\t\t\tthis.tribute.showMenuForCollection(this.$refs.contenteditable, index)\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\tdocument.addEventListener('click', this.hideTribute, true)\n\t\t},\n\n\t\t/**\n\t\t * Hide tribute menu programmatically\n\t\t *\n\t\t */\n\t\thideTribute() {\n\t\t\tthis.tribute.hideMenu()\n\t\t\tdocument.removeEventListener('click', this.hideTribute, true)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable {\n\t--contenteditable-block-offset: calc(2 * var(--default-grid-baseline));\n\t--contenteditable-inline-start-offset: calc(2 * var(--default-grid-baseline));\n\t--contenteditable-inline-end-offset: calc(2 * var(--default-grid-baseline));\n\tposition: relative;\n\twidth: auto;\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(&__input--empty) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__input {\n\t\toverflow-y: auto;\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding-block: var(--contenteditable-block-offset);\n\t\tpadding-inline: var(--contenteditable-inline-start-offset) var(--contenteditable-inline-end-offset);\n\t\tcursor: text;\n\t\twhite-space: pre-wrap;\n\t\tword-break: break-word;\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\t\toutline: none;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-family: var(--font-face);\n\t\tfont-size: inherit;\n\t\ttab-size: 4;\n\t\tmin-height: var(--default-clickable-area);\n\t\tmax-height: calc(var(--default-clickable-area) * 5.5);\n\n\t\t&--has-label {\n\t\t\tmargin-top: 10px;\n\t\t}\n\n\t\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t\t&--empty:focus:before,\n\t\t&--empty:not(&--has-label):before {\n\t\t\tcontent: attr(aria-placeholder);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tposition: absolute;\n\t\t\twidth: calc(100% - var(--contenteditable-inline-start-offset) - var(--contenteditable-inline-end-offset));\n\t\t\theight: calc(100% - 2 * var(--contenteditable-block-offset));\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t&[contenteditable='false']:not(&--disabled) {\n\t\t\tcursor: default;\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: transparent;\n\t\t\topacity: 1;\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&--multiline {\n\t\t\tmin-height: calc(var(--default-clickable-area) * 3);\n\t\t\t// No max for mutiline\n\t\t\tmax-height: none;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: $opacity_disabled;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tborder: 2px solid var(--color-background-darker);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\n\t\t&--overflow,\n\t\t&--overflow:hover {\n\t\t\t// we need important to override server styles\n\t\t\tborder-color: var(--color-error) !important;\n\t\t}\n\t}\n}\n\n</style>\n\n<style lang=\"scss\" module>\n.tribute-container {\n\tz-index: 9000;\n\toverflow: auto;\n\t// Hide container root element while initializing\n\tposition: absolute;\n\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\tleft: -100vw;\n\t// Space it out a bit from the text\n\tmargin: var(--default-grid-baseline) 0;\n\tpadding: var(--default-grid-baseline);\n\tcolor: var(--color-text-maxcontrast);\n\tborder-radius: var(--border-radius-element, var(--border-radius));\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\tul {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline);\n\t}\n\n\t.tribute-container__item {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tborder-radius: var(--border-radius-small, var(--border-radius));\n\t\tpadding: var(--default-grid-baseline);\n\t\tcursor: pointer;\n\t\tmin-height: var(--clickable-area-small, auto);\n\n\t\t&:global(.highlight) {\n\t\t\tcolor: var(--color-main-text);\n\t\t\tbackground: var(--color-background-hover);\n\n\t\t\t&, * {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tribute-container--focus-visible {\n\t\t:global(.highlight).tribute-container__item {\n\t\t\toutline: 2px solid var(--color-main-text) !important;\n\t\t}\n\t}\n}\n\n.tribute-container-autocomplete {\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// Autocomplete height\n\t// + 2 paddings inside autocomplete\n\t// + 1 padding gap\n\t// And 1.5 paddings - container's padding without the last gap\n\tmax-height: calc((var(--default-clickable-area) + 3 * var(--default-grid-baseline)) * 4.5 - 1.5 * var(--default-grid-baseline));\n}\n\n.tribute-container-emoji,\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\t// Show maximum 5 entries and a half to show scroll\n\t// Item height\n\t// + 2 paddings around tribute item\n\t// + 1 padding gap\n\t// And 1.5 paddings - container's padding without the last gap\n\tmax-height: calc((24px + 3 * var(--default-grid-baseline)) * 5.5 - 1.5 * var(--default-grid-baseline));\n\n\t.tribute-item {\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t.tribute-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-inline-end: var(--default-grid-baseline);\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main"],"mappings":"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"}