@nextcloud/vue 9.9.0 → 9.11.0

package/dist/chunks/{NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-DbQnMYZm.mjs → NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang.mjs}

@@ -55,4 +55,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-DbQnMYZm.mjs.map
+//# sourceMappingURL=NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang.mjs.map

package/dist/chunks/NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang.mjs","sources":["../../src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<template>\n<div>\n\t<div>\n\t\t<NcSavingIndicatorIcon :name=\"`${savingState === 'error' ? 'Error saving' : savingState} file`\"\n\t\t\t:error=\"savingState === 'error'\"\n\t\t\t:saving=\"savingState === 'saving'\" />\n\t</div>\n\t<br />\n\t<div style=\"display: flex; justify-content: space-around;\">\n\t\t<NcCheckboxRadioSwitch v-model=\"savingState\"\n\t\t\tvalue=\"saved\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaved\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"savingState\"\n\t\t\tvalue=\"saving\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaving\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"savingState\"\n\t\t\tvalue=\"error\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tError\n\t\t</NcCheckboxRadioSwitch>\n\t</div>\n</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsavingState: 'saved',\n\t\t}\n\t},\n}\n</script>\n\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Specify the size of the saving icon.\n\t */\n\tsize?: number\n\n\t/**\n\t * Specify what is saved.\n\t * If not set the element will be hidden from accessibility tree.\n\t */\n\tname?: string\n\n\t/**\n\t * Set to true when saving is in progress.\n\t */\n\tsaving?: boolean\n\n\t/**\n\t * Set to true if an error occured while saving.\n\t */\n\terror?: boolean\n}>(), {\n\terror: false,\n\tname: '',\n\tsaving: false,\n\tsize: 20,\n})\n\ndefineEmits<{\n\t/**\n\t * Click event on the icon.\n\t */\n\tclick: [MouseEvent]\n}>()\n\nconst indicatorColor = computed(() => {\n\tif (props.error) {\n\t\treturn 'var(--color-text-error, var(--color-error))'\n\t}\n\tif (props.saving) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\treturn 'none'\n})\n</script>\n\n<template>\n\t<span\n\t\t:aria-label=\"name\"\n\t\tclass=\"material-design-icon\"\n\t\trole=\"img\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<svg\n\t\t\tclass=\"material-design-icon__svg\"\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"indicatorColor\" d=\"m19 15a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z\" />\n\t\t\t<path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n"],"names":["_createElementBlock","$emit","_createElementVNode","_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;AAuDA,UAAM,QAAQ;AAmCd,UAAM,iBAAiB,SAAS,MAAM;AACrC,UAAI,MAAM,OAAO;AAChB,eAAO;AAAA,MACR;AACA,UAAI,MAAM,QAAQ;AACjB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAC;;0BAIAA,mBAeO,QAAA;AAAA,QAdL,cAAY,QAAA;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,KAAAA,MAAK,SAAU,MAAM;AAAA,MAAA;sBAC7BD,mBASM,OAAA;AAAA,UARL,OAAM;AAAA,UACL,OAAO,QAAA;AAAA,UACP,QAAQ,QAAA;AAAA,UACT,SAAQ;AAAA,QAAA;UACRE,mBAAmG,QAAA;AAAA,YAA5F,MAAM,eAAA;AAAA,YAAgB,GAAE;AAAA,UAAA;UAC/BA,mBAEO,QAFP,YAEO;AAAA,YADO,QAAA,QAAbC,UAAA,GAAAH,mBAAqC,qCAAf,QAAA,IAAI,GAAA,CAAA;;;;;;;"}

package/dist/chunks/{NcSelect--kERLlBK.mjs → NcSelect.mjs}

@@ -1,22 +1,27 @@
-import '../assets/NcSelect-CvDEQAjD.css';
-import { autoUpdate, computePosition, offset, flip, shift, limitShift } from "@floating-ui/dom";
+import '../assets/NcSelect.css';
+import { autoUpdate, computePosition, flip, offset, shift, limitShift } from "@floating-ui/dom";
+import { d as mdiCheck, j as mdiAlertCircleOutline } from "./mdi.mjs";
 import { VueSelect } from "@nextcloud/vue-select";
