npm - @nextcloud/vue - Versions diffs - 9.8.1 → 9.8.2 - Mend

@nextcloud/vue 9.8.1 → 9.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/dist/chunks/{NcColorPicker-D6NbBOX3.mjs.map → NcColorPicker-CGE4Kei4.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcColorPicker-D6NbBOX3.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-model 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 v-model=\"color\" v-model:open=\"open\" 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}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Allowing to clear the selected color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcColorPicker clearable v-model=\"color\">\n\t\t\t<NcButton>Click Me</NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color-preview\" :class=\"{'color-preview--none': !color}\" />\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}\n</script>\n<style scoped>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color-preview {\n\twidth: 100px;\n\theight: 34px;\n\tborder: 1px solid black;\n\tborder-radius: 6px;\n}\n\n.color-preview--none {\n\tbackground: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;\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\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Payload } from '@ckpack/vue-color'\nimport type { Color } from '../../utils/colors.ts'\n\nimport { Chrome as VueChrome } from '@ckpack/vue-color'\nimport { mdiArrowLeft, mdiCheck, mdiCloseCircleOutline, mdiDotsHorizontal } from '@mdi/js'\nimport { computed, ref } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { COLOR_BLACK, COLOR_WHITE, defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcPopover from '../NcPopover/index.js'\n\n/*\n A HEX color that represents the initial value of the picker.\n \n If the `clearable` prop is set then also `undefined` might be given or emitted for when the color gets cleared.\n /\nconst currentColor = defineModel<string \| undefined>({ required: true })\n\n/\n The open state of the color picker.\n /\nconst open = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/\n\t Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t /\n\tadvancedFields?: boolean\n\n\t/\n\t Allow to clear the current color.\n\t * When set the `update:modelValue` and `submit` event might emit also `undefined`.\n\t /\n\tclearable?: boolean\n\n\t/\n\t Selector for the popover container\n\t /\n\tcontainer?: string \| Element\n\n\t/\n\t Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t \n\t @type {string[] \| {color: string, name: string}[]}\n\t /\n\tpalette?: string[] \| Color[]\n\n\t/\n\t Limit selectable colors to only the provided palette\n\t /\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [],\n})\n\nconst emit = defineEmits<{\n\t/\n\t Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t \n\t The value might be undefined if the `clearable` prop is set.\n\t /\n\tsubmit: [string \| undefined]\n\n\t/\n\t The color picker was fully closed and all transitions are finished.\n\t /\n\tclosed: []\n}>()\n\nconst HEX_REGEX = /^#([a-f0-9]{3}\|[a-f0-9]{6})$/i\n\n/\n Unique id used to identify different color pickers\n /\nconst id = createElementId()\n\n/\n Is the advanced picker is open\n /\nconst advanced = ref(false)\n\n/\n Normalized palette by converting array of hex colors to color objects.\n * This also ensures there is a default palette if needed (no palette passed).\n /\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t\|\| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = []\n\t\t\tbreak\n\t\t}\n\t}\n\n\tif (palette.length === 0) {\n\t\tpalette = props.clearable\n\t\t\t? [...defaultPalette, COLOR_BLACK, COLOR_WHITE]\n\t\t\t: [...defaultPalette]\n\t}\n\n\treturn palette.map((item: Color \| string) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: typeof item === 'string' ? item : item.color }),\n\t}))\n})\n\n/\n Submit a picked colour and close picker\n \n @param hideCallback - callback to close popover\n /\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/\n Toggle the currently selected palette color.\n \n @param color - The color to toggle\n /\nfunction toggleColor(color: string \| Color) {\n\tcolor = typeof color === 'string' ? color : color.color\n\n\tif (props.clearable && currentColor.value === color) {\n\t\tcurrentColor.value = undefined\n\t} else {\n\t\tcurrentColor.value = color\n\t}\n}\n\n/\n @param color - The picked color from the Chrome component\n /\nfunction pickCustomColor(color: Payload): void {\n\tcurrentColor.value = color.hex\n}\n\n/\n Get the text color with the most constrast for a given background color.\n \n @param color - The background color\n /\nfunction getContrastColor(color: string): string {\n\treturn calculateLuma(color) > 0.5\n\t\t? COLOR_BLACK.color\n\t\t: COLOR_WHITE.color\n}\n\n/\n Calculate luminance of provided hex color\n \n @param color - The hex color\n /\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/*\n Convert hex color to RGB\n \n @param hex - The hex color\n /\nfunction hexToRGB(hex: string): [number, number, number] {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\tif (!result) {\n\t\treturn [0, 0, 0]\n\t}\n\n\treturn [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]\n}\n</script>\n\n<template>\n\t<NcPopover\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopupRole=\"dialog\"\n\t\t@applyHide=\"emit('closed')\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'color-picker--advanced-fields': advanced && advancedFields,\n\t\t\t\t\t'color-picker--clearable': clearable,\n\t\t\t\t}\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: getContrastColor(color),\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"toggleColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label v-if=\"clearable\" class=\"color-picker__clear\" :title=\"t('No color')\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t:size=\"currentColor ? 28 : 34 / size is adusted so that inner mdi icon aligns with color circles /\"\n\t\t\t\t\t\t\t\t:path=\"mdiCloseCircleOutline\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('No color')\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"!currentColor\"\n\t\t\t\t\t\t\t\t@click=\"currentColor = undefined\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<VueChrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\tdisableAlpha\n\t\t\t\t\t\t:disableFields=\"!advancedFields\"\n\t\t\t\t\t\t:modelValue=\"currentColor ?? '#000000'\"\n\t\t\t\t\t\t@update:modelValue=\"pickCustomColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"t('Back')\"\n\t\t\t\t\t\t:title=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"t('More options')\"\n\t\t\t\t\t\t:title=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\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\tpadding: var(--border-radius-element); // align with NcPopover border radius\n\tmin-width: calc(4 var(--default-clickable-area) + 2 * var(--border-radius-element)); // space for 4 color circles\n\n\t&--clearable {\n\t\tmin-width: calc(5 * var(--default-clickable-area) + 2 * var(--border-radius-element));\n\t}\n\n\t&--advanced-fields {\n\t\tmin-width: 264px;\n\t}\n\n\t&__clear {\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:has(:checked)) {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\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\tgap: var(--default-grid-baseline);\n\t\tjustify-content: space-between;\n\t\tmargin-top: calc(2 * var(--default-grid-baseline));\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\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);\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-element) + 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-element) - 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: var(--font-weight-element, 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-inline-start: 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-from {\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-from {\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":["_useModel","_createBlock","_unref","_withCtx","_renderSlot","_createElementVNode","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_normalizeClass","_normalizeStyle","VueChrome"],"mappings":"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"}
1	+ {"version":3,"file":"NcColorPicker-CGE4Kei4.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-model 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 v-model=\"color\" v-model:open=\"open\" 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}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Allowing to clear the selected color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcColorPicker clearable v-model=\"color\">\n\t\t\t<NcButton>Click Me</NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color-preview\" :class=\"{'color-preview--none': !color}\" />\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}\n</script>\n<style scoped>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color-preview {\n\twidth: 100px;\n\theight: 34px;\n\tborder: 1px solid black;\n\tborder-radius: 6px;\n}\n\n.color-preview--none {\n\tbackground: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;\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\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Payload } from '@ckpack/vue-color'\nimport type { Color } from '../../utils/colors.ts'\n\nimport { Chrome as VueChrome } from '@ckpack/vue-color'\nimport { mdiArrowLeft, mdiCheck, mdiCloseCircleOutline, mdiDotsHorizontal } from '@mdi/js'\nimport { computed, ref } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { COLOR_BLACK, COLOR_WHITE, defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcPopover from '../NcPopover/index.js'\n\n/*\n A HEX color that represents the initial value of the picker.\n \n If the `clearable` prop is set then also `undefined` might be given or emitted for when the color gets cleared.\n /\nconst currentColor = defineModel<string \| undefined>({ required: true })\n\n/\n The open state of the color picker.\n /\nconst open = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/\n\t Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t /\n\tadvancedFields?: boolean\n\n\t/\n\t Allow to clear the current color.\n\t * When set the `update:modelValue` and `submit` event might emit also `undefined`.\n\t /\n\tclearable?: boolean\n\n\t/\n\t Selector for the popover container\n\t /\n\tcontainer?: string \| Element\n\n\t/\n\t Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t \n\t @type {string[] \| {color: string, name: string}[]}\n\t /\n\tpalette?: string[] \| Color[]\n\n\t/\n\t Limit selectable colors to only the provided palette\n\t /\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [],\n})\n\nconst emit = defineEmits<{\n\t/\n\t Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t \n\t The value might be undefined if the `clearable` prop is set.\n\t /\n\tsubmit: [string \| undefined]\n\n\t/\n\t The color picker was fully closed and all transitions are finished.\n\t /\n\tclosed: []\n}>()\n\nconst HEX_REGEX = /^#([a-f0-9]{3}\|[a-f0-9]{6})$/i\n\n/\n Unique id used to identify different color pickers\n /\nconst id = createElementId()\n\n/\n Is the advanced picker is open\n /\nconst advanced = ref(false)\n\n/\n Normalized palette by converting array of hex colors to color objects.\n * This also ensures there is a default palette if needed (no palette passed).\n /\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t\|\| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = []\n\t\t\tbreak\n\t\t}\n\t}\n\n\tif (palette.length === 0) {\n\t\tpalette = props.clearable\n\t\t\t? [...defaultPalette, COLOR_BLACK, COLOR_WHITE]\n\t\t\t: [...defaultPalette]\n\t}\n\n\treturn palette.map((item: Color \| string) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: typeof item === 'string' ? item : item.color }),\n\t}))\n})\n\n/\n Submit a picked colour and close picker\n \n @param hideCallback - callback to close popover\n /\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/\n Toggle the currently selected palette color.\n \n @param color - The color to toggle\n /\nfunction toggleColor(color: string \| Color) {\n\tcolor = typeof color === 'string' ? color : color.color\n\n\tif (props.clearable && currentColor.value === color) {\n\t\tcurrentColor.value = undefined\n\t} else {\n\t\tcurrentColor.value = color\n\t}\n}\n\n/\n @param color - The picked color from the Chrome component\n /\nfunction pickCustomColor(color: Payload): void {\n\tcurrentColor.value = color.hex\n}\n\n/\n Get the text color with the most constrast for a given background color.\n \n @param color - The background color\n /\nfunction getContrastColor(color: string): string {\n\treturn calculateLuma(color) > 0.5\n\t\t? COLOR_BLACK.color\n\t\t: COLOR_WHITE.color\n}\n\n/\n Calculate luminance of provided hex color\n \n @param color - The hex color\n /\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/*\n Convert hex color to RGB\n \n @param hex - The hex color\n /\nfunction hexToRGB(hex: string): [number, number, number] {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\tif (!result) {\n\t\treturn [0, 0, 0]\n\t}\n\n\treturn [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]\n}\n</script>\n\n<template>\n\t<NcPopover\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopupRole=\"dialog\"\n\t\t@applyHide=\"emit('closed')\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'color-picker--advanced-fields': advanced && advancedFields,\n\t\t\t\t\t'color-picker--clearable': clearable,\n\t\t\t\t}\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: getContrastColor(color),\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"toggleColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label v-if=\"clearable\" class=\"color-picker__clear\" :title=\"t('No color')\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t:size=\"currentColor ? 28 : 34 / size is adusted so that inner mdi icon aligns with color circles /\"\n\t\t\t\t\t\t\t\t:path=\"mdiCloseCircleOutline\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('No color')\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"!currentColor\"\n\t\t\t\t\t\t\t\t@click=\"currentColor = undefined\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<VueChrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\tdisableAlpha\n\t\t\t\t\t\t:disableFields=\"!advancedFields\"\n\t\t\t\t\t\t:modelValue=\"currentColor ?? '#000000'\"\n\t\t\t\t\t\t@update:modelValue=\"pickCustomColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"t('Back')\"\n\t\t\t\t\t\t:title=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"t('More options')\"\n\t\t\t\t\t\t:title=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\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\tpadding: var(--border-radius-element); // align with NcPopover border radius\n\tmin-width: calc(4 var(--default-clickable-area) + 2 * var(--border-radius-element)); // space for 4 color circles\n\n\t&--clearable {\n\t\tmin-width: calc(5 * var(--default-clickable-area) + 2 * var(--border-radius-element));\n\t}\n\n\t&--advanced-fields {\n\t\tmin-width: 264px;\n\t}\n\n\t&__clear {\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:has(:checked)) {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\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\tgap: var(--default-grid-baseline);\n\t\tjustify-content: space-between;\n\t\tmargin-top: calc(2 * var(--default-grid-baseline));\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\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);\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-element) + 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-element) - 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: var(--font-weight-element, 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-inline-start: 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-from {\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-from {\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":["_useModel","_createBlock","_unref","_withCtx","_renderSlot","_createElementVNode","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_normalizeClass","_normalizeStyle","VueChrome"],"mappings":"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"}

