npm - @nextcloud/vue - Versions diffs - 9.0.0-rc.1 → 9.0.0-rc.3 - Mend

@nextcloud/vue 9.0.0-rc.1 → 9.0.0-rc.3

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 (409) hide show

package/dist/chunks/NcPopover-CzrFCS-2.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcPopover-CzrFCS-2.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\treturn this.$slots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","\n\n<docs>\n\n### General description\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `no-focus-trap` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover no-focus-trap>\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With logical placement\n\nIf the text flow is language specific (e.g. UI is shown for right-to-left language),\nalso the popover often needs to be adjusted when not rendered on top or bottom (default).\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"ltr\">\n\t\t\t\tLTR\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"rtl\">\n\t\t\t\tRTL\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<div class=\"content\" :dir>\n\t\t\t<NcPopover :key=\"dir\"\n\t\t\t\tplacement=\"end\"\n\t\t\t\t:triggers=\"['hover']\">\n\t\t\t\t<template #trigger>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\tHover me\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t\t<template #default>\n\t\t\t\t\tThis will be shown on the logical end of the button.\n\t\t\t\t</template>\n\t\t\t</NcPopover>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdir: 'ltr',\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.content {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-around;\n}\n\nfieldset {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n}\n</style>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:arrow-padding=\"10\"\n\t\t:auto-hide=\"closeOnClickOutside\"\n\t\t:boundary=\"boundary || undefined\"\n\t\t:container\n\t\t:delay\n\t\t:distance=\"10\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:placement=\"internalPlacement\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t:popper-triggers\n\t\t:popper-hide-triggers\n\t\t:popper-show-triggers\n\t\t:shown=\"internalShown\"\n\t\t:triggers=\"internalTriggers\"\n\t\t:hide-triggers\n\t\t:show-triggers\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t\n\t\t<template #popper=\"slotProps\">\n\t\t\t<slot name=\"default\" v-bind=\"slotProps\" />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn } from 'vue'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isRtl } from '../../utils/rtl.ts'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\n/**\n * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse\n * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus\n */\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Element to use for calculating the popper boundary (size and position).\n\t\t */\n\t\tboundary: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Automatically hide the popover on click outside.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Container where to mount the popover.\n\t\t * Either a select query or `false` to mount to the parent node.\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Delay for showing or hiding the popover.\n\t\t *\n\t\t * Can either be a number or an object to configure different delays (`{ show: number, hide: number }`).\n\t\t */\n\t\tdelay: {\n\t\t\ttype: [Number, Object],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Disable the popover focus trap.\n\t\t */\n\t\tnoFocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Where to place the popover.\n\t\t *\n\t\t * This consists of the vertical placement and the horizontal placement.\n\t\t * E.g. `bottom` will place the popover on the bottom of the trigger (horizontally centered),\n\t\t * while `buttom-start` will horizontally align the popover on the logical start (e.g. for LTR layout on the left.).\n\t\t * The `start` or `end` placement will align the popover on the left or right side or the trigger element.\n\t\t *\n\t\t * @type {'auto'|'auto-start'|'auto-end'|'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'start'|'end'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover on the popover container itself.\n\t\t * This is useful if you set `triggers` to `hover` and also want the popover to stay open while hovering the popover itself.\n\t\t *\n\t\t * It is possible to also pass an object to define different triggers for hide and show `{ show: ['hover'], hide: ['click'] }`.\n\t\t */\n\t\tpopoverTriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {SetReturnFocus}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean, Function],\n\t\t},\n\n\t\t/**\n\t\t * Show or hide the popper\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover.\n\t\t *\n\t\t * If you pass an empty array then only the `shown` prop can control the popover state.\n\t\t * Following events are available:\n\t\t * - `'hover'`\n\t\t * - `'click'`\n\t\t * - `'focus'`\n\t\t * - `'touch'`\n\t\t *\n\t\t * It is also possible to pass an object to have different events for show and hide:\n\t\t * `{ hide: ['click'], show: ['click', 'hover'] }`\n\t\t */\n\t\ttriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: () => ['click'],\n\t\t},\n\t},\n\n\temits: [\n\t\t'afterShow',\n\t\t'afterHide',\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpopperTriggers() {\n\t\t\tif (this.popoverTriggers && Array.isArray(this.popoverTriggers)) {\n\t\t\t\treturn this.popoverTriggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t\tpopperHideTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t\tpopperShowTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalTriggers() {\n\t\t\tif (this.triggers && Array.isArray(this.triggers)) {\n\t\t\t\treturn this.triggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t\thideTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t\tshowTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalPlacement() {\n\t\t\tif (this.placement === 'start') {\n\t\t\t\treturn isRtl ? 'right' : 'left'\n\t\t\t} else if (this.placement === 'end') {\n\t\t\t\treturn isRtl ? 'left' : 'right'\n\t\t\t}\n\t\t\treturn this.placement\n\t\t},\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\twarn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\treturn this.$refs.popover?.$refs.popper?.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (this.noFocusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel.tabIndex = -1\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallBackFocus: el,\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tasync afterShow() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterShow')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tawait this.$nextTick()\n\t\t\tawait this.useFocusTrap()\n\t\t\tthis.addEscapeStopPropagation()\n\t\t},\n\t\tafterHide() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'hide' and 'apply-hide' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterHide')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n$arrow-width: 10px;\n// Move the arrow just slightly inside the popover\n// To prevent a visual gap on page scaling\n$arrow-position: $arrow-width - 1px;\n\n// Size class comes from the floating-vue library we use\n.resize-observer {\n\tposition: absolute;\n\ttop: 0;\n\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\tleft: 0;\n\tz-index: -1;\n\twidth: 100%;\n\theight: 100%;\n\tborder: none;\n\tbackground-color: transparent;\n\tpointer-events: none;\n\tdisplay: block;\n\toverflow: hidden;\n\topacity: 0;\n\n\tobject {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t\tz-index: -1;\n\t}\n}\n\n.v-popper--theme-dropdown {\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\t.v-popper__wrapper {\n\t\t\t/*\n\t\t\t * In theory, \"filter: drop-shadow\" would look better here with arrow shadow.\n\t\t\t * In fact, in results in a blurry popover in Chromium on scaling.\n\t\t\t * The hypothesis is that \"filter\" creates a new composition layer,\n\t\t\t * and with GPU acceleration requires the previous layers content to be rasterized.\n\t\t\t * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover\n\t\t\t * and then apply scaling, which results in a blurry popover.\n\t\t\t */\n\t\t\tbox-shadow: 0 1px 10px var(--color-box-shadow);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tright: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcPopoverTriggerProvider","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":"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"}

