@nextcloud/vue 8.18.0 → 8.19.0

package/dist/chunks/{NcColorPicker-D3b9pIOc.mjs.map → NcColorPicker-Ddm2gbz0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcColorPicker-D3b9pIOc.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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: 34px;\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\" @submit=\"open = false\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :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: 34px;\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: 34px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div role=\"dialog\"\n\t\t\tclass=\"color-picker\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('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<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\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:aria-label=\"name\"\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-else\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 v-if=\"!paletteOnly\" 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-else\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 type=\"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 { defaultPalette } from '../../utils/GenColors.js'\n\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\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 * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\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: () => [...defaultPalette],\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\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\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\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\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\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\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, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-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: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\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: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\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: calc(var(--default-clickable-area) - 10 px);\n\t\t\theight: calc(var(--default-clickable-area) - 10 px);\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":[],"mappings":";;;;;;;;;;;AA4NA,MAAA,YAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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,aAAA;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,MAAA,CAAA,GAAA,cAAA;AAAA,MACA,WAAA,CAAA,YAAA,QAAA;AAAA,QAAA,UACA,OAAA,SAAA,YAAA,UAAA,KAAA,IAAA,KACA,OAAA,SAAA,YAAA,KAAA,SAAA,UAAA,KAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,SAAA,OAAA;AAAA,MACA,SAAA;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,UAAA,EAAA,MAAA;AAAA,MACA,UAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA,KAAA,QAAA,IAAA,CAAA,UAAA;AAAA,QACA,OAAA,OAAA,SAAA,WAAA,KAAA,QAAA;AAAA,QACA,MAAA,OAAA,SAAA,YAAA,KAAA,OACA,KAAA,OACA,EAAA,kCAAA,EAAA,KAAA,KAAA,MAAA,CAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,MAAA;AACA,aAAA,YAAA;AAAA,IACA;AAAA,IACA,gBAAA;AACA,YAAA,QAAA;AACA,YAAA,QAAA;AACA,aAAA,KAAA,cAAA,KAAA,YAAA,IAAA,MAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA,OAAA;AACA,WAAA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA;AACA,WAAA,YAAA;AAEA,WAAA,WAAA;AAAA,IACA;AAAA,IACA,cAAA;AAIA,WAAA,MAAA,OAAA;AACA,WAAA,MAAA,eAAA,KAAA;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,UAAA,OAAA;AACA,UAAA,OAAA,UAAA,UAAA;AACA,gBAAA,KAAA,aAAA;AAAA,MACA;AACA,WAAA,eAAA;AAKA,WAAA,MAAA,gBAAA,KAAA;AAKA,WAAA,MAAA,SAAA,KAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,OAAA;AACA,YAAA,CAAA,KAAA,OAAA,IAAA,IAAA,KAAA,SAAA,KAAA;AACA,cAAA,SAAA,MAAA,SAAA,QAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA,KAAA;AACA,YAAA,SAAA,4CAAA,KAAA,GAAA;AACA,aAAA,SACA,CAAA,SAAA,OAAA,CAAA,GAAA,EAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,CAAA,IACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcColorPicker-Ddm2gbz0.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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: 34px;\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\" @submit=\"open = false\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :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: 34px;\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: 34px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div role=\"dialog\"\n\t\t\tclass=\"color-picker\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('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<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\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:aria-label=\"name\"\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-else\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 v-if=\"!paletteOnly\" 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-else\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 type=\"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 { defaultPalette } from '../../utils/GenColors.js'\n\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\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 * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\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: () => [...defaultPalette],\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\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\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\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\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\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\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, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-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: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\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: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\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: calc(var(--default-clickable-area) - 10 px);\n\t\t\theight: calc(var(--default-clickable-area) - 10 px);\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\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\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":[],"mappings":"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"}

package/dist/chunks/{NcColorPicker-CmHTPv60.cjs → NcColorPicker-Dy2BtsaH.cjs}

