@nextcloud/vue 8.3.0 → 8.5.0

package/dist/Components/NcSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcSelect.cjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n\t- @copyright 2022 Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @author Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @license AGPL-3.0-or-later\n\t-\n\t- This program is free software: you can redistribute it and/or modify\n\t- it under the terms of the GNU Affero General Public License as\n\t- published by the Free Software Foundation, either version 3 of the\n\t- License, or (at your option) any later version.\n\t-\n\t- This program is distributed in the hope that it will be useful,\n\t- but WITHOUT ANY WARRANTY; without even the implied warranty of\n\t- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n\t- GNU Affero General Public License for more details.\n\t-\n\t- You should have received a copy of the GNU Affero General Public License\n\t- along with this program. If not, see <http://www.gnu.org/licenses/>.\n\t-\n-->\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=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'Simple',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\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\tname: 'Simple (top placement)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\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\tname: 'Multiple (with placeholder)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\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\tname: 'Multiple (objects, pre-selected, stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\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### 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<label :for=\"data1.props.inputId\">{{ data1.name }}</label>\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<label :for=\"data2.props.inputId\">{{ data2.name }}</label>\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst data1 = {\n\tname: 'Wrapped (Default)',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\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\tname: 'Not wrapped',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\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\n### User select examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\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>\nimport AccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport Email from '@mdi/svg/svg/email.svg?raw'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'User select',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\ticon: '',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple user select (stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\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(1, 500px);\n\tgap: 10px;\n}\n\n.container {\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\t'user-select': userSelect,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\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\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:size=\"26\" />\n\t\t\t\t<!-- Set size to 26 to make up for the increased padding of this icon -->\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"option[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"selectedOption[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t:search=\"search\" />\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 $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport '@nextcloud/vue-select/dist/vue-select.css'\n\nimport { VueSelect } from '@nextcloud/vue-select'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\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 NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nimport l10n from '../../mixins/l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcListItemIcon,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tmixins: [\n\t\tl10n,\n\t],\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.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\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Search for 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 * Close the dropdown when selecting an option\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#closeonselect\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * 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: createElement => createElement(Close, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: '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 * Enabling `userSelect` will automatically set this to filter by the\n\t\t * `displayName` and `subname` properties of the user option object\n\t\t * unless this prop is set explicitly\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\t * @see https://vue-select.org/api/props.html#inputid\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\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 * Enabling `userSelect` will automatically set this to `'displayName'`\n\t\t * unless this prop is set explicitly\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: () => '-' + GenRandomId(),\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 * Enable the user selector with avatars\n\t\t *\n\t\t * Objects must contain the data expected by the\n\t\t * [NcListItemIcon](#/Components/NcListItemIcon) and\n\t\t * [NcAvatar](#/Components/NcAvatar) components\n\t\t */\n\t\tuserSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\tvalue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\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],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\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})\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\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\tconst match = search.match(EMAIL_NOTATION)\n\t\t\t\t\treturn (match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t\t\t\t\t|| (`${label} ${option.subname}`\n\t\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst {\n\t\t\t\t// Props handled by this component\n\t\t\t\tinputClass,\n\t\t\t\tnoWrap,\n\t\t\t\tplacement,\n\t\t\t\tuserSelect,\n\t\t\t\t// Props to forward\n\t\t\t\t...initialPropsToForward\n\t\t\t} = this.$props\n\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\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\n\t\t\treturn propsToForward\n\t\t},\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: 2px;\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: $clickable-area;\n\tmin-width: 260px;\n\tmargin: 0;\n\n\t.vs__selected {\n\t\theight: 32px;\n\t\tpadding: 0 8px 0 12px;\n\t\tborder-radius: 18px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search, .vs__search:focus {\n\t\tmargin: 2px 0 0;\n\t}\n\n\t.vs__dropdown-toggle {\n\t\tpadding: 0;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\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: 40px; // 36px search height + 4px search margin\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}\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-color: var(--color-main-text) !important;\n\toutline: 2px solid var(--color-main-background);\n\tpadding: 4px !important;\n\tbox-shadow: none;\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\tleft: 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}\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\n// Selected users require slightly different padding\n.user-select .vs__selected {\n\tpadding: 0 2px !important;\n}\n\n</style>\n"],"names":["_sfc_main","ChevronDown","Components_NcEllipsisedOption","Components_NcListItemIcon","Components_NcLoadingIcon","vueSelect","l10n","l10n$1","optionLabel","createElement","Close","noDrop","open","map","vm","event","GenRandomId","dropdownMenu","component","width","addClass","_middlewareArgs","togglePlacementClass","placement","updatePosition","dom","x","y","EMAIL_NOTATION","option","label","search","match","_c","_b","_a","inputClass","noWrap","userSelect","initialPropsToForward"],"mappings":";;;AAijBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC,EAAA;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,EAAA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,GAAAD,EAAA,UAAA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAE,EAAA,EAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAA,EAAA,EAAA,oBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,CAAAC,MAAAD,EAAA,EAAA,qBAAA,EAAA,QAAAC,EAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QACA,UAAA;AAAA,UACA,QAAA,CAAAC,MAAAA,EAAAC,EAAA,OAAA;AAAA,YACA,OAAA;AAAA,cACA,MAAA;AAAA,cACA,WAAA;AAAA,YACA;AAAA,YACA,OAAA;AAAA,cACA,QAAA;AAAA,YACA;AAAA,UACA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,CAAA,EAAA,QAAAC,GAAA,MAAAC,EAAA,MACAD,IAAA,KAAAC;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA,QAAAC,GAAAC,GAAA;AACA,eAAA;AAAA,UACA,GAAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,IAAA,CAAAE,MAAA;AACA,YAAAD,EAAA,QACAC,EAAA,gBAAA,GAGAF,EAAA,EAAA,EAAAE,CAAA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,MAAAC,EAAA,YAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,2BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,aAAA,KAAA,sBAAA,OACA,KAAA,oBAGA,CAAAC,GAAAC,GAAA,EAAA,OAAAC,EAAA,MAAA;AACA,QAAAF,EAAA,MAAA,QAAAE;AAEA,cAAAC,IAAA;AAAA,UACA,MAAA;AAAA,UACA,GAAAC,GAAA;AACA,mBAAAJ,EAAA,UAAA,IAAA,6BAAA,GACA,CAAA;AAAA,UACA;AAAA,QACA,GAEAK,IAAA;AAAA,UACA,MAAA;AAAA,UACA,GAAA,EAAA,WAAAC,EAAA,GAAA;AACA,mBAAAL,EAAA,IAAA,UAAA;AAAA,cACA;AAAA,cACAK,MAAA;AAAA,YACA,GACAN,EAAA,UAAA;AAAA,cACA;AAAA,cACAM,MAAA;AAAA,YACA,GACA,CAAA;AAAA,UACA;AAAA,QACA,GAEAC,IAAA,MAAA;AACA,UAAAC,EAAA,gBAAAP,EAAA,MAAA,QAAAD,GAAA;AAAA,YACA,WAAA,KAAA;AAAA,YACA,YAAA;AAAA,cACAQ,EAAA,OAAA,EAAA;AAAA,cACAL;AAAA,cACAE;AAAA;AAAA,cAEAG,EAAA,KAAA;AAAA,cACAA,EAAA,MAAA,EAAA,SAAAA,EAAA,WAAA,EAAA,CAAA;AAAA,YACA;AAAA,UACA,CAAA,EAAA,KAAA,CAAA,EAAA,GAAAC,GAAA,GAAAC,EAAA,MAAA;AACA,mBAAA,OAAAV,EAAA,OAAA;AAAA,cACA,MAAA,GAAAS,CAAA;AAAA,cACA,KAAA,GAAAC,CAAA;AAAA,YACA,CAAA;AAAA,UACA,CAAA;AAAA,QACA;AAQA,eANAF,EAAA;AAAA,UACAP,EAAA,MAAA;AAAA,UACAD;AAAA,UACAO;AAAA,QACA;AAAA,MAGA;AAAA,IACA;AAAA,IAEA,gBAAA;AAEA,YAAAI,IAAA;AAEA,aAAA,KAAA,aAAA,OACA,KAAA,WAEA,KAAA,aACA,CAAAC,GAAAC,GAAAC,MAAA;;AACA,cAAAC,IAAAD,EAAA,MAAAH,CAAA;AACA,eAAAI,OAAAC,KAAAC,KAAAC,IAAAN,EAAA,YAAA,gBAAAM,EAAA,sBAAA,gBAAAD,EAAA,KAAAC,OAAA,gBAAAF,EAAA,QAAAD,EAAA,CAAA,EAAA,kBAAA,MAAA,MACA,GAAAF,CAAA,IAAAD,EAAA,OAAA,GACA,kBAAA,EACA,QAAAE,EAAA,kBAAA,CAAA,IAAA;AAAA,MACA,IAEA1B,EAAA,UAAA,MAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,UAAA,OACA,KAAA,QAEA,KAAA,aACA,gBAEAA,EAAA,UAAA,MAAA,MAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,YAAA;AAAA;AAAA,QAEA,YAAA+B;AAAA,QACA,QAAAC;AAAA,QACA,WAAAd;AAAA,QACA,YAAAe;AAAA;AAAA,QAEA,GAAAC;AAAA,MACA,IAAA,KAAA;AAUA,aARA;AAAA,QACA,GAAAA;AAAA;AAAA,QAEA,mBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,OAAA,KAAA;AAAA,MACA;AAAA,IAGA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcSelect.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcSelect.mjs