package/dist/chunks/{NcDashboardWidget-ftOfMTzx.mjs → NcDashboardWidget-DKZ8Mgt0.mjs} RENAMED Viewed

@@ -2,8 +2,8 @@ import '../assets/NcDashboardWidget-nZuIL1UN.css';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createBlock, withCtx, renderSlot, createVNode, Fragment, renderList, toHandlers } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { r as register, z as t35, a as t } from "./_l10n-CG4CuN3H.mjs";
-import { N as NcAvatar } from "./NcAvatar-M3-CbKbq.mjs";
-import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-BwwFiNOL.mjs";
+import { N as NcAvatar } from "./NcAvatar-DX-Nk9Es.mjs";
+import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-DxA6-V0R.mjs";
 import { N as NcEmptyContent } from "./NcEmptyContent-CGAPqk4S.mjs";
 const _sfc_main$1 = {
   name: "CheckIcon",
@@ -224,4 +224,4 @@ const NcDashboardWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sf
 export {
   NcDashboardWidget as N
 };
-//# sourceMappingURL=NcDashboardWidget-ftOfMTzx.mjs.map
+//# sourceMappingURL=NcDashboardWidget-DKZ8Mgt0.mjs.map

package/dist/chunks/{NcDashboardWidget-ftOfMTzx.mjs.map → NcDashboardWidget-DKZ8Mgt0.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDashboardWidget-ftOfMTzx.mjs","sources":["../../node_modules/vue-material-design-icons/Check.vue","../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon check-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=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckIcon\",\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## 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://example.tld',\n\t\tavatarUrl: 'https://example.tld/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://example.tld',\n\t\tavatarUrl: 'https://example.tld/img.jpg',\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\n\t\t\tv-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\n\t\t\t\t\t\tv-bind=\"item\"\n\t\t\t\t\t\t:itemMenu=\"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> </h3>\n\t\t\t\t\t<p class=\"message\">\n \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\n\t\t\t\tv-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\n\t\t\tv-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 Check from 'vue-material-design-icons/Check.vue'\nimport { t } from '../../l10n.ts'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\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\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\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\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\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\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\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\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\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-element);\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-block: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 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":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_renderSlot","_createVNode","_Fragment","_renderList","_toHandlers"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"NcDashboardWidget-DKZ8Mgt0.mjs","sources":["../../node_modules/vue-material-design-icons/Check.vue","../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon check-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=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckIcon\",\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## 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://example.tld',\n\t\tavatarUrl: 'https://example.tld/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://example.tld',\n\t\tavatarUrl: 'https://example.tld/img.jpg',\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\n\t\t\tv-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\n\t\t\t\t\t\tv-bind=\"item\"\n\t\t\t\t\t\t:itemMenu=\"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> </h3>\n\t\t\t\t\t<p class=\"message\">\n \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\n\t\t\t\tv-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\n\t\t\tv-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 Check from 'vue-material-design-icons/Check.vue'\nimport { t } from '../../l10n.ts'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\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\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\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\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\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\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\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\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\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-element);\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-block: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 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":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_renderSlot","_createVNode","_Fragment","_renderList","_toHandlers"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcDashboardWidgetItem-BwwFiNOL.mjs → NcDashboardWidgetItem-DxA6-V0R.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import '../assets/NcDashboardWidgetItem-DpVmEBwQ.css';
 import { N as NcActionButton } from "./NcActionButton-BO5T5ePT.mjs";
-import { N as NcActions } from "./NcActions-CUmcZ3C3.mjs";
-import { N as NcAvatar } from "./NcAvatar-M3-CbKbq.mjs";
+import { N as NcActions } from "./NcActions-DY4GGONi.mjs";
+import { N as NcAvatar } from "./NcAvatar-DX-Nk9Es.mjs";
 import { resolveComponent, openBlock, createElementBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createVNode, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, withModifiers, createTextVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -195,4 +195,4 @@ const NcDashboardWidgetItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcDashboardWidgetItem as N
 };
-//# sourceMappingURL=NcDashboardWidgetItem-BwwFiNOL.mjs.map
+//# sourceMappingURL=NcDashboardWidgetItem-DxA6-V0R.mjs.map

package/dist/chunks/{NcDashboardWidgetItem-BwwFiNOL.mjs.map → NcDashboardWidgetItem-DxA6-V0R.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDashboardWidgetItem-~~BwwFiNOL~~.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\n\t\t\t:is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl \|\| undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\tclass=\"item-list__entry\"\n\t\t\t:class=\"{ '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\" :avatarUrl=\"avatarUrl\" :avatarUsername=\"avatarUsername\">\n\t\t\t\t<NcAvatar\n\t\t\t\t\tclass=\"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:isNoUser=\"avatarIsNoUser\"\n\t\t\t\t\t:hideStatus=\"gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img\n\t\t\t\tv-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\" :forceMenu=\"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\n\t\t\t\t\t\tv-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:closeAfterClick=\"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 NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcAvatar from '../NcAvatar/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\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\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\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\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\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\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\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\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\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 \|\| !!this.$slots.actions\n\t\t},\n\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-element);\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-inline-start: 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-top: 25px;\n\t\tmargin-inline: -10px -2px;\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-inline: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot","_createVNode","_createElementVNode","_Fragment","_renderList","_withModifiers","_createTextVNode","_toDisplayString"],"mappings":"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"}
1	+ {"version":3,"file":"NcDashboardWidgetItem-DxA6-V0R.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\n\t\t\t:is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl \|\| undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\tclass=\"item-list__entry\"\n\t\t\t:class=\"{ '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\" :avatarUrl=\"avatarUrl\" :avatarUsername=\"avatarUsername\">\n\t\t\t\t<NcAvatar\n\t\t\t\t\tclass=\"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:isNoUser=\"avatarIsNoUser\"\n\t\t\t\t\t:hideStatus=\"gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img\n\t\t\t\tv-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\" :forceMenu=\"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\n\t\t\t\t\t\tv-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:closeAfterClick=\"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 NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcAvatar from '../NcAvatar/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\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\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\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\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\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\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\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\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\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 \|\| !!this.$slots.actions\n\t\t},\n\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-element);\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-inline-start: 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-top: 25px;\n\t\tmargin-inline: -10px -2px;\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-inline: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot","_createVNode","_createElementVNode","_Fragment","_renderList","_withModifiers","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/{NcDialog-kwzJ3A4X.mjs → NcDialog-D1u-qo74.mjs} RENAMED Viewed

@@ -3,7 +3,7 @@ import { defineComponent, useModel, useSlots, useTemplateRef, computed, ref, ope
 import { useElementSize } from "@vueuse/core";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-Cn-8O9iZ.mjs";
-import { N as NcModal } from "./NcModal-DUWLRm_F.mjs";
+import { N as NcModal } from "./NcModal-B-YLND3e.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id", "textContent"];
 const _hoisted_2 = ["aria-label", "aria-labelledby"];
@@ -163,4 +163,4 @@ const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2
 export {
   NcDialog as N
 };
-//# sourceMappingURL=NcDialog-kwzJ3A4X.mjs.map
+//# sourceMappingURL=NcDialog-D1u-qo74.mjs.map

package/dist/chunks/{NcDialog-kwzJ3A4X.mjs.map → NcDialog-D1u-qo74.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDialog-kwzJ3A4X.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the button will not be disabled or accessibility reasons,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDialogButton from '../NcDialogButton/index.ts'\nimport NcModal from '../NcModal/index.js'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\n/*\n Whether the dialog should be shown\n /\nconst open = defineModel<boolean>('open', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/* Name of the dialog (the heading) /\n\tname: string\n\n\t/* Text of the dialog /\n\tmessage?: string\n\n\t/* Additional elements to add to the focus trap /\n\tadditionalTrapElements?: Array<string \| HTMLElement>\n\n\t/\n\t The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t /\n\tcontainer?: string\n\n\t/\n\t Size of the underlying NcModal\n\t /\n\tsize?: 'small' \| 'normal' \| 'large' \| 'full'\n\n\t/\n\t Buttons to display\n\t /\n\tbuttons?: NcDialogButtonProps[]\n\n\t/\n\t Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t /\n\tisForm?: boolean\n\n\t/\n\t Do not show the close button for the dialog.\n\t /\n\tnoClose?: boolean\n\n\t/\n\t Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t /\n\tcloseOnClickOutside?: boolean\n\n\t/\n\t Declare if hiding the modal should be animated\n\t /\n\toutTransition?: boolean\n\n\t/\n\t aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t \n\t By default, navigation is labeled by the dialog name.\n\t /\n\tnavigationAriaLabel?: string\n\n\t/\n\t aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t \n\t By default, navigation is labeled by the dialog name.\n\t /\n\tnavigationAriaLabelledby?: string\n\n\t/\n\t Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t /\n\tcontentClasses?: VueClassType\n\n\t/\n\t Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t /\n\tdialogClasses?: VueClassType\n\n\t/\n\t Optionally pass additional classes which will be set on the navigation for custom styling\n\t \n\t @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t * flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t /\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\nconst emit = defineEmits<{\n\t/\n\t Emitted when the dialog is closing, so the out transition did not finish yet.\n\t \n\t @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t /\n\tclosing: [result?: unknown]\n\t/\n\t Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t \n\t @param event - The forwarded form event\n\t /\n\treset: [event: Event]\n\t/\n\t Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t \n\t @param event - The submit event\n\t /\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/\n The dialog wrapper element\n /\nconst wrapperElement = useTemplateRef('wrapper')\n\n/\n We use the dialog width to decide if we collapse the navigation (flex direction row)\n /\nconst { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 })\n\n/\n Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n /\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/\n Whether a navigation was passed and the element should be displayed\n /\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/\n The unique id of the nav element\n /\nconst navigationId = createElementId()\n\n/\n aria-label attribute for the nav element\n /\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel \|\| undefined)\n\n/\n aria-labelledby attribute for the nav element\n /\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby \|\| navigationId\n})\n\nconst dialogRootElement = useTemplateRef<HTMLDivElement \| HTMLFormElement>('dialogElement')\n/\n The HTML element to use for the dialog wrapper - either form or plain div\n /\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/\n Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n /\nconst dialogListeners = computed(() => {\n\tif (dialogTagName.value !== 'form') {\n\t\treturn {}\n\t}\n\n\treturn {\n\t\t/\n\t\t @param event - Form submit event\n\t\t /\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/\n\t\t @param event - Form submit event\n\t\t /\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n})\n\n/\n If the underlying modal is shown\n /\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/\n Handle clicking a dialog button -> should close\n \n @param button - The button that was clicked\n * @param result - Result of the callback function\n /\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogRootElement.value!\n\t\t&& !dialogRootElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/\n Handle closing the dialog, optional out transition did not run yet\n \n @param result - The result of the callback\n /\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/\n Handle dialog closed (out transition finished)\n /\nfunction handleClosed() {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/\n Properties to pass to the underlying NcModal\n /\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal\n\t\tv-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\tdisableSwipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component\n\t\t\t:is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" class=\"dialog__wrapper\" :class=\"[{ 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav\n\t\t\t\t\tv-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :isCollapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton\n\t\t\t\t\t\tv-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/* When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","_resolveDynamicComponent","_toHandlers","_normalizeClass","_createElementBlock","_renderSlot","_Fragment","_renderList"],"mappings":"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"}
1	+ {"version":3,"file":"NcDialog-D1u-qo74.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the button will not be disabled or accessibility reasons,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDialogButton from '../NcDialogButton/index.ts'\nimport NcModal from '../NcModal/index.js'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\n/*\n Whether the dialog should be shown\n /\nconst open = defineModel<boolean>('open', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/* Name of the dialog (the heading) /\n\tname: string\n\n\t/* Text of the dialog /\n\tmessage?: string\n\n\t/* Additional elements to add to the focus trap /\n\tadditionalTrapElements?: Array<string \| HTMLElement>\n\n\t/\n\t The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t /\n\tcontainer?: string\n\n\t/\n\t Size of the underlying NcModal\n\t /\n\tsize?: 'small' \| 'normal' \| 'large' \| 'full'\n\n\t/\n\t Buttons to display\n\t /\n\tbuttons?: NcDialogButtonProps[]\n\n\t/\n\t Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t /\n\tisForm?: boolean\n\n\t/\n\t Do not show the close button for the dialog.\n\t /\n\tnoClose?: boolean\n\n\t/\n\t Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t /\n\tcloseOnClickOutside?: boolean\n\n\t/\n\t Declare if hiding the modal should be animated\n\t /\n\toutTransition?: boolean\n\n\t/\n\t aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t \n\t By default, navigation is labeled by the dialog name.\n\t /\n\tnavigationAriaLabel?: string\n\n\t/\n\t aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t \n\t By default, navigation is labeled by the dialog name.\n\t /\n\tnavigationAriaLabelledby?: string\n\n\t/\n\t Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t /\n\tcontentClasses?: VueClassType\n\n\t/\n\t Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t /\n\tdialogClasses?: VueClassType\n\n\t/\n\t Optionally pass additional classes which will be set on the navigation for custom styling\n\t \n\t @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t * flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t /\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\nconst emit = defineEmits<{\n\t/\n\t Emitted when the dialog is closing, so the out transition did not finish yet.\n\t \n\t @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t /\n\tclosing: [result?: unknown]\n\t/\n\t Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t \n\t @param event - The forwarded form event\n\t /\n\treset: [event: Event]\n\t/\n\t Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t \n\t @param event - The submit event\n\t /\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/\n The dialog wrapper element\n /\nconst wrapperElement = useTemplateRef('wrapper')\n\n/\n We use the dialog width to decide if we collapse the navigation (flex direction row)\n /\nconst { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 })\n\n/\n Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n /\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/\n Whether a navigation was passed and the element should be displayed\n /\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/\n The unique id of the nav element\n /\nconst navigationId = createElementId()\n\n/\n aria-label attribute for the nav element\n /\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel \|\| undefined)\n\n/\n aria-labelledby attribute for the nav element\n /\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby \|\| navigationId\n})\n\nconst dialogRootElement = useTemplateRef<HTMLDivElement \| HTMLFormElement>('dialogElement')\n/\n The HTML element to use for the dialog wrapper - either form or plain div\n /\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/\n Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n /\nconst dialogListeners = computed(() => {\n\tif (dialogTagName.value !== 'form') {\n\t\treturn {}\n\t}\n\n\treturn {\n\t\t/\n\t\t @param event - Form submit event\n\t\t /\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/\n\t\t @param event - Form submit event\n\t\t /\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n})\n\n/\n If the underlying modal is shown\n /\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/\n Handle clicking a dialog button -> should close\n \n @param button - The button that was clicked\n * @param result - Result of the callback function\n /\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogRootElement.value!\n\t\t&& !dialogRootElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/\n Handle closing the dialog, optional out transition did not run yet\n \n @param result - The result of the callback\n /\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/\n Handle dialog closed (out transition finished)\n /\nfunction handleClosed() {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/\n Properties to pass to the underlying NcModal\n /\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal\n\t\tv-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\tdisableSwipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component\n\t\t\t:is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" class=\"dialog__wrapper\" :class=\"[{ 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav\n\t\t\t\t\tv-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :isCollapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton\n\t\t\t\t\t\tv-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/* When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","_resolveDynamicComponent","_toHandlers","_normalizeClass","_createElementBlock","_renderSlot","_Fragment","_renderList"],"mappings":"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"}

package/dist/chunks/{NcEmojiPicker-Bpw-68QP.mjs → NcEmojiPicker-R2GSAiCW.mjs} RENAMED Viewed

@@ -4,13 +4,13 @@ import { Picker, Emoji, EmojiIndex } from "emoji-mart-vue-fast/src/index.js";
 import { isFocusable } from "tabbable";
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createBlock, withCtx, createVNode, withKeys, withModifiers, createSlots, normalizeStyle, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-D6NbBOX3.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-CGE4Kei4.mjs";
 import { u as useTrapStackControl } from "./useTrapStackControl-B6cEicto.mjs";
 import { s as setCurrentSkinTone, g as getCurrentSkinTone } from "./emoji-C8k9NUlo.mjs";
 import { r as register, q as t43, s as t37, u as t16, v as t5, a as t } from "./_l10n-CG4CuN3H.mjs";
 import { C as Color } from "./colors-BDeMBgfq.mjs";
 import { N as NcButton } from "./NcButton-QbPBynlU.mjs";
-import { N as NcPopover } from "./NcPopover-CtdLAkEU.mjs";
+import { N as NcPopover } from "./NcPopover-CObDh89q.mjs";
 import { _ as _sfc_main$2 } from "./NcTextField.vue_vue_type_script_setup_true_lang-BQHjkK8r.mjs";
 const _sfc_main$1 = {
   name: "CircleIcon",
@@ -403,4 +403,4 @@ const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_re
 export {
   NcEmojiPicker as N
 };
-//# sourceMappingURL=NcEmojiPicker-Bpw-68QP.mjs.map
+//# sourceMappingURL=NcEmojiPicker-R2GSAiCW.mjs.map

package/dist/chunks/{NcEmojiPicker-Bpw-68QP.mjs.map → NcEmojiPicker-R2GSAiCW.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcEmojiPicker-Bpw-68QP.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\n\t\tref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopupRole=\"dialog\"\n\t\t:noFocusTrap=\"true /* Handled manually to remove emoji buttons from TAB sequence /\"\n\t\t@afterShow=\"afterShow\"\n\t\t@afterHide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n\n\t\t\t\t:native\n\t\t\t\t:emojiSize=\"20\"\n\t\t\t\t:perLine=\"8\"\n\t\t\t\t:pickerStyles=\"{ width: '320px' }\"\n\t\t\t\t:showPreview\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:showSkinTones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:labelVisible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailingButtonIcon=\"close\"\n\t\t\t\t\t\t\t:trailingButtonLabel=\"t('Clear search')\"\n\t\t\t\t\t\t\t:showTrailingButton=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t\t@trailingButtonClick=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:modelValue=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpaletteOnly\n\t\t\t\t\t\t\t:container\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:modelValue=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:modelValue=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\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\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast/src/index.js'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.ts'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\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\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\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\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\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\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\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\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\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: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'select',\n\t\t'selectData',\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 \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\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\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 \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('selectData', 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\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement \|\| this.$refs.picker.$el.contains(document.activeElement) \|\| !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t \n\t\t @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) \|\| focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) \|\| focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t \n\t\t @param {'onArrowLeft' \| 'onArrowRight' \| 'onArrowDown' \| 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\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-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid /\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/ An actual heading inside the element /\n\th3.emoji-mart-category-label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\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-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"NcEmojiPicker-R2GSAiCW.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\n\t\tref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopupRole=\"dialog\"\n\t\t:noFocusTrap=\"true /* Handled manually to remove emoji buttons from TAB sequence /\"\n\t\t@afterShow=\"afterShow\"\n\t\t@afterHide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n\n\t\t\t\t:native\n\t\t\t\t:emojiSize=\"20\"\n\t\t\t\t:perLine=\"8\"\n\t\t\t\t:pickerStyles=\"{ width: '320px' }\"\n\t\t\t\t:showPreview\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:showSkinTones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:labelVisible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailingButtonIcon=\"close\"\n\t\t\t\t\t\t\t:trailingButtonLabel=\"t('Clear search')\"\n\t\t\t\t\t\t\t:showTrailingButton=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t\t@trailingButtonClick=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:modelValue=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpaletteOnly\n\t\t\t\t\t\t\t:container\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:modelValue=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:modelValue=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\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\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast/src/index.js'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.ts'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\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\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\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\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\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\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\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\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\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: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'select',\n\t\t'selectData',\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 \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\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\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 \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('selectData', 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\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement \|\| this.$refs.picker.$el.contains(document.activeElement) \|\| !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t \n\t\t @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) \|\| focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) \|\| focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t \n\t\t @param {'onArrowLeft' \| 'onArrowRight' \| 'onArrowDown' \| 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\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-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid /\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/ An actual heading inside the element /\n\th3.emoji-mart-category-label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\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-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcFilePicker-nPCwHMqj.mjs → NcFilePicker-C7Xs8E2Q.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
-import '../assets/NcFilePicker-CimiKIH1.css';
+import '../assets/NcFilePicker-CGYCxNdK.css';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useTemplateRef, computed, normalizeClass, createVNode, withCtx, createBlock, createTextVNode, unref, Fragment, renderList, renderSlot, nextTick } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { N as NcActionButton } from "./NcActionButton-BO5T5ePT.mjs";
 import { N as NcActionCaption } from "./NcActionCaption-f7L9gBlT.mjs";
-import { N as NcActions } from "./NcActions-CUmcZ3C3.mjs";
+import { N as NcActions } from "./NcActions-DY4GGONi.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon-BOVpFVQz.mjs";
 import { getGettextBuilder } from "@nextcloud/l10n/gettext";
@@ -289,7 +289,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const filePicker = "_filePicker_UHtO-";
+const filePicker = "_filePicker_fNHZd";
 const style0 = {
   filePicker
 };
@@ -300,4 +300,4 @@ const NcFilePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cs
 export {
   NcFilePicker as N
 };
-//# sourceMappingURL=NcFilePicker-nPCwHMqj.mjs.map
+//# sourceMappingURL=NcFilePicker-C7Xs8E2Q.mjs.map