@@ -1,4 +1,4 @@
-require('../assets/NcColorPicker-CpkfRGO1.css');
+require('../assets/NcColorPicker-aCjZY65-.css');
 "use strict";
 const Components_NcButton = require("../Components/NcButton.cjs");
 const NcPopover = require("./NcPopover-C0G7sLVP.cjs");
@@ -182,7 +182,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "cc496c1d"
+  "f18af466"
 );
 const NcColorPicker = __component__.exports;
 exports.NcColorPicker = NcColorPicker;

package/dist/chunks/{NcColorPicker-CmHTPv60.cjs.map → NcColorPicker-Dy2BtsaH.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcColorPicker-CmHTPv60.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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: 34px;\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\" @submit=\"open = false\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :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: 34px;\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: 34px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div role=\"dialog\"\n\t\t\tclass=\"color-picker\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('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<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\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:aria-label=\"name\"\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-else\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 v-if=\"!paletteOnly\" 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-else\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 type=\"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 { defaultPalette } from '../../utils/GenColors.js'\n\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\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 * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\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: () => [...defaultPalette],\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\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\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\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\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\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\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, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-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: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\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: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\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: calc(var(--default-clickable-area) - 10 px);\n\t\t\theight: calc(var(--default-clickable-area) - 10 px);\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":["ArrowLeft","Check","Chrome","DotsHorizontal","NcButton","NcPopover","defaultPalette","t","GenRandomId"],"mappings":"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"}
+{"version":3,"file":"NcColorPicker-Dy2BtsaH.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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: 34px;\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\" @submit=\"open = false\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :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: 34px;\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: 34px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div role=\"dialog\"\n\t\t\tclass=\"color-picker\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('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<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\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:aria-label=\"name\"\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-else\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 v-if=\"!paletteOnly\" 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-else\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 type=\"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 { defaultPalette } from '../../utils/GenColors.js'\n\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\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 * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\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: () => [...defaultPalette],\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\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\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\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\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\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\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, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-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: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\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: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\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: calc(var(--default-clickable-area) - 10 px);\n\t\t\theight: calc(var(--default-clickable-area) - 10 px);\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\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\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":["ArrowLeft","Check","Chrome","DotsHorizontal","NcButton","NcPopover","defaultPalette","t","GenRandomId"],"mappings":"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"}

package/dist/chunks/{NcDashboardWidget-CANAYcCa.mjs → NcDashboardWidget-DG9u5NLf.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcDashboardWidget-CpstyXok.css';
-import { N as NcAvatar } from "./NcAvatar-DlrXmAED.mjs";
-import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-BwJAiaT0.mjs";
+import { N as NcAvatar } from "./NcAvatar-lRUjWiR6.mjs";
+import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-CHCygvjp.mjs";
 import NcEmptyContent from "../Components/NcEmptyContent.mjs";
 import { C as Check } from "./Check-XHAzUBkX.mjs";
 import { r as register, l as t33, a as t } from "./_l10n-JYjUKekn.mjs";

package/dist/chunks/{NcDashboardWidget-CANAYcCa.mjs.map → NcDashboardWidget-DG9u5NLf.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget-CANAYcCa.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t}\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidget-DG9u5NLf.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t}\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidget-DLcO9TSj.cjs → NcDashboardWidget-DhVJqy1d.cjs}

