@nextcloud/vue 8.11.3 → 8.13.0

package/dist/Components/NcDateTimePickerNative.mjs

@@ -1,6 +1,6 @@
-import '../assets/NcDateTimePickerNative-CV_VuzvQ.css';
+import '../assets/NcDateTimePickerNative-BAcKr0B3.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
-import { S as ScopeComponent } from "../chunks/ScopeComponent-B9RptB1A.mjs";
+import { S as ScopeComponent } from "../chunks/ScopeComponent-BJmRUKzI.mjs";
 const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];
 const _sfc_main = {
   name: "NcDateTimePickerNative",
@@ -188,32 +188,11 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "7b246f90",
+  "fbe2ff4a",
   null,
   null
 );
 const NcDateTimePickerNative = __component__.exports;
-/**
- * @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
- *
- * @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
 ScopeComponent(NcDateTimePickerNative);
 export {
   NcDateTimePickerNative as default

package/dist/Components/NcDateTimePickerNative.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDateTimePickerNative.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue","../../src/components/NcDateTimePickerNative/index.js"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\">\n\t</div>\n</template>\n\n<script>\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default {\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative 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'input',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.value)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tlisteners() {\n\t\t\treturn {\n\t\t\t\t...this.$listeners,\n\t\t\t\t/**\n\t\t\t\t * Handle the input event\n\t\t\t\t *\n\t\t\t\t * @param {InputEvent} $event input event payload\n\t\t\t\t * @return {Date|string} new chosen Date() or an empty string\n\t\t\t\t */\n\t\t\t\tinput: ($event) => {\n\t\t\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {string} empty string\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', null)\n\t\t\t\t\t}\n\t\t\t\t\tif (this.type === 'time') {\n\t\t\t\t\t\tconst time = $event.target.value\n\t\t\t\t\t\tif (this.value === '') {\n\t\t\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.value)\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\t\t\tif (this.value === '') {\n\t\t\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t\t}\n\t\t\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('input', new Date(inputDateWithTimezone))\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n","/**\n * @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n *\n * @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport NcDateTimePickerNative from './NcDateTimePickerNative.vue'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nScopeComponent(NcDateTimePickerNative)\n\nexport default NcDateTimePickerNative\n"],"names":["yyyy","MM","dd","hh","mm"],"mappings":"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"}
+{"version":3,"file":"NcDateTimePickerNative.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue","../../src/components/NcDateTimePickerNative/index.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 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 provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\">\n\t</div>\n</template>\n\n<script>\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default {\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative 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'input',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.value)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tlisteners() {\n\t\t\treturn {\n\t\t\t\t...this.$listeners,\n\t\t\t\t/**\n\t\t\t\t * Handle the input event\n\t\t\t\t *\n\t\t\t\t * @param {InputEvent} $event input event payload\n\t\t\t\t * @return {Date|string} new chosen Date() or an empty string\n\t\t\t\t */\n\t\t\t\tinput: ($event) => {\n\t\t\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {string} empty string\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', null)\n\t\t\t\t\t}\n\t\t\t\t\tif (this.type === 'time') {\n\t\t\t\t\t\tconst time = $event.target.value\n\t\t\t\t\t\tif (this.value === '') {\n\t\t\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.value)\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\t\t\tif (this.value === '') {\n\t\t\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t\t */\n\t\t\t\t\t\treturn this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t\t}\n\t\t\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('input', new Date(inputDateWithTimezone))\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport NcDateTimePickerNative from './NcDateTimePickerNative.vue'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nScopeComponent(NcDateTimePickerNative)\n\nexport default NcDateTimePickerNative\n"],"names":["yyyy","MM","dd","hh","mm"],"mappings":"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"}

package/dist/Components/NcDialog.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcDialog = require("../chunks/NcDialog-G7XA1Z88.cjs");
+const NcDialog = require("../chunks/NcDialog-dCyByQCG.cjs");
 module.exports = NcDialog.NcDialog;

package/dist/Components/NcDialog.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcDialog-1TWFrsjf.mjs";
+import { N } from "../chunks/NcDialog-CDQmAtFa.mjs";
 export {
   N as default
 };

package/dist/Components/NcDialogButton.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcDialogButton = require("../chunks/NcDialogButton-NiGZGBjq.cjs");
+const NcDialogButton = require("../chunks/NcDialogButton-CNWF4urB.cjs");
 module.exports = NcDialogButton.NcDialogButton;

package/dist/Components/NcDialogButton.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcDialogButton-jh2GOQ_7.mjs";
+import { N } from "../chunks/NcDialogButton-JvyN3X6S.mjs";
 export {
   N as default
 };

package/dist/Components/NcEllipsisedOption.cjs