package/dist/chunks/NcRichContenteditable-gt56b0Uw.mjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/NcSelect-DFMnY4fI.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcSelect-DFMnY4fI.mjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["\n\n<docs>\n### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple (top placement)',\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (with placeholder)',\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (objects, pre-selected, stay open on select)',\n\t\t\tkeepOpen: true,\n\t\t\tmultiple: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### Native form validation example\n\n```vue\n<template>\n\t<div class=\"container\">\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require a selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"singleValue\"\n\t\t\t\trequired />\n\t\t\t<NcButton type=\"submit\">Submit</NcButton>\n\t\t</form>\n\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require at least one selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"multiValue\"\n\t\t\t\tmultiple\n\t\t\t\trequired />\n\t\t\t<NcButton type=\"submit\">Submit</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.container {\n\tdisplay: flex;\n\tgap: 0 12px;\n}\n\n.container__form {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\twidth: 100%;\n\tgap: 8px 0;\n}\n\n.container__select {\n\twidth: 100%;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst data1 = {\n\tprops: {\n\t\tinputLabel: 'Wrapped (Default)',\n\t\tmultiple: true,\n\t\tkeepOpen: true,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tprops: {\n\t\tinputLabel: 'Not wrapped',\n\t\tkeepOpen: true,\n\t\tmultiple: true,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect class=\"select\"\n\t\t:class=\"{\n\t\t\t'select--no-wrap': noWrap,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\t@search=\"search = $event\"\n\t\t@update:model-value=\"$emit('update:modelValue', $event)\">\n\t\t<template v-if=\"!labelOutside && inputLabel\" #header>\n\t\t\t<label :for=\"inputId\"\n\t\t\t\tclass=\"select__label\">\n\t\t\t\t{{ inputLabel }}\n\t\t\t</label>\n\t\t</template>\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<input :class=\"['vs__search', inputClass]\"\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\t:required=\"inputRequired\"\n\t\t\t\tdir=\"auto\"\n\t\t\t\tv-on=\"events\">\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown v-bind=\"attributes\"\n\t\t\t\tfill-color=\"var(--vs-controls-color)\"\n\t\t\t\t:style=\"{\n\t\t\t\t\tcursor: !disabled ? 'pointer' : null,\n\t\t\t\t}\"\n\t\t\t\t:size=\"26\" />\n\t\t\t\t\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t\n\t\t\t<slot name=\"option\" v-bind=\"option\">\n\t\t\t\t<NcEllipsisedOption :name=\"String(option[localLabel])\"\n\t\t\t\t\t:search=\"search\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t\n\t\t\t<slot name=\"selected-option\" :v-bind=\"selectedOption\">\n\t\t\t\t<NcEllipsisedOption :name=\"String(selectedOption[localLabel])\"\n\t\t\t\t\t:search=\"search\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $slots\" #[name]=\"data\">\n\t\t\t\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\n// TODO: Use @nextcloud/vue-select once a vue 3 version is available.\n// Until then, all @nextcloud/vue-select specific improvements won't be available.\n// E.g. the `limit` prop has no effect, currently.\nimport 'vue-select/dist/vue-select.css'\n\nimport VueSelect from 'vue-select'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { h, warn } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\t\t...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),\n\n\t\t/**\n\t\t * `aria-label` for the clear input button\n\t\t */\n\t\tariaLabelClearSelected: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear selected'),\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the search input\n\t\t *\n\t\t * A descriptive `inputLabel` is preferred as this is not visible.\n\t\t */\n\t\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the listbox element\n\t\t */\n\t\tariaLabelListbox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Options'),\n\t\t},\n\n\t\t/**\n\t\t * Allows to customize the `aria-label` for the deselect-option button\n\t\t * The default is \"Deselect \" + optionLabel\n\t\t * @type {(optionLabel: string) => string}\n\t\t */\n\t\tariaLabelDeselectOption: {\n\t\t\ttype: Function,\n\t\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t\t},\n\n\t\t/**\n\t\t * Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#appendtobody\n\t\t */\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t *\n\t\t * If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#calculateposition\n\t\t */\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Keep the dropdown open after selecting an option.\n\t\t *\n\t\t * @default false\n\t\t * @since 8.25.0\n\t\t */\n\t\tkeepOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Replace default vue-select components\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#components\n\t\t */\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: () => h(Close, {\n\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\tstyle: [\n\t\t\t\t\t\t\t{ cursor: 'pointer' },\n\t\t\t\t\t\t],\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of options to display in the dropdown list\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disable the component\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#disabled\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t */\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t *\n\t\t * Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#filterby\n\t\t */\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the `input`\n\t\t *\n\t\t * Necessary for use in NcActionInput\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input element id\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * Visible label for the input element\n\t\t *\n\t\t * @todo Set default for @nextcloud/vue 9\n\t\t */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass true if you are using an external label\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t */\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Key of the displayed label for object options\n\t\t *\n\t\t * Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#label\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Show the loading icon\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#loading\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 * Allow selection of multiple options\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable automatic wrapping when selected options overflow the width\n\t\t */\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Array of options\n\t\t *\n\t\t * @type {Array<string | number | Record<string | number, any>>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Customized component's response to keydown events while the search input has focus\n\t\t *\n\t\t * @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t */\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/**\n\t\t\t * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t *\n\t\t\t * @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance\n\t\t\t * @return {Record<number, Function>} patched keydown event handlers\n\t\t\t */\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/**\n\t\t\t\t\t * Patched Escape handler to stop propagation from open select\n\t\t\t\t\t *\n\t\t\t\t\t * @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t */\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#uid\n\t\t */\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this sets the placement of the dropdown\n\t\t *\n\t\t * @type {'bottom' | 'top'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t */\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t *\n\t\t * The `v-model` directive may be used for two-way data binding\n\t\t *\n\t\t * @type {string | number | Record<string | number, any> | Array<any>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#value\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable if a value is required for native form validation\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t\t'update:modelValue',\n\t],\n\n\tsetup() {\n\t\tconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\n\t\tconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\n\t\tconst avatarSize = clickableArea - 2 * gridBaseLine\n\n\t\treturn {\n\t\t\tavatarSize,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tinputRequired() {\n\t\t\tif (!this.required) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\t// The <input> itself does not have any value so we set the `required` attribute conditionally\n\t\t\treturn this.modelValue === null || (Array.isArray(this.modelValue) && this.modelValue.length === 0)\n\t\t},\n\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(/* middlewareArgs */) {\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\toffset(-1),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// Match popperjs default collision prevention behavior by appending the following middleware in order\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t\twidth: `${component.$refs.toggle.getBoundingClientRect().width}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\treturn this.filterBy ?? VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\treturn this.label ?? VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst vueSelectKeys = [\n\t\t\t\t...Object.keys(VueSelect.props),\n\t\t\t\t...VueSelect.mixins.flatMap(mixin => Object.keys(mixin.props ?? {})),\n\t\t\t]\n\t\t\tconst initialPropsToForward = Object.fromEntries(\n\t\t\t\tObject.entries(this.$props)\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)),\n\t\t\t)\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tcloseOnSelect: !this.keepOpen,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\t\t\treturn propsToForward\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {\n\t\t\twarn('[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set. If an external label is used, `labelOutside` should be set to `true`.')\n\t\t}\n\t\tif (this.inputLabel && this.ariaLabelCombobox) {\n\t\t\twarn('[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\">\nbody {\n\t/**\n\t * Set custom vue-select CSS variables.\n\t * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)\n\t */\n\n\t/* Search Input */\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/* Font */\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/* Disabled State */\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/* Borders */\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: var(--border-width-input, 2px) !important;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-large);\n\n\t/* Component Controls: Clear, Open Indicator */\n\t--vs-controls-color: var(--color-main-text);\n\n\t/* Selected */\n\t--vs-selected-bg: var(--color-background-hover);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/* Dropdown */\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/* Options */\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/* Active State */\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/* Keyboard Focus State */\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/* Deselect State */\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/* Transitions */\n\t--vs-transition-duration: 0ms;\n\n\t/* Actions */\n\t--vs-actions-padding: 0 8px 0 4px;\n}\n\n.v-select.select {\n\t/* Override default vue-select styles */\n\tmin-height: var(--default-clickable-area);\n\tmin-width: 260px;\n\tmargin: 0 0 var(--default-grid-baseline);\n\n\t&.vs--open {\n\t\t--vs-border-width: var(--border-width-input-focused, 2px);\n\t}\n\n\t.select__label {\n\t\tdisplay: block;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.vs__selected {\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\tmargin: calc(var(--default-grid-baseline) / 2);\n\t\tpadding-block: 0;\n\t\tpadding-inline: 12px 8px;\n\t\tborder-radius: 16px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t&.vs--open .vs__selected:first-of-type {\n\t\tmargin-inline-start: calc(var(--default-grid-baseline) / 2 - (var(--border-width-input-focused, 2px) - var(--border-width-input, 2px))) !important; // prevent jumping\n\t}\n\n\t.vs__search {\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-main-text);\n\t\tmin-height: unset !important;\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--vs-border-width)) !important;\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.vs__search, .vs__search:focus {\n\t\tmargin: 0;\n\t}\n\n\t.vs__dropdown-toggle {\n\t\tposition: relative;\n\t\tmax-height: 100px;\n\t\tpadding: 0;\n\t\toverflow-y: auto;\n\t}\n\n\t.vs__actions {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t}\n\n\t.vs__clear {\n\t\tmargin-inline-end: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\n\t\tborder-width: var(--border-width-input-focused);\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t\tborder-bottom-color: transparent;\n\t}\n\n\t&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t}\n\n\t&.vs--disabled {\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\tborder-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);\n\t\t\t\tborder-top-color: transparent;\n\t\t\t\tborder-bottom-color: var(--color-main-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width));\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search[readonly] {\n\t\t\tposition: absolute;\n\t\t}\n\t\tpadding: 0 5px;\n\t}\n\n\t&.vs--single {\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix `max-width` for `position: absolute`\n\t\t\t\tmax-width: 100%;\n\t\t\t\t// Fix color to be accessible\n\t\t\t\topacity: 1;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t}\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\t.vs__selected {\n\t\t\tbackground: unset !important;\n\t\t}\n\t}\n}\n\n.vs__dropdown-menu {\n\tborder-width: var(--border-width-input-focused) !important;\n\tborder-color: var(--color-main-text) !important;\n\toutline: none !important;\n\tbox-shadow:\n\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t2px 0 0 var(--color-main-background), // Left\n\t\t!important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/* Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tinset-inline-start: 0;\n\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) var(--vs-border-radius) 0 0 !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tborder-bottom-style: none !important;\n\t\t\tbox-shadow:\n\t\t\t\t0 -2px 0 var(--color-main-background), // Top\n\t\t\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t\t\t2px 0 0 var(--color-main-background), // Left\n\t\t\t\t!important\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-lighter) !important;\n\t}\n}\n</style>\n"],"names":["Close","_openBlock","_createBlock","_mergeProps","_createSlots","_withCtx","_createElementVNode","_toHandlers","_createVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode","_createTextVNode","_toDisplayString","_renderList"],"mappings":";;;;;;;;;;;;AAqZA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA,IAEN,GAAG,UAAU;AAAA,IACb,GAAG,UAAU,OAAO,OAAO,CAAC,UAAU,WAAW,EAAE,GAAG,UAAU,GAAG,MAAM,MAAO,IAAG,CAAA,CAAE;AAAA;AAAA;AAAA;AAAA,IAKrF,wBAAwB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS,EAAE,gBAAgB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,mBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS,EAAE,SAAS;AAAA,IACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,yBAAyB;AAAA,MACxB,MAAM;AAAA,MACN,SAAS,CAAC,gBAAgB,EAAE,qBAAqB,EAAE,QAAQ,aAAa;AAAA,IACxE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,cAAc;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYD,mBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS,OAAO;AAAA,QACf,UAAU;AAAA,UACT,QAAQ,MAAM,EAAEA,WAAO;AAAA,YACtB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,OAAO;AAAA,cACN,EAAE,QAAQ,UAAW;AAAA,YACrB;AAAA,UACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,oBAAoB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS,CAAC,EAAE,QAAQ,WAAW;AAC9B,eAAO,SAAS,QAAQ;AAAA,MACxB;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM,gBAAiB;AAAA,IAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACX,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQN,QAAQ,KAAK,IAAI;AAChB,eAAO;AAAA,UACN,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMH,IAAI,CAAC,UAAU;AACd,gBAAI,GAAG,MAAM;AACZ,oBAAM,gBAAe;AAAA,YACtB;AAEA,gBAAI,EAAE,EAAE,KAAK;AAAA,UACb;AAAA,QACF;AAAA,MACA;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,KAAK;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM,gBAAiB;AAAA,IAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,2BAA2B;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWD,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,QAAQ,KAAK;AAAA,MACpC,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,KAAK,CAAE;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN;AAAA,IACA;AAAA,EACA;AAAA,EAED,QAAQ;AACP,UAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,UAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,UAAM,aAAa,gBAAgB,IAAI;AAEvC,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACA;AAAA,EAED,OAAO;AACN,WAAO;AAAA,MACN,QAAQ;AAAA,IACT;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,gBAAgB;AACf,UAAI,CAAC,KAAK,UAAU;AACnB,eAAO;AAAA,MACR;AAEA,aAAO,KAAK,eAAe,QAAS,MAAM,QAAQ,KAAK,UAAU,KAAK,KAAK,WAAW,WAAW;AAAA,IACjG;AAAA,IAED,yBAAyB;AACxB,UAAI,KAAK,sBAAsB,MAAM;AACpC,eAAO,KAAK;AAAA,MACb;AAEA,aAAO,CAAC,cAAc,WAAW,EAAE,YAAY;AAC9C,qBAAa,MAAM,QAAQ;AAE3B,cAAM,WAAW;AAAA,UAChB,MAAM;AAAA,UACN,KAAyB;AACxB,yBAAa,UAAU,IAAI,6BAA6B;AACxD,mBAAO,CAAA;AAAA,UACP;AAAA,QACF;AAEA,cAAM,uBAAuB;AAAA,UAC5B,MAAM;AAAA,UACN,GAAG,EAAE,aAAa;AACjB,sBAAU,IAAI,UAAU;AAAA,cACvB;AAAA,cACA,cAAc;AAAA,YACf;AACA,yBAAa,UAAU;AAAA,cACtB;AAAA,cACA,cAAc;AAAA,YACf;AACA,mBAAO,CAAA;AAAA,UACP;AAAA,QACF;AAEA,cAAM,iBAAiB,MAAM;AAC5B,0BAAgB,UAAU,MAAM,QAAQ,cAAc;AAAA,YACrD,WAAW,KAAK;AAAA,YAChB,YAAY;AAAA,cACX,OAAO,EAAE;AAAA,cACT;AAAA,cACA;AAAA;AAAA,cAEA,KAAM;AAAA,cACN,MAAM,EAAE,SAAS,WAAU,GAAI;AAAA,YAC/B;AAAA,UACD,CAAA,EAAE,KAAK,CAAC,EAAE,GAAG,EAAA,MAAQ;AACrB,mBAAO,OAAO,aAAa,OAAO;AAAA,cACjC,MAAM,GAAG,CAAC;AAAA,cACV,KAAK,GAAG,CAAC;AAAA,cACT,OAAO,GAAG,UAAU,MAAM,OAAO,sBAAuB,EAAC,KAAK;AAAA,YAC9D,CAAA;AAAA,UACD,CAAA;AAAA,QACF;AAEA,cAAM,UAAU;AAAA,UACf,UAAU,MAAM;AAAA,UAChB;AAAA,UACA;AAAA,QACD;AAEA,eAAO;AAAA,MACR;AAAA,IACA;AAAA,IAED,gBAAgB;AACf,aAAO,KAAK,YAAY,UAAU,MAAM,SAAS;AAAA,IACjD;AAAA,IAED,aAAa;AACZ,aAAO,KAAK,SAAS,UAAU,MAAM,MAAM;AAAA,IAC3C;AAAA,IAED,iBAAiB;AAChB,YAAM,gBAAgB;AAAA,QACrB,GAAG,OAAO,KAAK,UAAU,KAAK;AAAA,QAC9B,GAAG,UAAU,OAAO,QAAQ,WAAS,OAAO,KAAK,MAAM,SAAS,CAAA,CAAE,CAAC;AAAA,MACpE;AACA,YAAM,wBAAwB,OAAO;AAAA,QACpC,OAAO,QAAQ,KAAK,MAAM,EAExB,OAAO,CAAC,CAAC,KAAK,MAAM,MAAM,cAAc,SAAS,GAAG,CAAC;AAAA,MACxD;AACA,YAAM,iBAAiB;AAAA,QACtB,GAAG;AAAA;AAAA,QAEH,mBAAmB,KAAK;AAAA,QACxB,eAAe,CAAC,KAAK;AAAA,QACrB,UAAU,KAAK;AAAA,QACf,OAAO,KAAK;AAAA,MACb;AACA,aAAO;AAAA,IACP;AAAA,EACD;AAAA,EAED,UAAU;AACT,QAAI,CAAC,KAAK,gBAAgB,CAAC,KAAK,cAAc,CAAC,KAAK,mBAAmB;AACtE,WAAK,wIAAwI;AAAA,IAC9I;AACA,QAAI,KAAK,cAAc,KAAK,mBAAmB;AAC9C,WAAK,8EAA8E;AAAA,IACpF;AAAA,EACA;AAAA,EAED,SAAS;AAAA,IACR;AAAA,EACA;AACF;AAl4BA,MAAA,aAAA,CAAA,KAAA;AAAA,MAAA,aAAA,CAAA,UAAA;;;;;;AAoUC,SAAAC,UAAA,GAAAC,YAqDY,sBArDZC,WAqDY;AAAA,IArDD,QAAM,UAAQ;AAAA,yBACQ,OAAM;AAAA;KAG9B,SAAc,gBAAA;AAAA,IACrB,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,MAAM,SAAG;AAAA,IACjB,uBAAkB,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,qBAAsB,MAAM;AAAA,EA1UxD,CAAA,GAAAC,YAAA;AAAA,IAiVa,QACVC,QAAA,CAIe,EALK,YAAY,OAAM,MAAA;AAAA,MACtCC,mBAIe,SAJfH,WAIe;AAAA,QAJP,sBAAsB,OAAU,UAAA;AAAA,SAC/B,YAAU;AAAA,QACjB,UAAU,SAAa;AAAA,QACxB,KAAI;AAAA,SACJI,WAAM,QAtVV,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;IAwVa,kBAAcF,QACxB,CAKc,EANc,iBAAU;AAAA,MACtCG,YAKc,wBALdL,WAAqB,YAAU;AAAA,QAC9B,cAAW;AAAA,QACV,OAAK;AAAA,mBAAkB,OAAQ,WAAA,YAAA;AAAA;QAG/B,MAAM;AAAA;;IAGE,QAAME,QAEhB,CAFkB,WAAM;AAAA,MAExBI,WAGO,KAtWV,QAAA,UAAAC,eAAAC,mBAmW+B,MAAM,IAAlC,MAGO;AAAA,QAFNH,YACoB,+BAAA;AAAA,UADC,MAAM,OAAO,OAAO,SAAU,UAAA,CAAA;AAAA,UACjD,QAAQ,MAAM;AAAA;;;IAGP,mBAAeH,QAEzB,CAF2B,mBAAc;AAAA,MAEzCI,WAGO,KAHuB,QAAA,mBAAA,EAAA,OAAQ,eAAc,GAApD,MAGO;AAAA,QAFND,YACoB,+BAAA;AAAA,UADC,MAAM,OAAO,eAAe,SAAU,UAAA,CAAA;AAAA,UACzD,QAAQ,MAAM;AAAA;;;IAGP,SAAOH,QACjB,CADmB,YAAO;AAAA,MACL,QAAQ,WAA7BJ,UAAA,GAAAC,YAAwC,4BAhX3C,KAAA,EAAA,CAAA,KAAAU,mBAAA,IAAA,IAAA;AAAA;IAkXa,sBACV,MAAqB;AAAA,MAnXxBC,gBAAAC,gBAmXM,SAAC,EAAA,YAAA,CAAA,GAAA,CAAA;AAAA;IAnXP,GAAA;AAAA;IA2UmB,CAAA,OAAA,gBAAgB,OAAU;MA3U7C,MA2UgD;AAAA,MA3UhD,IAAAT,QA4UG,MAGQ;AAAA,QAHRC,mBAGQ,SAAA;AAAA,UAHA,KAAK,OAAO;AAAA,UACnB,OAAM;AAAA,QACH,GAAAQ,gBAAA,OAAA,UAAU,GA9UjB,GAAA,UAAA;AAAA;MAAA,KAAA;AAAA,QAAA;AAAA,IAAAC,WAqXgC,KAAM,QArXtC,CAqXoB,GAAG,SAAI;;QArX3B;AAAA,QAAA,IAuXGV,QAAA,CAAmC,SAFe;AAAA,UAElDI,WAAmC,KAAtB,QAAA,MAvXhBC,eAAAC,mBAuX8B,IAAI,CAAA,CAAA;AAAA;;;;;;"}