@@ -1,446 +1,4 @@
-import "../assets/index-f9bfa317.css";
-import "@nextcloud/vue-select/dist/vue-select.css";
-import { VueSelect as s } from "@nextcloud/vue-select";
-import { autoUpdate as p, computePosition as f, offset as d, flip as m, shift as y, limitShift as _ } from "@floating-ui/dom";
-import { t as c } from "../chunks/l10n-1b905a9a.mjs";
-import { C as h } from "../chunks/ChevronDown-a72d365d.mjs";
-import { C as g } from "../chunks/Close-271f72e2.mjs";
-import b from "./NcEllipsisedOption.mjs";
-import S from "./NcListItemIcon.mjs";
-import L from "./NcLoadingIcon.mjs";
-import { l as C } from "../chunks/l10n-6cfc1200.mjs";
-import { G as v } from "../chunks/GenRandomId-cb9ccebe.mjs";
-import { n as N } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const B = {
-  name: "NcSelect",
-  components: {
-    ChevronDown: h,
-    NcEllipsisedOption: b,
-    NcListItemIcon: S,
-    NcLoadingIcon: L,
-    VueSelect: s
-  },
-  mixins: [
-    C
-  ],
-  props: {
-    // Add VueSelect props to $props
-    ...s.props,
-    /**
-     * `aria-label` for the clear input button
-     */
-    ariaLabelClearSelected: {
-      type: String,
-      default: c("Clear selected")
-    },
-    /**
-     * `aria-label` for the search input
-     */
-    ariaLabelCombobox: {
-      type: String,
-      default: c("Search for options")
-    },
-    /**
-     * Allows to customize the `aria-label` for the deselect-option button
-     * The default is "Deselect " + optionLabel
-     * @type {(optionLabel: string) => string}
-     */
-    ariaLabelDeselectOption: {
-      type: Function,
-      default: (l) => c("Deselect {option}", { option: l })
-    },
-    /**
-     * Append the dropdown element to the end of the body
-     * and size/position it dynamically.
-     *
-     * @see https://vue-select.org/api/props.html#appendtobody
-     */
-    appendToBody: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * When `appendToBody` is true, this function is responsible for
-     * positioning the drop down list.
-     *
-     * If a function is returned from `calculatePosition`, it will
-     * be called when the drop down list is removed from the DOM.
-     * This allows for any garbage collection you may need to do.
-     *
-     * @see https://vue-select.org/api/props.html#calculateposition
-     */
-    calculatePosition: {
-      type: Function,
-      default: null
-    },
-    /**
-     * Close the dropdown when selecting an option
-     *
-     * @see https://vue-select.org/api/props.html#closeonselect
-     */
-    closeOnSelect: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Replace default vue-select components
-     *
-     * @see https://vue-select.org/api/props.html#components
-     */
-    components: {
-      type: Object,
-      default: () => ({
-        Deselect: {
-          render: (l) => l(g, {
-            props: {
-              size: 20,
-              fillColor: "var(--vs-controls-color)"
-            },
-            style: {
-              cursor: "pointer"
-            }
-          })
-        }
-      })
-    },
-    /**
-     * Sets the maximum number of options to display in the dropdown list
-     */
-    limit: {
-      type: Number,
-      default: null
-    },
-    /**
-     * Disable the component
-     *
-     * @see https://vue-select.org/api/props.html#disabled
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Determines whether the dropdown should be open.
-     * Receives the component instance as the only argument.
-     *
-     * @see https://vue-select.org/api/props.html#dropdownshouldopen
-     */
-    dropdownShouldOpen: {
-      type: Function,
-      default: ({ noDrop: l, open: e }) => l ? !1 : e
-    },
-    /**
-     * Callback to determine if the provided option should
-     * match the current search text. Used to determine
-     * if the option should be displayed.
-     *
-     * Defaults to the internal vue-select function documented at the link
-     * below
-     *
-     * Enabling `userSelect` will automatically set this to filter by the
-     * `displayName` and `subname` properties of the user option object
-     * unless this prop is set explicitly
-     *
-     * @see https://vue-select.org/api/props.html#filterby
-     */
-    filterBy: {
-      type: Function,
-      default: null
-    },
-    /**
-     * Class for the `input`
-     *
-     * Necessary for use in NcActionInput
-     */
-    inputClass: {
-      type: [String, Object],
-      default: null
-    },
-    /**
-     * Input element id
-     *
-     * @see https://vue-select.org/api/props.html#inputid
-     */
-    inputId: {
-      type: String,
-      default: null
-    },
-    /**
-     * Display a visible border around dropdown options
-     * which have keyboard focus
-     */
-    keyboardFocusBorder: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Key of the displayed label for object options
-     *
-     * Defaults to the internal vue-select string documented at the link
-     * below
-     *
-     * Enabling `userSelect` will automatically set this to `'displayName'`
-     * unless this prop is set explicitly
-     *
-     * @see https://vue-select.org/api/props.html#label
-     */
-    label: {
-      type: String,
-      default: null
-    },
-    /**
-     * Show the loading icon
-     *
-     * @see https://vue-select.org/api/props.html#loading
-     */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Allow selection of multiple options
-     *
-     * @see https://vue-select.org/api/props.html#multiple
-     */
-    multiple: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Disable automatic wrapping when selected options overflow the width
-     */
-    noWrap: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Array of options
-     *
-     * @type {Array<string | number | Record<string | number, any>>}
-     *
-     * @see https://vue-select.org/api/props.html#options
-     */
-    options: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Placeholder text
-     *
-     * @see https://vue-select.org/api/props.html#placeholder
-     */
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Customized component's response to keydown events while the search input has focus
-     *
-     * @see https://vue-select.org/guide/keydown.html#mapkeydown
-     */
-    mapKeydown: {
-      type: Function,
-      /**
-       * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select
-       *
-       * @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }
-       * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance
-       * @return {Record<number, Function>} patched keydown event handlers
-       */
-      default(l, e) {
-        return {
-          ...l,
-          /**
-           * Patched Escape handler to stop propagation from open select
-           *
-           * @param {KeyboardEvent} event - default keydown event handler
-           */
-          27: (o) => {
-            e.open && o.stopPropagation(), l[27](o);
-          }
-        };
-      }
-    },
-    /**
-     * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.
-     *
-     * @see https://vue-select.org/api/props.html#uid
-     */
-    uid: {
-      type: String,
-      default: () => "-" + v()
-    },
-    /**
-     * When `appendToBody` is true, this sets the placement of the dropdown
-     *
-     * @type {'bottom' | 'top'}
-     */
-    placement: {
-      type: String,
-      default: "bottom"
-    },
-    /**
-     * If false, the focused dropdown option will not be reset when filtered
-     * options change
-     */
-    resetFocusOnOptionsChange: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Enable the user selector with avatars
-     *
-     * Objects must contain the data expected by the
-     * [NcListItemIcon](#/Components/NcListItemIcon) and
-     * [NcAvatar](#/Components/NcAvatar) components
-     */
-    userSelect: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Currently selected value
-     *
-     * The `v-model` directive may be used for two-way data binding
-     *
-     * @type {string | number | Record<string | number, any> | Array<any>}
-     *
-     * @see https://vue-select.org/api/props.html#value
-     */
-    value: {
-      type: [String, Number, Object, Array],
-      default: null
-    },
-    /**
-     * Any available prop
-     *
-     * @see https://vue-select.org/api/props.html
-     */
-    // Not an actual prop but needed to show in vue-styleguidist docs
-    // eslint-disable-next-line
-    " ": {}
-  },
-  emits: [
-    /**
-     * All events from https://vue-select.org/api/events.html
-     */
-    // Not an actual event but needed to show in vue-styleguidist docs
-    " "
-  ],
-  data() {
-    return {
-      search: ""
-    };
-  },
-  computed: {
-    localCalculatePosition() {
-      return this.calculatePosition !== null ? this.calculatePosition : (l, e, { width: o }) => {
-        l.style.width = o;
-        const t = {
-          name: "addClass",
-          fn(n) {
-            return l.classList.add("vs__dropdown-menu--floating"), {};
-          }
-        }, a = {
-          name: "togglePlacementClass",
-          fn({ placement: n }) {
-            return e.$el.classList.toggle(
-              "select--drop-up",
-              n === "top"
-            ), l.classList.toggle(
-              "vs__dropdown-menu--floating-placement-top",
-              n === "top"
-            ), {};
-          }
-        }, r = () => {
-          f(e.$refs.toggle, l, {
-            placement: this.placement,
-            middleware: [
-              d(-1),
-              t,
-              a,
-              // Match popperjs default collision prevention behavior by appending the following middleware in order
-              m(),
-              y({ limiter: _() })
-            ]
-          }).then(({ x: n, y: u }) => {
-            Object.assign(l.style, {
-              left: `${n}px`,
-              top: `${u}px`
-            });
-          });
-        };
-        return p(
-          e.$refs.toggle,
-          l,
-          r
-        );
-      };
-    },
-    localFilterBy() {
-      const l = /[^<]*<([^>]+)/;
-      return this.filterBy !== null ? this.filterBy : this.userSelect ? (e, o, t) => {
-        var r, i, n;
-        const a = t.match(l);
-        return a && ((n = (i = (r = e.subname) == null ? void 0 : r.toLocaleLowerCase) == null ? void 0 : i.call(r)) == null ? void 0 : n.indexOf(a[1].toLocaleLowerCase())) > -1 || `${o} ${e.subname}`.toLocaleLowerCase().indexOf(t.toLocaleLowerCase()) > -1;
-      } : s.props.filterBy.default;
-    },
-    localLabel() {
-      return this.label !== null ? this.label : this.userSelect ? "displayName" : s.props.label.default;
-    },
-    propsToForward() {
-      const {
-        // Props handled by this component
-        inputClass: l,
-        noWrap: e,
-        placement: o,
-        userSelect: t,
-        // Props to forward
-        ...a
-      } = this.$props;
-      return {
-        ...a,
-        // Custom overrides of vue-select props
-        calculatePosition: this.localCalculatePosition,
-        filterBy: this.localFilterBy,
-        label: this.localLabel
-      };
-    }
-  }
-};
-var I = function() {
-  var e = this, o = e._self._c;
-  return o("VueSelect", e._g(e._b({ staticClass: "select", class: {
-    "select--no-wrap": e.noWrap,
-    "user-select": e.userSelect
-  }, on: { search: (t) => e.search = t }, scopedSlots: e._u([{ key: "search", fn: function({ attributes: t, events: a }) {
-    return [o("input", e._g(e._b({ class: ["vs__search", e.inputClass] }, "input", t, !1), a))];
-  } }, { key: "open-indicator", fn: function({ attributes: t }) {
-    return [o("ChevronDown", e._b({ attrs: { "fill-color": "var(--vs-controls-color)", size: 26 } }, "ChevronDown", t, !1))];
-  } }, { key: "option", fn: function(t) {
-    return [e.userSelect ? o("NcListItemIcon", e._b({ attrs: { "avatar-size": 24, name: t[e.localLabel], search: e.search } }, "NcListItemIcon", t, !1)) : o("NcEllipsisedOption", { attrs: { name: String(t[e.localLabel]), search: e.search } })];
-  } }, { key: "selected-option", fn: function(t) {
-    return [e.userSelect ? o("NcListItemIcon", e._b({ attrs: { "avatar-size": 24, name: t[e.localLabel], search: e.search } }, "NcListItemIcon", t, !1)) : o("NcEllipsisedOption", { attrs: { name: String(t[e.localLabel]), search: e.search } })];
-  } }, { key: "spinner", fn: function(t) {
-    return [t.loading ? o("NcLoadingIcon") : e._e()];
-  } }, { key: "no-options", fn: function() {
-    return [e._v(" " + e._s(e.t("No results")) + " ")];
-  }, proxy: !0 }, e._l(e.$scopedSlots, function(t, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
-    } };
-  })], null, !0) }, "VueSelect", e.propsToForward, !1), e.$listeners));
-}, w = [], F = /* @__PURE__ */ N(
-  B,
-  I,
-  w,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const G = F.exports;
+import { N as f } from "../chunks/NcSelect-zx9IspDS.mjs";
 export {
-  G as default
+  f as default
 };

package/dist/Components/NcSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcSelect.mjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n\t- @copyright 2022 Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @author Christopher Ng <chrng8@gmail.com>\n\t-\n\t- @license AGPL-3.0-or-later\n\t-\n\t- This program is free software: you can redistribute it and/or modify\n\t- it under the terms of the GNU Affero General Public License as\n\t- published by the Free Software Foundation, either version 3 of the\n\t- License, or (at your option) any later version.\n\t-\n\t- This program is distributed in the hope that it will be useful,\n\t- but WITHOUT ANY WARRANTY; without even the implied warranty of\n\t- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n\t- GNU Affero General Public License for more details.\n\t-\n\t- You should have received a copy of the GNU Affero General Public License\n\t- along with this program. If not, see <http://www.gnu.org/licenses/>.\n\t-\n-->\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=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'Simple',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\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\tname: 'Simple (top placement)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\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\tname: 'Multiple (with placeholder)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\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\tname: 'Multiple (objects, pre-selected, stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\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### 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<label :for=\"data1.props.inputId\">{{ data1.name }}</label>\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<label :for=\"data2.props.inputId\">{{ data2.name }}</label>\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>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst data1 = {\n\tname: 'Wrapped (Default)',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\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\tname: 'Not wrapped',\n\tprops: {\n\t\tinputId: getRandomId(),\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\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\n### User select examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ name, props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<label :for=\"props.inputId\">{{ name }}</label>\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>\nimport AccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport Email from '@mdi/svg/svg/email.svg?raw'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nconst getRandomId = () => {\n\treturn `select-${GenRandomId()}`\n}\n\nconst selectArray = [\n\t{\n\t\tname: 'User select',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\ticon: '',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tname: 'Multiple user select (stay open on select)',\n\t\tprops: {\n\t\t\tinputId: getRandomId(),\n\t\t\tuserSelect: true,\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\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(1, 500px);\n\tgap: 10px;\n}\n\n.container {\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\t'user-select': userSelect,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\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\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:size=\"26\" />\n\t\t\t\t<!-- Set size to 26 to make up for the increased padding of this icon -->\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"option[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"selectedOption[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t:search=\"search\" />\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 $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport '@nextcloud/vue-select/dist/vue-select.css'\n\nimport { VueSelect } from '@nextcloud/vue-select'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\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 NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nimport l10n from '../../mixins/l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcListItemIcon,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tmixins: [\n\t\tl10n,\n\t],\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.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\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Search for 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 * Close the dropdown when selecting an option\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#closeonselect\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * 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: createElement => createElement(Close, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: '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 * Enabling `userSelect` will automatically set this to filter by the\n\t\t * `displayName` and `subname` properties of the user option object\n\t\t * unless this prop is set explicitly\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\t * @see https://vue-select.org/api/props.html#inputid\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\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 * Enabling `userSelect` will automatically set this to `'displayName'`\n\t\t * unless this prop is set explicitly\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: () => '-' + GenRandomId(),\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 * Enable the user selector with avatars\n\t\t *\n\t\t * Objects must contain the data expected by the\n\t\t * [NcListItemIcon](#/Components/NcListItemIcon) and\n\t\t * [NcAvatar](#/Components/NcAvatar) components\n\t\t */\n\t\tuserSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\tvalue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\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],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\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})\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\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\tconst match = search.match(EMAIL_NOTATION)\n\t\t\t\t\treturn (match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t\t\t\t\t|| (`${label} ${option.subname}`\n\t\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst {\n\t\t\t\t// Props handled by this component\n\t\t\t\tinputClass,\n\t\t\t\tnoWrap,\n\t\t\t\tplacement,\n\t\t\t\tuserSelect,\n\t\t\t\t// Props to forward\n\t\t\t\t...initialPropsToForward\n\t\t\t} = this.$props\n\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\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\n\t\t\treturn propsToForward\n\t\t},\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: 2px;\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: $clickable-area;\n\tmin-width: 260px;\n\tmargin: 0;\n\n\t.vs__selected {\n\t\theight: 32px;\n\t\tpadding: 0 8px 0 12px;\n\t\tborder-radius: 18px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search, .vs__search:focus {\n\t\tmargin: 2px 0 0;\n\t}\n\n\t.vs__dropdown-toggle {\n\t\tpadding: 0;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\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: 40px; // 36px search height + 4px search margin\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}\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-color: var(--color-main-text) !important;\n\toutline: 2px solid var(--color-main-background);\n\tpadding: 4px !important;\n\tbox-shadow: none;\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\tleft: 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}\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\n// Selected users require slightly different padding\n.user-select .vs__selected {\n\tpadding: 0 2px !important;\n}\n\n</style>\n"],"names":["_sfc_main","ChevronDown","NcEllipsisedOption","NcListItemIcon","NcLoadingIcon","VueSelect","l10n","t","optionLabel","createElement","Close","noDrop","open","map","vm","event","GenRandomId","dropdownMenu","component","width","addClass","_middlewareArgs","togglePlacementClass","placement","updatePosition","computePosition","offset","flip","shift","limitShift","x","y","autoUpdate","EMAIL_NOTATION","option","label","search","match","_c","_b","_a","inputClass","noWrap","userSelect","initialPropsToForward"],"mappings":"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"}
+{"version":3,"file":"NcSelect.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}