@@ -1,6 +1,6 @@
-require('../assets/NcEllipsisedOption-ClDzkIX6.css');
+require('../assets/NcEllipsisedOption-DZK2vWD1.css');
 "use strict";
-const Components_NcHighlight = require("../chunks/index-Dl-SBuhJ.cjs");
+const Components_NcHighlight = require("../chunks/index-BANjku4q.cjs");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {
   name: "NcEllipsisedOption",
@@ -8,10 +8,16 @@ const _sfc_main = {
     NcHighlight: Components_NcHighlight.NcHighlight
   },
   props: {
+    /**
+     * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.
+     */
     name: {
       type: String,
       default: ""
     },
+    /**
+     * The search value to highlight in the text
+     */
     search: {
       type: String,
       default: ""
@@ -81,7 +87,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "08c4259e",
+  "0c4478a6",
   null,
   null
 );

package/dist/Components/NcEllipsisedOption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEllipsisedOption.cjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<span class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","FindRanges"],"mappings":";;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAA,uBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,QAAA,KAAA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAEA,aAAA,KAAA,KAAA,SAAA,KAAA,IAAA,KAAA,MAAA,KAAA,KAAA,SAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,GAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,eAAA,CAAA;AAAA,MACA;AACA,aAAAC,uBAAA,WAAA,KAAA,MAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AACA,aAAA,KAAA,WAAA,IAAA,WAAA;AACA,eAAA;AAAA,UACA,OAAA,MAAA,QAAA,KAAA;AAAA,UACA,KAAA,MAAA,MAAA,KAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEllipsisedOption.cjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","FindRanges"],"mappings":";;;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAA,uBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,QAAA,KAAA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAEA,aAAA,KAAA,KAAA,SAAA,KAAA,IAAA,KAAA,MAAA,KAAA,KAAA,SAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,GAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,eAAA,CAAA;AAAA,MACA;AACA,aAAAC,uBAAA,WAAA,KAAA,MAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AACA,aAAA,KAAA,WAAA,IAAA,WAAA;AACA,eAAA;AAAA,UACA,OAAA,MAAA,QAAA,KAAA;AAAA,UACA,KAAA,MAAA,MAAA,KAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEllipsisedOption.mjs

@@ -1,5 +1,5 @@
-import '../assets/NcEllipsisedOption-ClDzkIX6.css';
-import { N as NcHighlight, F as FindRanges } from "../chunks/index-DYccGIvD.mjs";
+import '../assets/NcEllipsisedOption-DZK2vWD1.css';
+import { N as NcHighlight, F as FindRanges } from "../chunks/index-CsogA-K5.mjs";
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {
   name: "NcEllipsisedOption",
@@ -7,10 +7,16 @@ const _sfc_main = {
     NcHighlight
   },
   props: {
+    /**
+     * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.
+     */
     name: {
       type: String,
       default: ""
     },
+    /**
+     * The search value to highlight in the text
+     */
     search: {
       type: String,
       default: ""
@@ -80,7 +86,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "08c4259e",
+  "0c4478a6",
   null,
   null
 );

package/dist/Components/NcEllipsisedOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEllipsisedOption.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<span class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,QAAA,KAAA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAEA,aAAA,KAAA,KAAA,SAAA,KAAA,IAAA,KAAA,MAAA,KAAA,KAAA,SAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,GAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,eAAA,CAAA;AAAA,MACA;AACA,aAAA,WAAA,KAAA,MAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AACA,aAAA,KAAA,WAAA,IAAA,WAAA;AACA,eAAA;AAAA,UACA,OAAA,MAAA,QAAA,KAAA;AAAA,UACA,KAAA,MAAA,MAAA,KAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEllipsisedOption.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,QAAA,KAAA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAEA,aAAA,KAAA,KAAA,SAAA,KAAA,IAAA,KAAA,MAAA,KAAA,KAAA,SAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,GAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,MAAA,KAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,eAAA,CAAA;AAAA,MACA;AACA,aAAA,WAAA,KAAA,MAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AACA,aAAA,KAAA,WAAA,IAAA,WAAA;AACA,eAAA;AAAA,UACA,OAAA,MAAA,QAAA,KAAA;AAAA,UACA,KAAA,MAAA,MAAA,KAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEmojiPicker.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcEmojiPicker = require("../chunks/NcEmojiPicker-Ju0ogVxs.cjs");
+const NcEmojiPicker = require("../chunks/NcEmojiPicker-CNiHLIbP.cjs");
 module.exports = NcEmojiPicker.NcEmojiPicker;

package/dist/Components/NcEmojiPicker.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcEmojiPicker-Drc9tYzl.mjs";
+import { N } from "../chunks/NcEmojiPicker-CEeN-AZM.mjs";
 export {
   N as default
 };

package/dist/Components/NcEmptyContent.cjs

@@ -1,4 +1,4 @@
-require('../assets/NcEmptyContent--xKgddPn.css');
+require('../assets/NcEmptyContent-BU0QVo3d.css');
 "use strict";
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {
@@ -49,7 +49,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "458108e7",
+  "fede0c71",
   null,
   null
 );

package/dist/Components/NcEmptyContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent.cjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AAsKA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;;AACA,aAAA,KAAA,gBAAA,QAAA,UAAA,OAAA,gBAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEmptyContent.cjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AAqJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;;AACA,aAAA,KAAA,gBAAA,QAAA,UAAA,OAAA,gBAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEmptyContent.mjs

@@ -1,4 +1,4 @@
-import '../assets/NcEmptyContent--xKgddPn.css';
+import '../assets/NcEmptyContent-BU0QVo3d.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {
   name: "NcEmptyContent",
@@ -48,7 +48,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "458108e7",
+  "fede0c71",
   null,
   null
 );

package/dist/Components/NcEmptyContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";AAsKA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;;AACA,aAAA,KAAA,gBAAA,QAAA,UAAA,OAAA,gBAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEmptyContent.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";AAqJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;;AACA,aAAA,KAAA,gBAAA,QAAA,UAAA,OAAA,gBAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcGuestContent.cjs

@@ -1,4 +1,4 @@
-require('../assets/NcGuestContent-CeRLfUEi.css');
+require('../assets/NcGuestContent-BLJ37yLM.css');
 "use strict";
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {
@@ -21,7 +21,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "36ad47ca",
+  "cbad78fb",
   null,
   null
 );

package/dist/Components/NcGuestContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcGuestContent.cjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";;AAoDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcGuestContent.cjs","sources":["../../src/components/NcGuestContent/NcGuestContent.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### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";;AAmCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcGuestContent.mjs

@@ -1,4 +1,4 @@
-import '../assets/NcGuestContent-CeRLfUEi.css';
+import '../assets/NcGuestContent-BLJ37yLM.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {
   name: "NcGuestContent",
@@ -20,7 +20,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "36ad47ca",
+  "cbad78fb",
   null,
   null
 );

package/dist/Components/NcGuestContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcGuestContent.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";AAoDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcGuestContent.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.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### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tdestroyed() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":[],"mappings":";AAmCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,IAAA,kBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,aAAA,eAAA,SAAA,EAAA,UAAA,OAAA,kBAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcHeaderMenu.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcHeaderMenu = require("../chunks/NcHeaderMenu-830tFszI.cjs");
+const NcHeaderMenu = require("../chunks/NcHeaderMenu-C7peZLEA.cjs");
 module.exports = NcHeaderMenu.NcHeaderMenu;

package/dist/Components/NcHeaderMenu.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcHeaderMenu-2n5GDt37.mjs";
+import { N } from "../chunks/NcHeaderMenu-BEp6lzuy.mjs";
 export {
   N as default
 };

package/dist/Components/NcHighlight.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const Components_NcHighlight = require("../chunks/index-Dl-SBuhJ.cjs");
+const Components_NcHighlight = require("../chunks/index-BANjku4q.cjs");
 module.exports = Components_NcHighlight.NcHighlight;

package/dist/Components/NcHighlight.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/index-DYccGIvD.mjs";
+import { N } from "../chunks/index-CsogA-K5.mjs";
 export {
   N as default
 };

package/dist/Components/NcIconSvgWrapper.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-D4GEZPIc.cjs");
+const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-DaSgIT19.cjs");
 module.exports = NcIconSvgWrapper.NcIconSvgWrapper;

package/dist/Components/NcIconSvgWrapper.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcIconSvgWrapper-5v5HBSpx.mjs";
+import { N } from "../chunks/NcIconSvgWrapper-Ckqpz-vm.mjs";
 export {
   N as default
 };

package/dist/Components/NcInputField.cjs

@@ -1,7 +1,7 @@
-require('../assets/NcInputField-CXoTqF9T.css');
+require('../assets/NcInputField-CyNcetxP.css');
 "use strict";
 const Components_NcButton = require("./NcButton.cjs");
-const GenRandomId = require("../chunks/GenRandomId-kBCcgMJd.cjs");
+const GenRandomId = require("../chunks/GenRandomId-BQDud3d4.cjs");
 const AlertCircleOutline = require("../chunks/AlertCircleOutline-Cb0gAiDw.cjs");
 const Check = require("../chunks/Check-DZc7keoa.cjs");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
@@ -230,7 +230,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "b312d183",
+  "0613af2d",
   null,
   null
 );