@nextcloud/vue 8.0.1 → 8.2.0

package/dist/Components/NcColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcColorPicker.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.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\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :value=\"color\" @input=\"updateColor\" :shown.sync=\"open\">\n\t\t\t<div :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover v-bind=\"$attrs\" v-on=\"$listeners\" @apply-hide=\"handleClose\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<div class=\"color-picker\"\n\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t<transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t<button v-for=\"(color, index) in palette\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t:style=\"{'background-color': color }\"\n\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t<Check v-if=\"color === currentColor\"\n\t\t\t\t\t\t\t:size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<Chrome v-if=\"advanced\"\n\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t</transition>\n\t\t\t<div class=\"color-picker__navigation\">\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"!advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t@click=\"handleConfirm\">\n\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport GenColors from '../../utils/GenColors.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\n\nconst rgbToHex = function(color) {\n\tconst hex = color.toString(16)\n\treturn hex.length === 1 ? '0' + hex : hex\n}\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of hexadecimal colors to show\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => GenColors(4).map(color => {\n\t\t\t\treturn '#' + rgbToHex(color.r) + rgbToHex(color.g) + rgbToHex(color.b)\n\t\t\t}),\n\t\t\tvalidator(palette) {\n\t\t\t\treturn palette.every(color => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(color))\n\t\t\t},\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:value',\n\t\t'input',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.value,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\twatch: {\n\t\tvalue(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t */\n\t\thandleConfirm() {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\tthis.handleClose()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:value', color)\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, $clickable-area);\n\t\tgrid-auto-rows: $clickable-area;\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tmin-height: 34px;\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: 38px;\n\t\t\t\theight: 38px;\n\t\t\t\tmin-height: 38px;\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\t.vc-input__input {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["rgbToHex","color","hex","_sfc_main","ArrowLeft","Check","Chrome","DotsHorizontal","NcButton","NcPopover","GenColors","palette","t"],"mappings":";;;;;;;;;;AAkOA,MAAAA,IAAA,SAAAC,GAAA;AACA,QAAAC,IAAAD,EAAA,SAAA,EAAA;AACA,SAAAC,EAAA,WAAA,IAAA,MAAAA,IAAAA;AACA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAAC,EAAA,CAAA,EAAA,IAAA,CAAAT,MACA,MAAAD,EAAAC,EAAA,CAAA,IAAAD,EAAAC,EAAA,CAAA,IAAAD,EAAAC,EAAA,CAAA,CACA;AAAA,MACA,UAAAU,GAAA;AACA,eAAAA,EAAA,MAAA,CAAAV,MAAA,gCAAA,KAAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAW,EAAA,MAAA;AAAA,MACA,UAAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAX,GAAA;AACA,WAAA,eAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAW;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA,GACA,KAAA,YAAA,GAEA,KAAA,WAAA;AAAA,IACA;AAAA,IACA,cAAA;AAIA,WAAA,MAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA,IACA,qBAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAX,GAAA;AACA,MAAA,OAAAA,KAAA,aACAA,IAAA,KAAA,aAAA,MAEA,KAAA,eAAAA,GAKA,KAAA,MAAA,gBAAAA,CAAA,GAKA,KAAA,MAAA,SAAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcColorPicker.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Grigorii K. Shartsev <me@shgk.me>\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 component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :value=\"color\" @input=\"updateColor\" :shown.sync=\"open\">\n\t\t\t<div :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover v-bind=\"$attrs\" v-on=\"$listeners\" @apply-hide=\"handleClose\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<div class=\"color-picker\"\n\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t<label v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\n\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\"\n\t\t\t\t\t\t:aria-label=\"name\">\n\t\t\t\t\t\t<Check v-if=\"color === currentColor\" :size=\"20\" />\n\t\t\t\t\t\t<input type=\"radio\"\n\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t<Chrome v-if=\"advanced\"\n\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t</Transition>\n\t\t\t<div class=\"color-picker__navigation\">\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"!advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t@click=\"handleConfirm\">\n\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport GenColors from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\n\n/**\n * Convert RGB object to a HEX string color\n *\n * @param {object} color - The color to convert\n * @param {string} [color.r] - Red value\n * @param {string} [color.g] - Green value\n * @param {string} [color.b] - Blue value\n * @return {string} The hex value\n */\nexport function rgbToHex({ r, g, b }) {\n\tconst toHex = (number) => number.toString(16).padStart(2, '0')\n\treturn `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => GenColors(4).map(item => ({ color: rgbToHex(item), name: item.name })),\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:value',\n\t\t'input',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.value,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t */\n\t\thandleConfirm() {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\tthis.handleClose()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:value', color)\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, $clickable-area);\n\t\tgrid-auto-rows: $clickable-area;\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tmin-height: 34px;\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: 38px;\n\t\t\t\theight: 38px;\n\t\t\t\tmin-height: 38px;\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\t.vc-input__input {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["rgbToHex","r","g","b","toHex","number","HEX_REGEX","_sfc_main","ArrowLeft","Check","Chrome","DotsHorizontal","NcButton","NcPopover","GenColors","item","palette","t","GenRandomId","color"],"mappings":";;;;;;;;;;;AAgPA,SAAAA,EAAA,EAAA,GAAAC,GAAA,GAAAC,GAAA,GAAAC,EAAA,GAAA;AACA,QAAAC,IAAA,CAAAC,MAAAA,EAAA,SAAA,EAAA,EAAA,SAAA,GAAA,GAAA;AACA,SAAA,IAAAD,EAAAH,CAAA,CAAA,GAAAG,EAAAF,CAAA,CAAA,GAAAE,EAAAD,CAAA,CAAA;AACA;AAEA,MAAAG,IAAA,iCAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAAC,EAAA,CAAA,EAAA,IAAA,CAAAC,OAAA,EAAA,OAAAf,EAAAe,CAAA,GAAA,MAAAA,EAAA,KAAA,EAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,EAAA;AAAA,QAAA,CAAAD,MACA,OAAAA,KAAA,YAAAT,EAAA,KAAAS,CAAA,KACA,OAAAA,KAAA,YAAAA,EAAA,SAAAT,EAAA,KAAAS,EAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAE,EAAA,MAAA;AAAA,MACA,UAAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA,KAAA,QAAA,IAAA,CAAAF,OAAA;AAAA,QACA,OAAA,OAAAA,KAAA,WAAAA,EAAA,QAAAA;AAAA,QACA,MAAA,OAAAA,KAAA,YAAAA,EAAA,OACAA,EAAA,OACAE,EAAA,kCAAA,EAAA,KAAAF,EAAA,MAAA,CAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,MAAA;AACA,aAAAG,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAC,GAAA;AACA,WAAA,eAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAF;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA,GACA,KAAA,YAAA,GAEA,KAAA,WAAA;AAAA,IACA;AAAA,IACA,cAAA;AAIA,WAAA,MAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA,IACA,qBAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAE,GAAA;AACA,MAAA,OAAAA,KAAA,aACAA,IAAA,KAAA,aAAA,MAEA,KAAA,eAAAA,GAKA,KAAA,MAAA,gBAAAA,CAAA,GAKA,KAAA,MAAA,SAAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcDashboardWidget.cjs