package/dist/chunks/NcTextArea-DKHjCur8.mjs DELETED Viewed

@@ -1,217 +0,0 @@
-import '../assets/NcTextArea-DHr9DPOJ.css';
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { A as AlertCircle } from "./AlertCircleOutline-DVzpKQVu.mjs";
-import { C as Check } from "./Check-5i4xKnkl.mjs";
-import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, mergeProps, toDisplayString, createBlock, createTextVNode } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-const _sfc_main = {
-  name: "NcTextArea",
-  components: {
-    AlertCircle,
-    Check
-  },
-  inheritAttrs: false,
-  props: {
-    /**
-     * The value of the input field
-     */
-    modelValue: {
-      type: String,
-      required: true
-    },
-    /**
-     * The input label, always provide one for accessibility purposes.
-     * This will also be used as a placeholder unless the placeholder
-     * prop is populated with a different string.
-     */
-    label: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Pass in true if you want to use an external label. This is useful
-     * if you need a label that looks different from the one provided by
-     * this component
-     */
-    labelOutside: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * The placeholder of the input. This defaults as the string that's
-     * passed into the label prop. In order to remove the placeholder,
-     * pass in an empty string.
-     */
-    placeholder: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Toggles the success state of the component. Adds a checkmark icon.
-     * this cannot be used together with canClear.
-     */
-    success: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Toggles the error state of the component. Adds an error icon.
-     * this cannot be used together with canClear.
-     */
-    error: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Additional helper text message
-     *
-     * This will be displayed beneath the input field. In case the field is
-     * also marked as having an error, the text will be displayed in red.
-     */
-    helperText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Disable the input field
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Class to add to the input field.
-     * Necessary to use NcInputField in the NcActionInput component.
-     */
-    inputClass: {
-      type: [Object, String],
-      default: ""
-    },
-    /**
-     * The resize CSS property sets whether an element is resizable, and if
-     * so, in which directions.
-     */
-    resize: {
-      type: String,
-      default: "both",
-      validator: (value) => ["both", "vertical", "horizontal", "none"].includes(value)
-    }
-  },
-  emits: [
-    "update:modelValue"
-  ],
-  computed: {
-    computedId() {
-      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
-    },
-    inputName() {
-      return "input" + createElementId();
-    },
-    hasPlaceholder() {
-      return this.placeholder !== "" && this.placeholder !== void 0;
-    },
-    computedPlaceholder() {
-      return this.hasPlaceholder ? this.placeholder : this.label;
-    },
-    isValidLabel() {
-      const isValidLabel = this.label || this.labelOutside;
-      if (!isValidLabel) {
-        console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
-      }
-      return isValidLabel;
-    },
-    ariaDescribedby() {
-      const ariaDescribedby = [];
-      if (this.helperText.length > 0) {
-        ariaDescribedby.push(`${this.inputName}-helper-text`);
-      }
-      if (this.$attrs["aria-describedby"]) {
-        ariaDescribedby.push(this.$attrs["aria-describedby"]);
-      }
-      return ariaDescribedby.join(" ") || null;
-    }
-  },
-  methods: {
-    /**
-     * Focus the input element
-     *
-     * @public
-     */
-    focus() {
-      this.$refs.input.focus();
-    },
-    /**
-     * Select all the text in the input
-     *
-     * @public
-     */
-    select() {
-      this.$refs.input.select();
-    },
-    handleInput(event) {
-      this.$emit("update:modelValue", event.target.value);
-    }
-  }
-};
-const _hoisted_1 = { class: "textarea__main-wrapper" };
-const _hoisted_2 = ["id", "disabled", "placeholder", "aria-describedby", "value"];
-const _hoisted_3 = ["for"];
-const _hoisted_4 = ["id"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Check = resolveComponent("Check");
-  const _component_AlertCircle = resolveComponent("AlertCircle");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["textarea", { "textarea--disabled": $props.disabled }])
-  }, [
-    createElementVNode("div", _hoisted_1, [
-      createElementVNode("textarea", mergeProps(_ctx.$attrs, {
-        id: $options.computedId,
-        ref: "input",
-        class: ["textarea__input", [
-          $props.inputClass,
-          {
-            "textarea__input--label-outside": $props.labelOutside,
-            "textarea__input--success": $props.success,
-            "textarea__input--error": $props.error
-          }
-        ]],
-        disabled: $props.disabled,
-        placeholder: $options.computedPlaceholder,
-        "aria-describedby": $options.ariaDescribedby,
-        "aria-live": "polite",
-        style: { resize: $props.resize },
-        value: $props.modelValue,
-        onInput: _cache[0] || (_cache[0] = (...args) => $options.handleInput && $options.handleInput(...args))
-      }), null, 16, _hoisted_2),
-      !$props.labelOutside && $options.isValidLabel ? (openBlock(), createElementBlock("label", {
-        key: 0,
-        class: "textarea__label",
-        for: $options.computedId
-      }, toDisplayString($props.label), 9, _hoisted_3)) : createCommentVNode("", true)
-    ]),
-    $props.helperText.length > 0 ? (openBlock(), createElementBlock("p", {
-      key: 0,
-      id: `${$options.inputName}-helper-text`,
-      class: normalizeClass(["textarea__helper-text-message", {
-        "textarea__helper-text-message--error": $props.error,
-        "textarea__helper-text-message--success": $props.success
-      }])
-    }, [
-      $props.success ? (openBlock(), createBlock(_component_Check, {
-        key: 0,
-        class: "textarea__helper-text-message__icon",
-        size: 18
-      })) : $props.error ? (openBlock(), createBlock(_component_AlertCircle, {
-        key: 1,
-        class: "textarea__helper-text-message__icon",
-        size: 18
-      })) : createCommentVNode("", true),
-      createTextVNode(" " + toDisplayString($props.helperText), 1)
-    ], 10, _hoisted_4)) : createCommentVNode("", true)
-  ], 2);
-}
-const NcTextArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc8bbaa7"]]);
-export {
-  NcTextArea as N
-};
-//# sourceMappingURL=NcTextArea-DKHjCur8.mjs.map

package/dist/chunks/NcTextArea-DKHjCur8.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcTextArea-DKHjCur8.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\" />\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"modelValue\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport { createElementId } from '../../utils/createElementId.ts'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The value of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t */\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + createElementId()\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toDisplayString","_createCommentVNode","_createBlock","_createTextVNode"],"mappings":"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"}