-import { resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode, createElementVNode, toHandlers, renderList, warn, h } from "vue";
-import { C as ChevronDown } from "./ChevronDown-C6gc637b.mjs";
-import { I as IconClose } from "./Close-CuhcJnX2.mjs";
-import { N as NcEllipsisedOption } from "./NcEllipsisedOption-D6Amb91K.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-BOVpFVQz.mjs";
-import { r as register, g as t17, a as t } from "./_l10n-wdIzZwir.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { a as isLegacy } from "./legacy-BoqDmOCa.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t17);
+import { resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode, normalizeClass, createElementVNode, createElementBlock, renderList, warn, h } from "vue";
+import { C as ChevronDown } from "./ChevronDown.mjs";
+import { I as IconClose } from "./Close.mjs";
+import { N as NcEllipsisedOption } from "./NcEllipsisedOption.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon.mjs";
+import { _ as _sfc_main$1 } from "./NcTextField.vue_vue_type_script_setup_true_lang.mjs";
+import { r as register, g as t18, a as t } from "./_l10n.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { a as isLegacy } from "./legacy.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t18);
 const _sfc_main = {
   name: "NcSelect",
   components: {
     ChevronDown,
     NcEllipsisedOption,
+    NcIconSvgWrapper,
     NcLoadingIcon,
+    NcTextField: _sfc_main$1,
     VueSelect
   },
   props: {
@@ -174,6 +179,27 @@ const _sfc_main = {
       type: String,
       default: null
     },
+    /**
+     * Additional helper text shown beneath the select.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Toggle the error state, styling the helper text as an error.
+     */
+    error: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Toggle the success state, styling the helper text as a success.
+     */
+    success: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Pass true if you are using an external label
      */
@@ -346,7 +372,9 @@ const _sfc_main = {
     const avatarSize = clickableArea - 2 * gridBaseLine;
     return {
       avatarSize,
-      isLegacy
+      isLegacy,
+      mdiAlertCircleOutline,
+      mdiCheck
     };
   },
   data() {
@@ -370,7 +398,7 @@ const _sfc_main = {
         const addClass = {
           name: "addClass",
           fn() {
-            dropdownMenu.classList.add("vs__dropdown-menu--floating");
+            dropdownMenu.classList.add("vs__dropdown-menu--floating", "nc-select__dropdown");
             return {};
           }
         };
@@ -392,11 +420,13 @@ const _sfc_main = {
           computePosition(component.$refs.toggle, dropdownMenu, {
             placement: this.placement,
             middleware: [
-              offset(-1),
+              // Flip first so the placement-dependent middleware below see the final placement
+              flip(),
               addClass,
               togglePlacementClass,
-              // Match popperjs default collision prevention behavior by appending the following middleware in order
-              flip(),
+              // On top placement, leave a gap for the floating label overhang
+              // (about half the floated label line-height) instead of connecting seamlessly
+              offset(({ placement }) => placement.startsWith("top") ? 10 : -1),
               shift({ limiter: limitShift() })
             ]
           }).then(({ x, y }) => {
@@ -447,18 +477,32 @@ const _sfc_main = {
     }
   },
   methods: {
-    t
+    t,
+    /**
+     * Consumer-provided slots forwarded to vue-select, excluding `footer`
+     * which we render ourselves to host the helper text.
+     *
+     * `$slots` is not reactive, so this is a method (re-evaluated on every
+     * render) rather than a computed, to keep the forwarded slot list fresh.
+     *
+     * @return {string[]}
+     */
+    forwardedSlots() {
+      return Object.keys(this.$slots).filter((name) => name !== "footer");
+    }
   }
 };
 const _hoisted_1 = ["for"];
-const _hoisted_2 = ["required"];
+const _hoisted_2 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcTextField = resolveComponent("NcTextField");
   const _component_ChevronDown = resolveComponent("ChevronDown");
   const _component_NcEllipsisedOption = resolveComponent("NcEllipsisedOption");
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+  const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
   const _component_VueSelect = resolveComponent("VueSelect");
   return openBlock(), createBlock(_component_VueSelect, mergeProps({
-    class: ["select", {
+    class: ["select nc-select", {
       "select--legacy": $setup.isLegacy,
       "select--no-wrap": $props.noWrap
     }]
@@ -467,12 +511,35 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
   }), createSlots({
     search: withCtx(({ attributes, events }) => [
-      createElementVNode("input", mergeProps({
-        class: ["vs__search", [$props.inputClass]]
-      }, attributes, {
+      createVNode(_component_NcTextField, {
+        id: attributes.id,
+        class: normalizeClass(["vs__search", [$props.inputClass]]),
+        type: attributes.type,
+        modelValue: attributes.value,
+        placeholder: $props.multiple || $props.modelValue ? "" : $props.placeholder || "",
+        label: !$props.labelOutside && !$props.multiple && $props.inputLabel ? $props.inputLabel : "",
+        labelOutside: $props.labelOutside || $props.multiple,
+        disabled: $props.disabled,
         required: $options.inputRequired,
-        dir: "auto"
-      }, toHandlers(events, true)), null, 16, _hoisted_2)
+        role: attributes.role,
+        tabindex: attributes.tabindex,
+        readonly: attributes.readonly,
+        autocomplete: attributes.autocomplete,
+        "aria-label": attributes["aria-label"],
+        "aria-describedby": [attributes["aria-describedby"], $props.helperText ? `${$props.inputId}-helper-text` : null].filter(Boolean).join(" ") || void 0,
+        "aria-autocomplete": attributes["aria-autocomplete"],
+        "aria-controls": attributes["aria-controls"],
+        "aria-owns": attributes["aria-owns"],
+        "aria-expanded": attributes["aria-expanded"],
+        "aria-activedescendant": attributes["aria-activedescendant"],
+        onKeydown: events.keydown,
+        onKeypress: events.keypress,
+        onFocus: events.focus,
+        onBlur: events.blur,
+        onCompositionstart: events.compositionstart,
+        onCompositionend: events.compositionend,
+        "onUpdate:modelValue": ($event) => events.input({ target: { value: $event } })
+      }, null, 8, ["id", "class", "type", "modelValue", "placeholder", "label", "labelOutside", "disabled", "required", "role", "tabindex", "readonly", "autocomplete", "aria-label", "aria-describedby", "aria-autocomplete", "aria-controls", "aria-owns", "aria-expanded", "aria-activedescendant", "onKeydown", "onKeypress", "onFocus", "onBlur", "onCompositionstart", "onCompositionend", "onUpdate:modelValue"])
     ]),
     "open-indicator": withCtx(({ attributes }) => [
       createVNode(_component_ChevronDown, mergeProps(attributes, {
@@ -480,7 +547,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         style: {
           cursor: !$props.disabled ? "pointer" : null
         },
-        size: 26
+        size: 20
       }), null, 16, ["style"])
     ]),
     option: withCtx((option) => [
@@ -507,7 +574,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 2
   }, [
-    !$props.labelOutside && $props.inputLabel ? {
+    $props.multiple && !$props.labelOutside && $props.inputLabel ? {
       name: "header",
       fn: withCtx(() => [
         createElementVNode("label", {
@@ -517,7 +584,35 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       key: "0"
     } : void 0,
-    renderList(_ctx.$slots, (_, name) => {
+    $props.helperText || _ctx.$slots.footer ? {
+      name: "footer",
+      fn: withCtx((data) => [
+        $props.helperText ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          id: `${$props.inputId}-helper-text`,
+          class: normalizeClass(["select__helper-text", {
+            "select__helper-text--error": $props.error,
+            "select__helper-text--success": $props.success
+          }])
+        }, [
+          $props.success ? (openBlock(), createBlock(_component_NcIconSvgWrapper, {
+            key: 0,
+            class: "select__helper-text-icon",
+            path: $setup.mdiCheck,
+            inline: ""
+          }, null, 8, ["path"])) : $props.error ? (openBlock(), createBlock(_component_NcIconSvgWrapper, {
+            key: 1,
+            class: "select__helper-text-icon",
+            path: $setup.mdiAlertCircleOutline,
+            inline: ""
+          }, null, 8, ["path"])) : createCommentVNode("", true),
+          createTextVNode(" " + toDisplayString($props.helperText), 1)
+        ], 10, _hoisted_2)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(data)))
+      ]),
+      key: "1"
+    } : void 0,
+    renderList($options.forwardedSlots(), (name) => {
       return {
         name,
         fn: withCtx((data) => [
@@ -531,4 +626,4 @@ const NcSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]
 export {
   NcSelect as N
 };
-//# sourceMappingURL=NcSelect--kERLlBK.mjs.map
+//# sourceMappingURL=NcSelect.mjs.map

package/dist/chunks/NcSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelect.mjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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=\"{ 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: 'With helper text',\n\t\t\thelperText: 'Choose the option that fits best',\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],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'With error',\n\t\t\thelperText: 'This selection is required',\n\t\t\terror: true,\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],\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### Pre-selected and clearable\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-label=\"Clearable single\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tclearable />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singlePlaceholder\"\n\t\t\t\tinput-label=\"With placeholder\"\n\t\t\t\tplaceholder=\"Search for something...\"\n\t\t\t\t:options=\"options\" />\n\t\t</div>\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: 'bar',\n\t\t\tsinglePlaceholder: null,\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}\n</style>\n```\n\n### Disabled state\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-label=\"Disabled single\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tdisabled />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"multiValue\"\n\t\t\t\tinput-label=\"Disabled multi\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tdisabled />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz'],\n\t\t\tsingleValue: 'foo',\n\t\t\tmultiValue: ['foo', 'bar'],\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}\n</style>\n```\n\n### Label outside\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<label for=\"ext-single\">External label (single)</label>\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-id=\"ext-single\"\n\t\t\t\tlabel-outside\n\t\t\t\tplaceholder=\"Pick an option\"\n\t\t\t\t:options=\"options\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<label for=\"ext-multi\">External label (multi)</label>\n\t\t\t<NcSelect v-model=\"multiValue\"\n\t\t\t\tinput-id=\"ext-multi\"\n\t\t\t\tlabel-outside\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple />\n\t\t</div>\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.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: 4px;\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\n\t\tclass=\"select nc-select\"\n\t\t:class=\"{\n\t\t\t'select--legacy': isLegacy,\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:modelValue=\"$emit('update:modelValue', $event)\">\n\t\t<template v-if=\"multiple && !labelOutside && inputLabel\" #header>\n\t\t\t<label\n\t\t\t\t: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<!--\n\t\t\t\tvue-select's `attributes`/`events` are its search-slot contract, not\n\t\t\t\tHTML pass-through, so we forward only the combobox a11y attributes and\n\t\t\t\tevents one by one. This skips `attributes.ref` (a vue-select template\n\t\t\t\tref) and lets our own `modelValue`, `placeholder`, `label` and\n\t\t\t\t`disabled` win over their vue-select equivalents.\n\t\t\t\tNo placeholder when: multi mode (select__label is the placeholder) or a\n\t\t\t\tvalue is selected (the vs__selected overlay shows it instead).\n\t\t\t-->\n\t\t\t<NcTextField\n\t\t\t\t:id=\"attributes.id\"\n\t\t\t\tclass=\"vs__search\"\n\t\t\t\t:class=\"[inputClass]\"\n\t\t\t\t:type=\"attributes.type\"\n\t\t\t\t:modelValue=\"attributes.value\"\n\t\t\t\t:placeholder=\"multiple || modelValue ? '' : (placeholder || '')\"\n\t\t\t\t:label=\"!labelOutside && !multiple && inputLabel ? inputLabel : ''\"\n\t\t\t\t:labelOutside=\"labelOutside || multiple\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:required=\"inputRequired\"\n\t\t\t\t:role=\"attributes.role\"\n\t\t\t\t:tabindex=\"attributes.tabindex\"\n\t\t\t\t:readonly=\"attributes.readonly\"\n\t\t\t\t:autocomplete=\"attributes.autocomplete\"\n\t\t\t\t:aria-label=\"attributes['aria-label']\"\n\t\t\t\t:aria-describedby=\"[attributes['aria-describedby'], helperText ? `${inputId}-helper-text` : null].filter(Boolean).join(' ') || undefined\"\n\t\t\t\t:aria-autocomplete=\"attributes['aria-autocomplete']\"\n\t\t\t\t:aria-controls=\"attributes['aria-controls']\"\n\t\t\t\t:aria-owns=\"attributes['aria-owns']\"\n\t\t\t\t:aria-expanded=\"attributes['aria-expanded']\"\n\t\t\t\t:aria-activedescendant=\"attributes['aria-activedescendant']\"\n\t\t\t\t@keydown=\"events.keydown\"\n\t\t\t\t@keypress=\"events.keypress\"\n\t\t\t\t@focus=\"events.focus\"\n\t\t\t\t@blur=\"events.blur\"\n\t\t\t\t@compositionstart=\"events.compositionstart\"\n\t\t\t\t@compositionend=\"events.compositionend\"\n\t\t\t\t@update:modelValue=\"events.input({ target: { value: $event } })\" />\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\tfillColor=\"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=\"20\" />\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<!-- @slot Customize how a option is rendered. -->\n\t\t\t<slot name=\"option\" v-bind=\"option\">\n\t\t\t\t<NcEllipsisedOption\n\t\t\t\t\t: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<!-- @slot Customize how a selected option is rendered -->\n\t\t\t<slot name=\"selected-option\" v-bind=\"selectedOption\">\n\t\t\t\t<NcEllipsisedOption\n\t\t\t\t\t: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<!-- Helper text beneath the control, plus any consumer-provided footer slot -->\n\t\t<template v-if=\"helperText || $slots.footer\" #footer=\"data\">\n\t\t\t<p\n\t\t\t\tv-if=\"helperText\"\n\t\t\t\t:id=\"`${inputId}-helper-text`\"\n\t\t\t\tclass=\"select__helper-text\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'select__helper-text--error': error,\n\t\t\t\t\t'select__helper-text--success': success,\n\t\t\t\t}\">\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"success\"\n\t\t\t\t\tclass=\"select__helper-text-icon\"\n\t\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\t\tinline />\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-else-if=\"error\"\n\t\t\t\t\tclass=\"select__helper-text-icon\"\n\t\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\t\tinline />\n\t\t\t\t{{ helperText }}\n\t\t\t</p>\n\t\t\t<slot name=\"footer\" v-bind=\"data\" />\n\t\t</template>\n\t\t<template v-for=\"name in forwardedSlots()\" :key=\"name\" #[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 {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { VueSelect } from '@nextcloud/vue-select'\nimport { h, warn } from 'vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport NcTextField from '../NcTextField/NcTextField.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcTextField,\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 *\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\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text shown beneath the select.\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 * Toggle the error state, styling the helper text as an error.\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 * Toggle the success state, styling the helper text as a success.\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 * 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, (event: KeyboardEvent) => void>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('vue').ComponentPublicInstance} vm - VueSelect instance\n\t\t\t * @return {Record<number, (event: KeyboardEvent) => void>} 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\tisLegacy,\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCheck,\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\t// `nc-select__dropdown` scopes our menu styles: the menu is\n\t\t\t\t\t\t// teleported to <body>, so it cannot be reached by the\n\t\t\t\t\t\t// `.nc-select` root scope and would otherwise style every\n\t\t\t\t\t\t// vue-select dropdown on the page (cross-version conflicts).\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating', 'nc-select__dropdown')\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\t// Flip first so the placement-dependent middleware below see the final placement\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// On top placement, leave a gap for the floating label overhang\n\t\t\t\t\t\t\t// (about half the floated label line-height) instead of connecting seamlessly\n\t\t\t\t\t\t\toffset(({ placement }) => (placement.startsWith('top') ? 10 : -1)),\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(Object.entries(this.$props)\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)))\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\n\t\t/**\n\t\t * Consumer-provided slots forwarded to vue-select, excluding `footer`\n\t\t * which we render ourselves to host the helper text.\n\t\t *\n\t\t * `$slots` is not reactive, so this is a method (re-evaluated on every\n\t\t * render) rather than a computed, to keep the forwarded slot list fresh.\n\t\t *\n\t\t * @return {string[]}\n\t\t */\n\t\tforwardedSlots() {\n\t\t\treturn Object.keys(this.$slots).filter((name) => name !== 'footer')\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@use '../../assets/input-border.scss' as border;\n\n// Helper text beneath the control, matching NcInputField's helper text.\n.nc-select.v-select.select .select__helper-text {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 0;\n\tpadding-block: 4px;\n\tpadding-inline: var(--border-radius-element);\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: var(--default-font-size);\n\toverflow-wrap: anywhere;\n\n\t&--error {\n\t\tcolor: var(--color-text-error);\n\t}\n\n\t&--success {\n\t\tcolor: var(--color-text-success);\n\t}\n\n\t.select__helper-text-icon {\n\t\tmargin-inline-end: 8px;\n\t}\n}\n\n.nc-select.v-select.select {\n\t/* Custom vue-select CSS variables scoped to NcSelect */\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-element);\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 8px;\n\t/* Override default vue-select styles */\n\tmin-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input, 2px));\n\tmin-width: 260px;\n\t// 6px block-start reserves space for the floated label, matching\n\t// NcInputField (.input-field margin-block-start) so fields line up in a row.\n\tmargin: 6px 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.vs__selected {\n\t\t// min-height (not height) so multi-line entries like NcSelectUsers chips can grow\n\t\tmin-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\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__search {\n\t\t// NcTextField filling the search area; padding-end reserved for the actions overlay\n\t\twidth: 100%;\n\t\t--input-padding-end: calc(var(--default-clickable-area) + var(--default-grid-baseline));\n\n\t\t// Neutralize vue-select defaults on the wrapper div (no longer the native input).\n\t\t// The height reset also beats legacy global styles (e.g. bundled by the server)\n\t\t// that force a fixed height on `.vs__search` from the old native-input design.\n\t\tborder: none !important;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: auto !important;\n\t}\n\n\t// Force floating label when a value is selected (search input is empty but a value exists)\n\t.vs__selected-options:has(.vs__selected) .vs__search {\n\t\t.input-field__input + .input-field__label {\n\t\t\t--input-label-font-size: var(--font-size-small, 13px);\n\t\t\tline-height: 1.5;\n\t\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\t\tfont-weight: 500;\n\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\t\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t}\n\t}\n\n\t// Single mode: border is on NcTextField, dropdown-toggle is invisible\n\t&:not(.vs--multiple) .vs__dropdown-toggle {\n\t\tpadding: 0;\n\t\toverflow: visible;\n\t\tborder: none !important;\n\t\tbox-shadow: none !important;\n\t\tbackground: transparent;\n\t}\n\n\t// Anchor the absolutely-positioned actions to the control itself, so content\n\t// rendered below it inside .v-select (e.g. the helper text) does not shift\n\t// the caret's vertical centering.\n\t.vs__dropdown-toggle {\n\t\tposition: relative;\n\t}\n\n\t.vs__actions {\n\t\tposition: absolute;\n\t\tz-index: 999;\n\t\tinset-inline-end: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 100%;\n\t\tmargin-block-start: 1px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.vs__clear {\n\t\tmargin-inline-end: 2px;\n\t}\n\n\t&.vs--open {\n\t\t// Remove bottom border-radius when dropdown is open\n\t\t.vs__search .input-field__input {\n\t\t\tborder-end-start-radius: 0 !important;\n\t\t\tborder-end-end-radius: 0 !important;\n\t\t}\n\t}\n\n\t&.vs--disabled {\n\t\t// Override vue-select's disabled background on all internal elements\n\t\t// to prevent stacking with NcInputField's own background\n\t\t.vs__clear,\n\t\t.vs__dropdown-toggle,\n\t\t.vs__open-indicator,\n\t\t.vs__open-indicator-button,\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// Lighter border in disabled state to match single mode (NcInputField uses --color-border-dark)\n\t\t.vs__dropdown-toggle {\n\t\t\t--input-border-box-shadow-light: 0 -1px var(--color-border-dark),\n\t\t\t\t0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);\n\t\t\t--input-border-box-shadow-dark: 0 1px var(--color-border-dark),\n\t\t\t\t0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);\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__dropdown-toggle {\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto !important;\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: the menu is detached above the select (calculatePosition leaves a\n\t// gap for the floating label, which stays in its usual top position),\n\t// so keep the regular fully-rounded borders instead of flattening the seam\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__search .input-field__input {\n\t\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\t}\n\n\t\t\t// !important to beat the later-defined down-state open rule\n\t\t\t// (.vs--multiple.vs--open .vs__dropdown-toggle) of equal specificity\n\t\t\t&.vs--multiple .vs__dropdown-toggle {\n\t\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\t\t// Bottom is a regular outer edge here, not a divider seam\n\t\t\t\tborder-block-end-color: var(--color-main-text) !important;\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: unset;\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search:has(.input-field__input[readonly]) {\n\t\t\tposition: absolute;\n\t\t}\n\t\tpadding: 0;\n\t\tborder: none;\n\t\toverflow: visible;\n\t}\n\n\t// Multi-select: border on dropdown-toggle (contains tags + input)\n\t// NcTextField is transparent; floating label via #header slot\n\t&.vs--multiple {\n\t\t// The multiple variant otherwise renders ~2px wider than the single one\n\t\t// and overflows its container; inset it by 1px on each side to align.\n\t\tmargin-inline: 1px;\n\n\t\t.vs__dropdown-toggle {\n\t\t\t// Use transparent border in closed state to reserve the same space\n\t\t\t// as the open state's real border, prevents layout jump on click\n\t\t\tborder: var(--border-width-input-focused, 2px) solid transparent;\n\t\t\tbox-shadow: var(--input-border-box-shadow);\n\t\t\t// Top padding for floating label clearance, no bottom padding\n\t\t\tpadding-block: calc(var(--default-grid-baseline) * 1.5) 0;\n\t\t\t// Left padding so tags don't overlap the border-radius curve,\n\t\t\t// right padding reserved for the actions overlay (chevron)\n\t\t\tpadding-inline: var(--default-grid-baseline) calc(var(--default-clickable-area) + var(--default-grid-baseline));\n\t\t\toverflow: visible;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t// Wider reservation when the clear button is shown next to the chevron\n\t\t&:has(.vs__clear) .vs__dropdown-toggle {\n\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area));\n\t\t}\n\n\t\t// When open, switch to visible border with subtle bottom divider\n\t\t&.vs--open .vs__dropdown-toggle {\n\t\t\tbox-shadow: none !important;\n\t\t\tborder-color: var(--color-main-text);\n\t\t\t// Subtle divider line between tags and dropdown (not fully transparent)\n\t\t\tborder-block-end-color: var(--color-border-maxcontrast);\n\t\t\tborder-end-start-radius: 0;\n\t\t\tborder-end-end-radius: 0;\n\t\t\toutline: 2px solid var(--color-main-background);\n\t\t}\n\n\t\t// Remove NcTextField border in multi mode, border is on dropdown-toggle\n\t\t.vs__search .input-field__input {\n\t\t\tbox-shadow: none !important;\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t// NcTextField shares flex row with tags, always inline, no absolute hiding.\n\t\t// No min-width: it may shrink fully so it never forces an empty wrap row\n\t\t// (matches vue-select's own search sizing)\n\t\t.vs__search {\n\t\t\twidth: 0;\n\t\t\tflex-grow: 1;\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t// No-wrap: clip overflow inside the toggle (needs to be here\n\t\t// for specificity to beat the overflow: visible above)\n\t\t&.select--no-wrap {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n\t\t\t.vs__actions {\n\t\t\t\t// Slight fade for non-wrap tags display\n\t\t\t\tbackground: linear-gradient(90deg, transparent, var(--color-main-background) 10%, var(--color-main-background) 100%);\n\t\t\t\tmargin-block: 0px;\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\theight: calc(100% - 6px);\n\t\t\t}\n\t\t}\n\n\t\t// No label margin needed, label is via #header\n\t\t.vs__search .input-field {\n\t\t\tmargin-block-start: 0;\n\t\t}\n\n\t\t// Match NcTextField height to tag row height for consistent toggle sizing\n\t\t.vs__search .input-field__main-wrapper {\n\t\t\theight: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\t\tmargin: calc(var(--default-grid-baseline) / 2) 0;\n\t\t}\n\n\t\t// Label: centered inside toggle when empty (placeholder-like),\n\t\t// floats above border when has value or open (matches NcInputField)\n\t\t.select__label {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\tinset-inline-start: var(--border-width-input-focused, 2px);\n\t\t\t// Center vertically regardless of toggle height\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tmargin-inline: var(--border-radius-element);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tpointer-events: none;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmax-width: calc(100% - var(--clickable-area-large));\n\t\t\ttransition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t\t}\n\n\t\t// Float label when has tags or dropdown is open\n\t\t&:has(.vs__selected) .select__label,\n\t\t&.vs--open .select__label {\n\t\t\t--input-label-font-size: var(--font-size-small, 13px);\n\t\t\tfont-size: var(--input-label-font-size);\n\t\t\tline-height: 1.5;\n\t\t\t// Match NcInputField: half the line-height above the border\n\t\t\ttop: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\t\ttransform: none;\n\t\t\tfont-weight: 500;\n\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\tmargin-inline: calc(var(--border-radius-element) - var(--default-grid-baseline));\n\t\t\ttransition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick);\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t// In single mode, overlay the selected value on top of the NcTextField input area\n\t\t// so it appears inside the border (which is on the NcTextField, not the toggle)\n\t\t.vs__selected-options {\n\t\t\tposition: relative;\n\t\t\tflex-wrap: nowrap;\n\t\t\t// Ensure height even when search input is hidden (vs--unsearchable)\n\t\t\tmin-height: var(--default-clickable-area);\n\t\t}\n\n\t\t.vs__selected {\n\t\t\tposition: absolute;\n\t\t\t// Skip the label clearance so the overlay covers only the input box,\n\t\t\t// keeping (multi-line) content like NcSelectUsers centered on the input\n\t\t\t// (6px = NcInputField .input-field margin-block-start)\n\t\t\tinset-block: 6px 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tinset-inline-end: 0;\n\t\t\tmargin: 0;\n\t\t\tz-index: 2; // above vs__search (z-index: 1 from vue-select default)\n\t\t\tpointer-events: none;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tpadding-block: 0;\n\t\t\t// Match the input text position: main-wrapper padding (border width) + input padding\n\t\t\tpadding-inline: calc(var(--border-radius-element) + var(--border-width-input-focused, 2px)) var(--input-padding-end, calc(var(--default-clickable-area) + var(--default-grid-baseline)));\n\t\t\tbackground: unset !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\theight: unset;\n\t\t\tmin-height: unset;\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tcolor: var(--color-main-text);\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t// No label clearance to skip when the label is external\n\t\t&:has(.input-field--label-outside) .vs__selected {\n\t\t\tinset-block-start: 0;\n\t\t}\n\n\t\t// Extra padding when clear button visible (clear + chevron need more space)\n\t\t&:has(.vs__clear) .vs__selected {\n\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area));\n\t\t}\n\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix color to be accessible while typing\n\t\t\t\topacity: 0.4;\n\t\t\t}\n\t\t}\n\n\t\t// Hide the selected value as soon as the user types a query\n\t\t// (restores vue-select's default, overridden by our display: flex above)\n\t\t&.vs--searching .vs__selected {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n// Dropdown menu is teleported to <body>, so it can't live under the\n// `.nc-select` root scope. The `.nc-select__dropdown` class (added in\n// calculatePosition) scopes it instead, so these styles and CSS variables\n// only affect our menus and never leak to other vue-select instances.\n.nc-select__dropdown.vs__dropdown-menu {\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-element);\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-option-padding: 8px 20px;\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--color-border-maxcontrast);\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\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// Top placement: the menu is detached from the select (gap for the\n\t\t// floating label), so it keeps a full border on all sides\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) !important;\n\t\t\tborder-top-style: var(--vs-border-style) !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\t0 2px 0 var(--color-main-background), // Bottom\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-maxcontrast) !important;\n\t}\n}\n\n// Border for .vs__dropdown-toggle, inlined from inputLikeBorder mixin\n// because the mixin's @media #{&} produces doubled selectors when nested.\n.nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow-light: 0 -1px var(--vs-border-color),\n\t\t0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);\n\t--input-border-box-shadow-dark: 0 -1px var(--vs-border-color),\n\t\t0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);\n\t--input-border-box-shadow: var(--input-border-box-shadow-light);\n\tborder: none;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: var(--input-border-box-shadow);\n}\n\n// Hover: use .vs--disabled on parent (toggle div never has [disabled] attribute)\n.nc-select.v-select.select:not(.vs--disabled) .vs__dropdown-toggle:hover {\n\tbox-shadow: 0 0 0 1px var(--vs-border-color);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.nc-select.v-select.select .vs__dropdown-toggle {\n\t\t--input-border-box-shadow: var(--input-border-box-shadow-dark);\n\t}\n}\n\n[data-theme-dark] .nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow: var(--input-border-box-shadow-dark);\n}\n\n[data-theme-light] .nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow: var(--input-border-box-shadow-light);\n}\n\n.select--legacy.nc-select.v-select.select .vs__dropdown-toggle {\n\tbox-shadow: 0 0 0 1px var(--vs-border-color);\n\n\t&:hover:not([disabled]) {\n\t\tbox-shadow: 0 0 0 2px var(--vs-border-color);\n\t}\n}\n</style>\n"],"names":["NcTextField","Close","_openBlock","_createBlock","_mergeProps","_withCtx","_createVNode","_normalizeClass","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_createElementBlock","_createTextVNode","_renderList"],"mappings":"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"}

package/dist/chunks/{NcSelectTags-I2hJaNax.mjs → NcSelectTags.mjs}

@@ -1,11 +1,11 @@
-import { r as register, j as t0, a as t } from "./_l10n-wdIzZwir.mjs";
-import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { N as NcEllipsisedOption } from "./NcEllipsisedOption-D6Amb91K.mjs";
-import { N as NcSelect } from "./NcSelect--kERLlBK.mjs";
+import { r as register, j as t0, a as t } from "./_l10n.mjs";
+import { l as logger } from "./logger.mjs";
+import { N as NcEllipsisedOption } from "./NcEllipsisedOption.mjs";
+import { N as NcSelect } from "./NcSelect.mjs";
 import axios from "@nextcloud/axios";
 import { generateRemoteUrl } from "@nextcloud/router";
 import { resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 register(t0);
 function xmlToJson(xml) {
   let obj = {};
@@ -301,4 +301,4 @@ const NcSelectTags = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_ren
 export {
   NcSelectTags as N
 };
-//# sourceMappingURL=NcSelectTags-I2hJaNax.mjs.map
+//# sourceMappingURL=NcSelectTags.mjs.map

package/dist/chunks/NcSelectTags.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelectTags.mjs","sources":["../../src/components/NcSelectTags/api.js","../../src/components/NcSelectTags/NcSelectTags.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport axios from '@nextcloud/axios'\nimport { generateRemoteUrl } from '@nextcloud/router'\nimport { logger } from '../../utils/logger.ts'\n\n/**\n * @param {Document} xml - The xml document\n */\nfunction xmlToJson(xml) {\n\tlet obj = {}\n\n\tif (xml.nodeType === 1) {\n\t\tif (xml.attributes.length > 0) {\n\t\t\tobj['@attributes'] = {}\n\t\t\tfor (let j = 0; j < xml.attributes.length; j++) {\n\t\t\t\tconst attribute = xml.attributes.item(j)\n\t\t\t\tobj['@attributes'][attribute.nodeName] = attribute.nodeValue\n\t\t\t}\n\t\t}\n\t} else if (xml.nodeType === 3) {\n\t\tobj = xml.nodeValue\n\t}\n\n\tif (xml.hasChildNodes()) {\n\t\tfor (let i = 0; i < xml.childNodes.length; i++) {\n\t\t\tconst item = xml.childNodes.item(i)\n\t\t\tconst nodeName = item.nodeName\n\t\t\tif (typeof (obj[nodeName]) === 'undefined') {\n\t\t\t\tobj[nodeName] = xmlToJson(item)\n\t\t\t} else {\n\t\t\t\tif (typeof obj[nodeName].push === 'undefined') {\n\t\t\t\t\tconst old = obj[nodeName]\n\t\t\t\t\tobj[nodeName] = []\n\t\t\t\t\tobj[nodeName].push(old)\n\t\t\t\t}\n\t\t\t\tobj[nodeName].push(xmlToJson(item))\n\t\t\t}\n\t\t}\n\t}\n\treturn obj\n}\n\n/**\n * @param {string} xml - The XML string to be parsed into a XML document\n * @return {Document}\n */\nfunction parseXml(xml) {\n\tlet dom = null\n\ttry {\n\t\tdom = (new DOMParser()).parseFromString(xml, 'text/xml')\n\t} catch (error) {\n\t\tlogger.error('[NcSelectTags] Failed to parse xml document', { error })\n\t}\n\treturn dom\n}\n\n/**\n * @param {string} xml - The XML result to be parsed\n */\nfunction xmlToTagList(xml) {\n\tconst json = xmlToJson(parseXml(xml))\n\tconst list = json['d:multistatus']['d:response']\n\tconst result = []\n\tfor (const index in list) {\n\t\tconst tag = list[index]['d:propstat']\n\n\t\tif (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {\n\t\t\tcontinue\n\t\t}\n\t\tresult.push({\n\t\t\tid: parseInt(tag['d:prop']['oc:id']['#text']),\n\t\t\tdisplayName: tag['d:prop']['oc:display-name']['#text'],\n\t\t\tcanAssign: tag['d:prop']['oc:can-assign']['#text'] === 'true',\n\t\t\tuserAssignable: tag['d:prop']['oc:user-assignable']['#text'] === 'true',\n\t\t\tuserVisible: tag['d:prop']['oc:user-visible']['#text'] === 'true',\n\t\t})\n\t}\n\treturn result\n}\n\n/**\n * Get tags from backend\n */\nasync function searchTags() {\n\tif (window.NextcloudVueDocs) {\n\t\treturn Promise.resolve(xmlToTagList(window.NextcloudVueDocs.tags))\n\t}\n\n\tconst result = await axios({\n\t\tmethod: 'PROPFIND',\n\t\turl: generateRemoteUrl('dav') + '/systemtags/',\n\t\tdata: `<?xml version=\"1.0\"?>\n\t\t\t\t\t<d:propfind  xmlns:d=\"DAV:\" xmlns:oc=\"http://owncloud.org/ns\">\n\t\t\t\t\t  <d:prop>\n\t\t\t\t\t\t<oc:id />\n\t\t\t\t\t\t<oc:display-name />\n\t\t\t\t\t\t<oc:user-visible />\n\t\t\t\t\t\t<oc:user-assignable />\n\t\t\t\t\t\t<oc:can-assign />\n\t\t\t\t\t  </d:prop>\n\t\t\t\t\t</d:propfind>`,\n\t})\n\treturn xmlToTagList(result.data)\n}\n\nexport {\n\tsearchTags,\n}\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Single tag selector\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tag\" :multiple=\"false\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: 1,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Multiple tag selector\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :multiple=\"true\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t1,\n\t\t\t\t2,\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom filter\nBecause of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `limit` prop to `null`:\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :limit=\"null\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t1,\n\t\t\t\t2,\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n```\n\nIt's also possible to apply any custom filter logic by setting the `optionsFilter` function-prop to any custom function receiving the tag element and the index:\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :options-filter=\"customFilter\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t3,\n\t\t\t],\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Implement your custom filter logic to filter tags delivered\n\t\t* by the server\n\t\t*\n\t\t* @param {object} the tag object\n\t\t* @param {int} the index of the object inside the collection\n\t\t*/\n\t\tcustomFilter(element, index) {\n\t\t\t/*\n\t\t\t* Tag objects returned by the server will have the\n\t\t\t* following properties (see also api.js):\n\t\t\t* id, displayName, canAssign, userAssignable, userVisible\n\t\t\t*/\n\t\t\treturn element.id >= 2 && element.displayName !== '' && element.canAssign && element.userAssignable && element.userVisible\n\t\t}\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcSelect\n\t\tv-bind=\"propsToForward\"\n\t\t:options=\"availableOptions\"\n\t\t:closeOnSelect=\"!multiple\"\n\t\t:modelValue=\"localValue\"\n\t\t@search=\"search = $event\"\n\t\t@update:modelValue=\"handleInput\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption\n\t\t\t\t:name=\"getOptionLabel(option)\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption\n\t\t\t\t:name=\"getOptionLabel(selectedOption)\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $slots\" #[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</NcSelect>\n</template>\n\n<script>\nimport { t } from '../../l10n.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport { searchTags } from './api.js'\n\nexport default {\n\tname: 'NcSelectTags',\n\n\tcomponents: {\n\t\tNcEllipsisedOption,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t// Add NcSelect prop defaults and populate $props\n\t\t...NcSelect.props,\n\n\t\t/**\n\t\t * Enable automatic fetching of tags\n\t\t *\n\t\t * If `false`, available tags must be passed using the `options` prop\n\t\t */\n\t\tfetchTags: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Callback to generate the label text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#getoptionlabel\n\t\t */\n\t\tgetOptionLabel: {\n\t\t\ttype: Function,\n\t\t\tdefault: (option) => {\n\t\t\t\tconst { displayName, userVisible, userAssignable } = option\n\t\t\t\tif (userVisible === false) {\n\t\t\t\t\treturn t('{tag} (invisible)', { tag: displayName })\n\t\t\t\t}\n\t\t\t\tif (userAssignable === false) {\n\t\t\t\t\treturn t('{tag} (restricted)', { tag: displayName })\n\t\t\t\t}\n\t\t\t\treturn displayName\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of tags to display in the dropdown list\n\t\t *\n\t\t * Because of compatibility reasons only 5 tag entries are shown by\n\t\t * default\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * This prop automatically sets the internal `closeOnSelect` prop to\n\t\t * its boolean opposite\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: true,\n\t\t},\n\n\t\t/**\n\t\t * Callback to filter available options\n\t\t */\n\t\toptionsFilter: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable passing of `value` prop and emitted `input` events as-is\n\t\t * i.e. for usage with `v-model`\n\t\t *\n\t\t * If `true`, custom internal `value` and `input` handling is disabled\n\t\t */\n\t\tpassthru: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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: t('Select a tag'),\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Number, Array, Object],\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'update:modelValue',\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\tavailableTags: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavailableOptions() {\n\t\t\tif (this.optionsFilter) {\n\t\t\t\treturn this.tags.filter(this.optionsFilter)\n\t\t\t}\n\t\t\treturn this.tags\n\t\t},\n\n\t\tlocalValue() {\n\t\t\tif (this.passthru) {\n\t\t\t\treturn this.modelValue\n\t\t\t}\n\t\t\tif (this.tags.length === 0) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tif (this.multiple) {\n\t\t\t\treturn this.modelValue\n\t\t\t\t\t.filter((tag) => tag !== '')\n\t\t\t\t\t.map((id) => this.tags.find((tag2) => tag2.id === id))\n\t\t\t} else {\n\t\t\t\treturn this.tags.find((tag) => tag.id === this.modelValue)\n\t\t\t}\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst propsToForward = { ...this.$props }\n\t\t\t// Props handled by this component\n\t\t\tdelete propsToForward.fetchTags\n\t\t\tdelete propsToForward.optionsFilter\n\t\t\tdelete propsToForward.passthru\n\n\t\t\treturn propsToForward\n\t\t},\n\n\t\ttags() {\n\t\t\tif (!this.fetchTags) {\n\t\t\t\treturn this.options\n\t\t\t}\n\t\t\treturn this.availableTags\n\t\t},\n\t},\n\n\tasync created() {\n\t\tif (!this.fetchTags) {\n\t\t\treturn\n\t\t}\n\t\ttry {\n\t\t\tconst result = await searchTags()\n\t\t\tthis.availableTags = result\n\t\t} catch (error) {\n\t\t\tlogger.error('[NcSelectTags] Loading systemtags failed', error)\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleInput(value) {\n\t\t\tif (this.passthru) {\n\t\t\t\tthis.$emit('update:modelValue', value)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.multiple) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on input events of the multiselect field\n\t\t\t\t *\n\t\t\t\t * @type {number|number[]}\n\t\t\t\t */\n\t\t\t\tthis.$emit('update:modelValue', value.map((element) => element.id))\n\t\t\t} else {\n\t\t\t\tif (value === null) {\n\t\t\t\t\tthis.$emit('update:modelValue', null)\n\t\t\t\t} else {\n\t\t\t\t\tthis.$emit('update:modelValue', value.id)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n"],"names":["_createBlock","_mergeProps","_withCtx","_createVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":"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"}

package/dist/chunks/{NcSelectUsers-K14Bepkq.mjs → NcSelectUsers.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcSelectUsers-YF5729PJ.css';
+import '../assets/NcSelectUsers.css';
 import { defineComponent, useModel, ref, watch, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, mergeModels } from "vue";
-import { N as NcListItemIcon } from "./NcListItemIcon-Dl_tfkk9.mjs";
-import { N as NcSelect } from "./NcSelect--kERLlBK.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcListItemIcon } from "./NcListItemIcon.mjs";
+import { N as NcSelect } from "./NcSelect.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcSelectUsers",
   props: /* @__PURE__ */ mergeModels({
@@ -69,8 +69,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcSelectUsers = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e8e18fd3"]]);
+const NcSelectUsers = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dbcc7078"]]);
 export {
   NcSelectUsers as N
 };
-//# sourceMappingURL=NcSelectUsers-K14Bepkq.mjs.map
+//# sourceMappingURL=NcSelectUsers.mjs.map

package/dist/chunks/NcSelectUsers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelectUsers.mjs","sources":["../../src/components/NcSelectUsers/NcSelectUsers.vue"],"sourcesContent":["<!--\n\t- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n\t- SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Nextcloud user picker\n\n#### 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<NcSelectUsers v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport svgAccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport svgEmail from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\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\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\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},\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},\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},\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},\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\ticonSvg: svgAccountGroup,\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: svgEmail,\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\tprops: {\n\t\t\tinputLabel: 'Multiple user select (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: '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},\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},\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},\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},\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},\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\ticonSvg: svgAccountGroup,\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: svgEmail,\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<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcSelect from '../NcSelect/index.js'\n\nexport interface NcSelectUsersModel {\n\tid: string\n\n\t/**\n\t * Main display name\n\t */\n\tdisplayName: string\n\n\t/**\n\t * The user id.\n\t * Will be used to fetch the user status if not disabled.\n\t */\n\tuser?: string\n\n\t/**\n\t * The secondary displayname (e.g. the email address).\n\t */\n\tsubname?: string\n\n\t/**\n\t * Optional icon to use as the avatar.\n\t * Setting this will disable the automatic avatar loading.\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Accessible name for the icon.\n\t */\n\ticonName?: string\n\n\t/**\n\t * If this is a guest user.\n\t * Needed as guest users have a different API endpoint for avatar loading.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Set if this is not a regular user.\n\t * This will disable user status and avatar loading.\n\t */\n\tisNoUser?: boolean\n}\n\n/**\n * Currently selected value.\n * The `v-model` directive may be used for two-way data binding.\n *\n * If the `multiple` property is set then an array of users is emitted,\n * otherwise a single user data object will be emitted.\n */\nconst modelValue = defineModel<NcSelectUsersModel | NcSelectUsersModel[]>('modelValue')\n\ndefineProps<{\n\t/**\n\t * `aria-label` for the clear input button.\n\t *\n\t * @default 'Clear selected'\n\t */\n\tariaLabelClearSelected?: string\n\n\t/**\n\t * `aria-label` for the listbox element.\n\t *\n\t * @default 'Options'\n\t */\n\tariaLabelListbox?: string\n\n\t/**\n\t * Allows to customize the `aria-label` for the deselect-option button.\n\t *\n\t * @default (label) => `Deselect ${label}`\n\t */\n\tariaLabelDeselectOption?: (label: string) => string\n\n\t/**\n\t * Disable the component.\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Input element id.\n\t *\n\t * @default random generated id\n\t */\n\tinputId?: string\n\n\t/**\n\t * Visible label for the input element\n\t *\n\t * @default 'Select account'\n\t */\n\tinputLabel?: string\n\n\t/**\n\t * Pass true if you are using an external label.\n\t * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * Keep the dropdown open after selecting an entry.\n\t */\n\tkeepOpen?: boolean\n\n\t/**\n\t * Show a loading icon.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Allow selection of multiple options\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * Disable automatic wrapping when selected options overflow the width.\n\t */\n\tnoWrap?: boolean\n\n\t/**\n\t * Array of users or similar object (e.g. groups or guest users).\n\t */\n\toptions: NcSelectUsersModel[]\n\n\t/**\n\t * Placeholder text.\n\t *\n\t * @default ''\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Enable if a value is required for native form validation.\n\t */\n\trequired?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the user enters some query.\n\t * This can be used to asynchronously fetch more options.\n\t */\n\tsearch: [string]\n}>()\n\nconst search = ref('')\nwatch(search, () => emit('search', search.value))\n\n// Avatar size so the component has the same size as Nc*Field\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst avatarSize = clickableArea - 2 * gridBaseLine\n\n/**\n * Filter function to search users.\n *\n * @param option - The option to check\n * @param option.subname - The second line to check (often the email address)\n * @param label - The label of the option\n * @param search - The current search string\n */\nfunction filterBy(option: { subname?: string }, label: string, search: string) {\n\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\tconst match = search.match(EMAIL_NOTATION)\n\tconst subname = option.subname?.toLocaleLowerCase() ?? ''\n\treturn (match && subname.indexOf(match[1]!.toLocaleLowerCase()) > -1)\n\t\t|| (`${label} ${option.subname}`\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n}\n</script>\n\n<template>\n\t<NcSelect\n\t\tv-model=\"modelValue\"\n\t\tclass=\"nc-select-users\"\n\t\tv-bind=\"$props\"\n\t\t:filterBy\n\t\tlabel=\"displayName\"\n\t\t@search=\"search = $event\">\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:avatarSize=\"32\"\n\t\t\t\t:name=\"option.displayName\"\n\t\t\t\t:search />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:avatarSize\n\t\t\t\t:name=\"selectedOption.displayName\"\n\t\t\t\tnoMargin\n\t\t\t\t:search />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<style scoped lang=\"css\">\n/* Ensure sufficient height for the user avatar and status */\n.nc-select-users.vs--single :deep(.input-field__main-wrapper) {\n\t--default-clickable-area: 42px;\n\t/* Default clickable area + 2*4px padding of the input */\n\tinput {\n\t\tpadding-block: 4px !important;\n\t}\n}\n\n.nc-select-users.vs--multiple :deep(.vs__selected) {\n\tpadding-inline: 0 5px !important;\n}\n</style>\n"],"names":["_useModel","search","_openBlock","_createBlock","_unref","_mergeProps","$props","_withCtx","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6NA,UAAM,aAAaA,SAAsD,SAAC,YAAY;AAuFtF,UAAM,OAAO;AAQb,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,KAAK,CAAC;AAGhD,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;AAUvC,aAAS,SAAS,QAA8B,OAAeC,SAAgB;AAE9E,YAAM,iBAAiB;AAEvB,YAAM,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAA,KAAuB;AACvD,aAAQ,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAG,kBAAA,CAAmB,IAAI,MAC7D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,oBACA,QAAQA,QAAO,kBAAA,CAAmB,IAAI;AAAA,IAC1C;;AAIC,aAAAC,aAAAC,YAsBWC,iBAtBXC,WAsBW;AAAA,oBArBD,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QACnB,OAAM;AAAA,MAAA,GACEC,KAAAA,QAAM;AAAA,QACb;AAAA,QACD,OAAM;AAAA,QACL,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,OAAA,QAAS;AAAA,MAAA;QACP,QAAMC,QAChB,CAIW,WALa;AAAA,UACxBC,YAIWJ,MAAA,cAAA,GAJXC,WAIW,QAHI;AAAA,YACb,YAAY;AAAA,YACZ,MAAM,OAAO;AAAA,YACb,QAAA,OAAA;AAAA,UAAA;;QAEQ,mBAAeE,QACzB,CAKW,mBAN8B;AAAA,UACzCC,YAKWJ,MAAA,cAAA,GALXC,WAKW,gBAJY;AAAA,YACrB;AAAA,YACA,MAAM,eAAe;AAAA,YACtB,UAAA;AAAA,YACC,QAAA,OAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/{NcSettingsSection-Caz1fuWt.mjs → NcSettingsSection.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcSettingsSection-f5rBJsKJ.css';
+import '../assets/NcSettingsSection.css';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, createTextVNode, unref, createVNode, renderSlot } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { r as register, E as t26, a as t } from "./_l10n-wdIzZwir.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+import { r as register, E as t27, a as t } from "./_l10n.mjs";
 const _sfc_main$1 = {
   name: "HelpCircleIcon",
   emits: ["click"],
@@ -45,7 +45,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16, _hoisted_1$1);
 }
 const HelpCircle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
-register(t26);
+register(t27);
 const _hoisted_1 = { class: "settings-section" };
 const _hoisted_2 = { class: "settings-section__name" };
 const _hoisted_3 = ["aria-label", "href", "title"];
@@ -88,4 +88,4 @@ const NcSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId",
 export {
   NcSettingsSection as N
 };
-//# sourceMappingURL=NcSettingsSection-Caz1fuWt.mjs.map
+//# sourceMappingURL=NcSettingsSection.mjs.map

package/dist/chunks/NcSettingsSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSection.mjs","sources":["../../node_modules/vue-material-design-icons/HelpCircle.vue","../../src/components/NcSettingsSection/NcSettingsSection.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon help-circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"HelpCircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component is to be used in the settings section of nextcloud.\n\n### Examples\n\n```vue\n<template>\n\t<div>\n\t\t<NcSettingsSection name=\"Two-factor authentication\"\n\t\t\tdescription=\"Two-factor authentication can be enforced for all accounts and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.\"\n\t\t\tdoc-url=\"https://docs.nextcloud.com/server/19/go.php?to=admin-2fa\">\n\t\t\t<NcCheckboxRadioSwitch type=\"switch\">\n\t\t\t\tEnforce two-factor authentication\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</NcSettingsSection>\n\n\t\t<NcSettingsSection name=\"Server-side encryption\"\n\t\t\tdescription=\"Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.\">\n\t\t\t<NcCheckboxRadioSwitch type=\"switch\">\n\t\t\t\tEnable server-side encryption\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</NcSettingsSection>\n\n\t\t<NcSettingsSection name=\"OAuth 2.0 clients\"\n\t\t\tdescription=\"OAuth 2.0 allows external services to request access to Nextcloud.\"\n\t\t\tdoc-url=\"https://docs.nextcloud.com/server/latest/admin_manual/configuration_server/oauth2.html\">\n\n\t\t\tAny content here\n\n\t\t</NcSettingsSection>\n\t</div>\n</template>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport HelpCircle from 'vue-material-design-icons/HelpCircle.vue'\nimport { t } from '../../l10n.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * The name of the settings section.\n\t * This is used for the headline and needs to be set.\n\t */\n\tname: string\n\n\t/**\n\t * Further informational description of the section.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The URL for the documentation about this section\n\t */\n\tdocUrl?: string\n}>(), {\n\tdescription: '',\n\tdocUrl: '',\n})\n\ndefineSlots<{\n\t/**\n\t * The section content.\n\t */\n\tdefault?: Slot\n}>()\n\n/**\n * Accessible name of the link element.\n * This should only provide a textual description of the \"help\"-icon.\n */\nconst ariaLabel = t('External documentation')\n</script>\n\n<template>\n\t<div class=\"settings-section\">\n\t\t<h2 class=\"settings-section__name\">\n\t\t\t{{ name }}\n\t\t\t<a\n\t\t\t\tv-if=\"docUrl\"\n\t\t\t\t:aria-label\n\t\t\t\tclass=\"settings-section__info\"\n\t\t\t\t:href=\"docUrl\"\n\t\t\t\trel=\"noreferrer nofollow\"\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\t:title=\"ariaLabel\">\n\t\t\t\t<HelpCircle :size=\"20\" />\n\t\t\t</a>\n\t\t</h2>\n\t\t<p\n\t\t\tv-if=\"description\"\n\t\t\tclass=\"settings-section__desc\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<slot />\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n$maxWidth: 900px;\n$sectionMargin: calc(var(--default-grid-baseline) * 7);\n\n.settings-section {\n\tdisplay: block;\n\tpadding: 0 0 calc(var(--default-grid-baseline) * 5) 0;\n\tmargin: $sectionMargin;\n\twidth: min($maxWidth, 100% - calc($sectionMargin * 2));\n\n\t&:not(:last-child) {\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t&__name {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmax-width: $maxWidth;\n\t\tmargin-top: 0; // Remove default heading margin\n\t}\n\n\t&__info {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\t// make sure to properly align the icon with the text\n\t\tmargin: calc($icon-margin * -1);\n\t\tmargin-inline-start: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover, &:focus, &:active {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n\n\t&__desc {\n\t\tmargin-top: -.2em;\n\t\tmargin-bottom: 1em;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmax-width: $maxWidth;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createTextVNode","_toDisplayString","_unref","_createVNode","_renderSlot"],"mappings":";;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAAC,eAAA,EAAA,GAAE,oUAAmU;;;sBAX/UC,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAA,SAAbI,UAAA,GAAAH,mBAAuC,uCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;ACmEpC,UAAM,YAAY,EAAE,wBAAwB;;AAI3C,aAAAG,UAAA,GAAAH,mBAoBM,OApBN,YAoBM;AAAA,QAnBLE,mBAYK,MAZL,YAYK;AAAA,UAXDE,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA;AAAA,UACO,QAAA,uBADPL,mBASI,KAAA;AAAA;YAPF,cAAAM,MAAA,SAAA;AAAA,YACD,OAAM;AAAA,YACL,MAAM,QAAA;AAAA,YACP,KAAI;AAAA,YACJ,QAAO;AAAA,YACN,OAAOA,MAAA,SAAA;AAAA,UAAA;YACRC,YAAyB,YAAA,EAAZ,MAAM,IAAE;AAAA,UAAA;;QAIhB,QAAA,4BADPP,mBAII,KAJJ,YAIIK,gBADA,QAAA,WAAW,GAAA,CAAA;QAEfG,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,MAAA;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcSettingsSelectGroup-SYJ8-XlR.mjs → NcSettingsSelectGroup.mjs}

@@ -1,13 +1,13 @@
-import '../assets/NcSettingsSelectGroup-D_fSrafm.css';
+import '../assets/NcSettingsSelectGroup.css';
 import axios from "@nextcloud/axios";
 import { generateOcsUrl } from "@nextcloud/router";
 import debounce from "debounce";
-import { N as NcSelect } from "./NcSelect--kERLlBK.mjs";
-import { r as register, i as t50, a as t } from "./_l10n-wdIzZwir.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { N as NcSelect } from "./NcSelect.mjs";
+import { r as register, i as t51, a as t } from "./_l10n.mjs";
+import { c as createElementId } from "./createElementId.mjs";
 import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, vShow } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t50);
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t51);
 const _sfc_main = {
   name: "NcSettingsSelectGroup",
   components: {
@@ -222,4 +222,4 @@ const NcSettingsSelectGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcSettingsSelectGroup as N
 };
-//# sourceMappingURL=NcSettingsSelectGroup-SYJ8-XlR.mjs.map
+//# sourceMappingURL=NcSettingsSelectGroup.mjs.map