@@ -1,5 +1,5 @@
 var p = require("../assets/index-6416f636.css");
-const r = require("../chunks/index-e06b96d3.cjs"), o = require("./NcDashboardWidgetItem.cjs"), a = require("./NcEmptyContent.cjs"), i = require("../chunks/Check-be8cd6af.cjs"), m = require("../chunks/l10n-f491109d.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const r = require("../chunks/index-dc10fd2b.cjs"), o = require("./NcDashboardWidgetItem.cjs"), a = require("./NcEmptyContent.cjs"), i = require("../chunks/Check-be8cd6af.cjs"), m = require("../chunks/l10n-e9ffbe5e.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const c = {
   name: "NcDashboardWidget",
   components: {

package/dist/Components/NcDashboardWidget.mjs

@@ -1,9 +1,9 @@
 import "../assets/index-6416f636.css";
-import { N as r } from "../chunks/index-fbf943b3.mjs";
+import { N as r } from "../chunks/index-cea13a24.mjs";
 import o from "./NcDashboardWidgetItem.mjs";
 import a from "./NcEmptyContent.mjs";
 import { C as i } from "../chunks/Check-2ea0a88a.mjs";
-import { t as m } from "../chunks/l10n-f692947e.mjs";
+import { t as m } from "../chunks/l10n-ef44019c.mjs";
 import { n as l } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const c = {
   name: "NcDashboardWidget",

package/dist/Components/NcDashboardWidgetItem.cjs

@@ -1,5 +1,5 @@
 var f = require("../assets/index-e7eadba7.css");
-const i = require("../chunks/index-e06b96d3.cjs"), o = require("./NcActions.cjs"), c = require("./NcActionButton.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const i = require("../chunks/index-dc10fd2b.cjs"), o = require("./NcActions.cjs"), c = require("./NcActionButton.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const u = {
   name: "NcDashboardWidgetItem",
   components: {

package/dist/Components/NcDashboardWidgetItem.mjs

@@ -1,5 +1,5 @@
 import "../assets/index-e7eadba7.css";
-import { N as i } from "../chunks/index-fbf943b3.mjs";
+import { N as i } from "../chunks/index-cea13a24.mjs";
 import o from "./NcActions.mjs";
 import l from "./NcActionButton.mjs";
 import { n as u } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";

package/dist/Components/NcDateTime.cjs

@@ -1,11 +1,11 @@
 "use strict";
-const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-f491109d.cjs"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), d = {
-  long: s.t("a few seconds ago"),
-  short: s.t("seconds ago"),
+const l = require("@nextcloud/l10n"), o = require("../chunks/l10n-e9ffbe5e.cjs"), d = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = {
+  long: o.t("a few seconds ago"),
+  short: o.t("seconds ago"),
   // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
-  narrow: s.t("sec. ago")
+  narrow: o.t("sec. ago")
   // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
-}, u = {
+}, c = {
   name: "NcDateTime",
   props: {
     /**
@@ -63,18 +63,21 @@ const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-f491109d.cjs")
       if (this.relativeTime !== !1) {
         const t = new Intl.RelativeTimeFormat(l.getCanonicalLocale(), { numeric: "auto", style: this.relativeTime }), r = (this.dateObject - new Date(this.currentTime)) / 1e3;
         if (Math.abs(r) <= 90)
-          return this.ignoreSeconds ? d[this.relativeTime] : t.format(Math.round(r), "second");
+          return this.ignoreSeconds ? u[this.relativeTime] : t.format(Math.round(r), "second");
         const n = r / 60;
         if (Math.abs(n) <= 90)
           return t.format(Math.round(n), "minute");
         const i = n / 60;
-        if (Math.abs(i) <= 72)
+        if (Math.abs(i) <= 24)
           return t.format(Math.round(i), "hour");
         const a = i / 24;
         if (Math.abs(a) <= 6)
           return t.format(Math.round(a), "day");
-        const o = a / 7;
-        return Math.abs(o) <= 52 ? t.format(Math.round(o), "week") : t.format(Math.round(a / 365), "year");
+        const s = a / 7;
+        if (Math.abs(s) <= 4)
+          return t.format(Math.round(s), "week");
+        const m = a / 30;
+        return Math.abs(m) <= 12 ? t.format(Math.round(m), "month") : t.format(Math.round(a / 365), "year");
       }
       return this.formattedFullTime;
     },
@@ -108,18 +111,18 @@ const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-f491109d.cjs")
     }
   }
 };
-var c = function() {
+var f = function() {
   var e = this, r = e._self._c;
   return r("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": e.timestamp, title: e.formattedFullTime } }, [e._v(e._s(e.formattedTime))]);
-}, f = [], h = /* @__PURE__ */ m.normalizeComponent(
-  u,
+}, h = [], v = /* @__PURE__ */ d.normalizeComponent(
   c,
   f,
+  h,
   !1,
   null,
   null,
   null,
   null
 );
-const v = h.exports;
-module.exports = v;
+const T = v.exports;
+module.exports = T;

package/dist/Components/NcDateTime.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDateTime.cjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\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\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\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\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\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 72) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 52) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","newValue","_oldValue"],"mappings":"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"}
+{"version":3,"file":"NcDateTime.cjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\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\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\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\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\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 24) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 4) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\tconst months = days / 30\n\t\t\t\tif (Math.abs(months) <= 12) {\n\t\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","months","newValue","_oldValue"],"mappings":"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"}

package/dist/Components/NcDateTime.mjs

@@ -1,13 +1,13 @@
-import { getCanonicalLocale as m } from "@nextcloud/l10n";
-import { t as o } from "../chunks/l10n-f692947e.mjs";
-import { n as l } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const d = {
+import { getCanonicalLocale as l } from "@nextcloud/l10n";
+import { t as o } from "../chunks/l10n-ef44019c.mjs";
+import { n as d } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const u = {
   long: o("a few seconds ago"),
   short: o("seconds ago"),
   // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
   narrow: o("sec. ago")
   // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
-}, u = {
+}, f = {
   name: "NcDateTime",
   props: {
     /**
@@ -63,25 +63,28 @@ const d = {
     /** Time string formatted for main text */
     formattedTime() {
       if (this.relativeTime !== !1) {
-        const t = new Intl.RelativeTimeFormat(m(), { numeric: "auto", style: this.relativeTime }), r = (this.dateObject - new Date(this.currentTime)) / 1e3;
+        const t = new Intl.RelativeTimeFormat(l(), { numeric: "auto", style: this.relativeTime }), r = (this.dateObject - new Date(this.currentTime)) / 1e3;
         if (Math.abs(r) <= 90)
-          return this.ignoreSeconds ? d[this.relativeTime] : t.format(Math.round(r), "second");
+          return this.ignoreSeconds ? u[this.relativeTime] : t.format(Math.round(r), "second");
         const n = r / 60;
         if (Math.abs(n) <= 90)
           return t.format(Math.round(n), "minute");
         const i = n / 60;
-        if (Math.abs(i) <= 72)
+        if (Math.abs(i) <= 24)
           return t.format(Math.round(i), "hour");
         const a = i / 24;
         if (Math.abs(a) <= 6)
           return t.format(Math.round(a), "day");
         const s = a / 7;
-        return Math.abs(s) <= 52 ? t.format(Math.round(s), "week") : t.format(Math.round(a / 365), "year");
+        if (Math.abs(s) <= 4)
+          return t.format(Math.round(s), "week");
+        const m = a / 30;
+        return Math.abs(m) <= 12 ? t.format(Math.round(m), "month") : t.format(Math.round(a / 365), "year");
       }
       return this.formattedFullTime;
     },
     formattedFullTime() {
-      return new Intl.DateTimeFormat(m(), this.format).format(this.dateObject);
+      return new Intl.DateTimeFormat(l(), this.format).format(this.dateObject);
     }
   },
   watch: {
@@ -110,20 +113,20 @@ const d = {
     }
   }
 };
-var f = function() {
+var c = function() {
   var e = this, r = e._self._c;
   return r("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": e.timestamp, title: e.formattedFullTime } }, [e._v(e._s(e.formattedTime))]);
-}, c = [], h = /* @__PURE__ */ l(
-  u,
+}, h = [], v = /* @__PURE__ */ d(
   f,
   c,
+  h,
   !1,
   null,
   null,
   null,
   null
 );
-const p = h.exports;
+const _ = v.exports;
 export {
-  p as default
+  _ as default
 };

package/dist/Components/NcDateTime.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDateTime.mjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\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\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\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\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\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 72) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 52) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","newValue","_oldValue"],"mappings":"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"}
+{"version":3,"file":"NcDateTime.mjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\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\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\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\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\tdata() {\n\t\treturn {\n\t\t\t/** Current time in ms */\n\t\t\tcurrentTime: Date.now(),\n\t\t\t/** ID of the current time interval */\n\t\t\tintervalId: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** ECMA Date object of the timestamp */\n\t\tdateObject() {\n\t\t\treturn new Date(this.timestamp)\n\t\t},\n\t\t/** Time string formatted for main text */\n\t\tformattedTime() {\n\t\t\tif (this.relativeTime !== false) {\n\t\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })\n\n\t\t\t\tconst diff = this.dateObject - new Date(this.currentTime)\n\t\t\t\tconst seconds = diff / 1000\n\t\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\t\tif (this.ignoreSeconds) {\n\t\t\t\t\t\treturn FEW_SECONDS_AGO[this.relativeTime]\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst minutes = seconds / 60\n\t\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t\t}\n\t\t\t\tconst hours = minutes / 60\n\t\t\t\tif (Math.abs(hours) <= 24) {\n\t\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t\t}\n\t\t\t\tconst days = hours / 24\n\t\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t\t}\n\t\t\t\tconst weeks = days / 7\n\t\t\t\tif (Math.abs(weeks) <= 4) {\n\t\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t\t}\n\t\t\t\tconst months = days / 30\n\t\t\t\tif (Math.abs(months) <= 12) {\n\t\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t\t}\n\t\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t\t}\n\t\t\treturn this.formattedFullTime\n\t\t},\n\t\tformattedFullTime() {\n\t\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)\n\t\t\treturn formatter.format(this.dateObject)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Set or clear interval if relative time is dis/enabled\n\t\t *\n\t\t * @param {boolean} newValue The new value of the relativeTime property\n\t\t * @param {boolean} _oldValue The old value of the relativeTime property\n\t\t */\n\t\trelativeTime(newValue, _oldValue) {\n\t\t\twindow.clearInterval(this.intervalId)\n\t\t\tthis.intervalId = undefined\n\t\t\tif (newValue) {\n\t\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Start the interval for setting the current time if relative time is enabled\n\t\tif (this.relativeTime !== false) {\n\t\t\tthis.intervalId = window.setInterval(this.setCurrentTime, 1000)\n\t\t}\n\t},\n\n\tdestroyed() {\n\t\t// ensure interval is cleared\n\t\twindow.clearInterval(this.intervalId)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.\n\t\t */\n\t\tsetCurrentTime() {\n\t\t\tthis.currentTime = Date.now()\n\t\t},\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","_sfc_main","v","formatter","getCanonicalLocale","seconds","minutes","hours","days","weeks","months","newValue","_oldValue"],"mappings":"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"}

package/dist/Components/NcDateTimePicker.cjs

@@ -1,5 +1,5 @@
-var H = require("../assets/index-dea0aef3.css");
-const r = require("../chunks/l10n-f491109d.cjs"), p = require("./NcTimezonePicker.cjs"), m = require("./NcPopover.cjs"), d = require("../chunks/l10n-ec2d3010.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), o = require("@nextcloud/l10n"), f = require("vue2-datepicker"), _ = require("../chunks/ScopeComponent-50287dad.cjs"), h = (n) => n && n.__esModule ? n : { default: n }, v = /* @__PURE__ */ h(f);
+var H = require("../assets/index-5c74e333.css");
+const r = require("../chunks/l10n-e9ffbe5e.cjs"), p = require("./NcTimezonePicker.cjs"), m = require("./NcPopover.cjs"), d = require("../chunks/l10n-a12cdbfa.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), o = require("@nextcloud/l10n"), f = require("vue2-datepicker"), _ = require("../chunks/ScopeComponent-df4b58b1.cjs"), h = (n) => n && n.__esModule ? n : { default: n }, v = /* @__PURE__ */ h(f);
 const y = {
   name: "CalendarBlankIcon",
   emits: ["click"],

package/dist/Components/NcDateTimePicker.mjs

@@ -1,12 +1,12 @@
-import "../assets/index-dea0aef3.css";
-import { t as r } from "../chunks/l10n-f692947e.mjs";
+import "../assets/index-5c74e333.css";
+import { t as r } from "../chunks/l10n-ef44019c.mjs";
 import c from "./NcTimezonePicker.mjs";
 import u from "./NcPopover.mjs";
-import { l as p } from "../chunks/l10n-9fc9974f.mjs";
+import { l as p } from "../chunks/l10n-c603e589.mjs";
 import { n as l } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 import { getMonthNames as m, getMonthNamesShort as d, getDayNames as f, getDayNamesShort as _, getDayNamesMin as h, getFirstDay as v } from "@nextcloud/l10n";
 import y from "vue2-datepicker";
-import { S as g } from "../chunks/ScopeComponent-1ab1ebb9.mjs";
+import { S as g } from "../chunks/ScopeComponent-3ea00dcd.mjs";
 const k = {
   name: "CalendarBlankIcon",
   emits: ["click"],

package/dist/Components/NcDateTimePickerNative.cjs

@@ -1,5 +1,5 @@
 var D = require("../assets/index-2d4de2fc.css");
-const p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = require("../chunks/ScopeComponent-50287dad.cjs");
+const p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = require("../chunks/ScopeComponent-df4b58b1.cjs");
 const f = ["date", "datetime-local", "month", "time", "week"], y = {
   name: "NcDateTimePickerNative",
   inheritAttrs: !1,

package/dist/Components/NcDateTimePickerNative.mjs

@@ -1,6 +1,6 @@
 import "../assets/index-2d4de2fc.css";
 import { n as p } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { S as c } from "../chunks/ScopeComponent-1ab1ebb9.mjs";
+import { S as c } from "../chunks/ScopeComponent-3ea00dcd.mjs";
 const f = ["date", "datetime-local", "month", "time", "week"], h = {
   name: "NcDateTimePickerNative",
   inheritAttrs: !1,

package/dist/Components/NcEmojiPicker.cjs

@@ -1,5 +1,5 @@
 var j = require("../assets/index-2a8e4ca1.css");
-const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/l10n-f491109d.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
+const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/l10n-e9ffbe5e.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
 let o;
 const m = {
   search: r.t("Search emoji"),

package/dist/Components/NcEmojiPicker.mjs

@@ -1,7 +1,7 @@
 import "../assets/index-2a8e4ca1.css";
 import n from "./NcPopover.mjs";
 import c from "./NcTextField.mjs";
-import { t as r } from "../chunks/l10n-f692947e.mjs";
+import { t as r } from "../chunks/l10n-ef44019c.mjs";
 import { Emoji as l, Picker as u, EmojiIndex as f } from "emoji-mart-vue-fast";
 import p from "emoji-mart-vue-fast/data/all.json";
 import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";

package/dist/Components/NcHeaderMenu.cjs

@@ -1,19 +1,21 @@
 var m = require("../assets/index-3764a447.css");
-const r = require("@vueuse/components"), a = require("focus-trap"), s = require("../chunks/GenRandomId-c214d235.cjs"), o = require("../Mixins/clickOutsideOptions.cjs");
-require("vue");
+const n = require("@vueuse/components"), a = require("focus-trap"), s = require("../chunks/GenRandomId-c214d235.cjs"), o = require("../Mixins/clickOutsideOptions.cjs");
+require("../Composables/useIsFullscreen.cjs");
+require("../Composables/useIsMobile.cjs");
 require("@nextcloud/router");
-/* empty css                                                                                     */const c = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+/* empty css                                                                                     */const u = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 require("linkify-string");
 require("escape-html");
 require("striptags");
+require("vue");
 require("@nextcloud/auth");
 require("@nextcloud/axios");
 require("@nextcloud/capabilities");
-const u = require("../chunks/focusTrap-14985831.cjs");
+const c = require("../chunks/focusTrap-14985831.cjs");
 const d = {
   name: "NcHeaderMenu",
   directives: {
-    ClickOutside: r.vOnClickOutside
+    ClickOutside: n.vOnClickOutside
   },
   mixins: [
     o
@@ -138,7 +140,7 @@ const d = {
       const t = this.$refs.content;
       this.focusTrap = a.createFocusTrap(t, {
         allowOutsideClick: !0,
-        trapStack: u.getTrapStack(),
+        trapStack: c.getTrapStack(),
         fallbackFocus: this.$refs.trigger
       }), this.focusTrap.activate();
     },
@@ -150,10 +152,10 @@ const d = {
 };
 var l = function() {
   var e = this, i = e._self._c;
-  return i(e.wrapperTag, { directives: [{ name: "click-outside", rawName: "v-click-outside", value: e.clickOutsideConfig, expression: "clickOutsideConfig" }], tag: "component", staticClass: "header-menu", class: { "header-menu--opened": e.opened }, attrs: { id: e.id, "aria-labelledby": e.isNav ? e.triggerId : null } }, [i("button", { ref: "trigger", staticClass: "header-menu__trigger button-vue", attrs: { id: e.isNav ? e.triggerId : null, "aria-label": e.ariaLabel, "aria-describedby": e.description ? e.descriptionId : null, "aria-controls": `header-menu-${e.id}`, "aria-expanded": e.opened.toString() }, on: { click: function(n) {
-    return n.preventDefault(), e.toggleMenu.apply(null, arguments);
+  return i(e.wrapperTag, { directives: [{ name: "click-outside", rawName: "v-click-outside", value: e.clickOutsideConfig, expression: "clickOutsideConfig" }], tag: "component", staticClass: "header-menu", class: { "header-menu--opened": e.opened }, attrs: { id: e.id, "aria-labelledby": e.isNav ? e.triggerId : null } }, [i("button", { ref: "trigger", staticClass: "header-menu__trigger button-vue", attrs: { id: e.isNav ? e.triggerId : null, "aria-label": e.ariaLabel, "aria-describedby": e.description ? e.descriptionId : null, "aria-controls": `header-menu-${e.id}`, "aria-expanded": e.opened.toString() }, on: { click: function(r) {
+    return r.preventDefault(), e.toggleMenu.apply(null, arguments);
   } } }, [e._t("trigger")], 2), e.description ? i("span", { staticClass: "header-menu__description hidden-visually", attrs: { id: e.descriptionId } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__carret" }), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__wrapper", attrs: { id: `header-menu-${e.id}` } }, [i("div", { ref: "content", staticClass: "header-menu__content" }, [e._t("default")], 2)])]);
-}, p = [], h = /* @__PURE__ */ c.normalizeComponent(
+}, p = [], h = /* @__PURE__ */ u.normalizeComponent(
   d,
   l,
   p,

package/dist/Components/NcHeaderMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu.cjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 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<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"Start typing to search\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\">\n\t\t<!-- Trigger -->\n\t\t<button :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger button-vue\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t<slot name=\"trigger\" />\n\t\t</button>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t&__trigger {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--header-height);\n\t\theight: var(--header-height);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\topacity: .85;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t&__trigger:focus-visible {\n\t\toutline: none;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tright: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tleft: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\n\t\t&__trigger {\n\t\t\twidth: $clickable-area;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","components","Mixins_clickOutsideOptions","_c","_b","_a","GenRandomId","open","cancelled","event","contentContainer","focusTrap","focusTrap$1"],"mappings":"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"}
+{"version":3,"file":"NcHeaderMenu.cjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 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<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"Start typing to search\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\">\n\t\t<!-- Trigger -->\n\t\t<button :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger button-vue\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t<slot name=\"trigger\" />\n\t\t</button>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t&__trigger {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--header-height);\n\t\theight: var(--header-height);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t\topacity: .85;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t&__trigger:focus-visible {\n\t\toutline: none;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tright: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tleft: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\n\t\t&__trigger {\n\t\t\twidth: $clickable-area;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","components","Mixins_clickOutsideOptions","_c","_b","_a","GenRandomId","open","cancelled","event","contentContainer","focusTrap","focusTrap$1"],"mappings":"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"}