@@ -1,7 +1,7 @@
 require('../assets/NcDashboardWidget-CpstyXok.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-U5nqf05n.cjs");
-const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-vNvbUHBP.cjs");
+const NcAvatar = require("./NcAvatar-B238cv9d.cjs");
+const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-DuntgAlo.cjs");
 const Components_NcEmptyContent = require("../Components/NcEmptyContent.cjs");
 const Check = require("./Check-fCbe4vqy.cjs");
 const _l10n = require("./_l10n-Ci9_UR5q.cjs");

package/dist/chunks/{NcDashboardWidget-DLcO9TSj.cjs.map → NcDashboardWidget-DhVJqy1d.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget-DLcO9TSj.cjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t}\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcAvatar","NcDashboardWidgetItem","NcEmptyContent","Check","t"],"mappings":";;;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,uBAAAC,sBAAA;AAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidget-DhVJqy1d.cjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t}\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcAvatar","NcDashboardWidgetItem","NcEmptyContent","Check","t"],"mappings":";;;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,uBAAAC,sBAAA;AAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidgetItem-BwJAiaT0.mjs → NcDashboardWidgetItem-CHCygvjp.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcDashboardWidgetItem-BBZT17WU.css';
-import { N as NcAvatar } from "./NcAvatar-DlrXmAED.mjs";
-import { N as NcActions } from "./NcActions-BeDyeq8X.mjs";
+import { N as NcAvatar } from "./NcAvatar-lRUjWiR6.mjs";
+import { N as NcActions } from "./NcActions-BgYpDq2n.mjs";
 import NcActionButton from "../Components/NcActionButton.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidgetItem-BwJAiaT0.mjs.map → NcDashboardWidgetItem-CHCygvjp.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem-BwJAiaT0.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":[],"mappings":";;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidgetItem-CHCygvjp.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":[],"mappings":";;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidgetItem-vNvbUHBP.cjs → NcDashboardWidgetItem-DuntgAlo.cjs}

@@ -1,7 +1,7 @@
 require('../assets/NcDashboardWidgetItem-BBZT17WU.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-U5nqf05n.cjs");
-const NcActions = require("./NcActions-BAP2SRwO.cjs");
+const NcAvatar = require("./NcAvatar-B238cv9d.cjs");
+const NcActions = require("./NcActions-gOMT5VzC.cjs");
 const Components_NcActionButton = require("../Components/NcActionButton.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidgetItem-vNvbUHBP.cjs.map → NcDashboardWidgetItem-DuntgAlo.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem-vNvbUHBP.cjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["NcAvatar","NcActions","NcActionButton"],"mappings":";;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,WAAAC,UAAA;AAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidgetItem-DuntgAlo.cjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["NcAvatar","NcActions","NcActionButton"],"mappings":";;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,WAAAC,UAAA;AAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcEmojiPicker-DqaJO21R.mjs → NcEmojiPicker-C2DIjkqr.mjs}

@@ -6,7 +6,7 @@ import { C as Color } from "./GenColors-BWE946ht.mjs";
 import data from "emoji-mart-vue-fast/data/all.json";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-D3b9pIOc.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-Ddm2gbz0.mjs";
 import { N as NcPopover } from "./NcPopover-DbeCmze0.mjs";
 import { N as NcTextField } from "./NcTextField-CmXmPZ4h.mjs";
 register(t6, t15, t35, t40);

package/dist/chunks/{NcEmojiPicker-DqaJO21R.mjs.map → NcEmojiPicker-C2DIjkqr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker-DqaJO21R.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t@update:value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" type=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport { t } from '../../l10n.js'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { Color } from '../../utils/GenColors.js'\n\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.js'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\t}\n\t\t}\n\t\tbutton {\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\t}\n\t\t}\n\t}\n\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search {\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px; // for focus-visible outlines\n\t\talign-items: end;\n\t\tpadding: 4px 8px;\n\t}\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"NcEmojiPicker-C2DIjkqr.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t@update:value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" type=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport { t } from '../../l10n.js'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { Color } from '../../utils/GenColors.js'\n\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.js'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\t}\n\t\t}\n\t\tbutton {\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\t}\n\t\t}\n\t}\n\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search {\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px; // for focus-visible outlines\n\t\talign-items: end;\n\t\tpadding: 4px 8px;\n\t}\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcEmojiPicker-DV7HDeqU.cjs → NcEmojiPicker-DrMA-XDR.cjs}

@@ -7,7 +7,7 @@ const GenColors = require("./GenColors-Cay7TLwO.cjs");
 const data = require("emoji-mart-vue-fast/data/all.json");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const Components_NcButton = require("../Components/NcButton.cjs");
-const NcColorPicker = require("./NcColorPicker-CmHTPv60.cjs");
+const NcColorPicker = require("./NcColorPicker-Dy2BtsaH.cjs");
 const NcPopover = require("./NcPopover-C0G7sLVP.cjs");
 const NcTextField = require("./NcTextField-BnZnDMjV.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };