@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcPasswordField-QA6kIMu2.cjs

@@ -0,0 +1,255 @@
+"use strict";
+const e = require("vue"), c = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), a = require("./NcInputField-dP-QARJo.cjs"), f = require("debounce"), g = require("@nextcloud/axios"), _ = require("@nextcloud/initial-state"), w = require("@nextcloud/router"), o = require("./_l10n-wK0o0jNS.cjs"), y = require("./logger-G6OKp5ly.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, k = /* @__PURE__ */ p(f), C = /* @__PURE__ */ p(g), B = {
+  name: "EyeIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, b = ["aria-hidden", "aria-label"], P = ["fill", "width", "height"], E = { d: "M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" }, N = { key: 0 };
+function v(t, s, i, d, l, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(t.$attrs, {
+    "aria-hidden": !i.title,
+    "aria-label": i.title,
+    class: "material-design-icon eye-icon",
+    role: "img",
+    onClick: s[0] || (s[0] = (r) => t.$emit("click", r))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: i.fillColor,
+      class: "material-design-icon__svg",
+      width: i.size,
+      height: i.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", E, [
+        i.title ? (e.openBlock(), e.createElementBlock("title", N, e.toDisplayString(i.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, P))
+  ], 16, b);
+}
+const F = /* @__PURE__ */ c._export_sfc(B, [["render", v]]), S = {
+  name: "EyeOffIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, V = ["aria-hidden", "aria-label"], x = ["fill", "width", "height"], L = { d: "M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" }, H = { key: 0 };
+function A(t, s, i, d, l, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(t.$attrs, {
+    "aria-hidden": !i.title,
+    "aria-label": i.title,
+    class: "material-design-icon eye-off-icon",
+    role: "img",
+    onClick: s[0] || (s[0] = (r) => t.$emit("click", r))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: i.fillColor,
+      class: "material-design-icon__svg",
+      width: i.size,
+      height: i.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", L, [
+        i.title ? (e.openBlock(), e.createElementBlock("title", H, e.toDisplayString(i.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, x))
+  ], 16, V);
+}
+const I = /* @__PURE__ */ c._export_sfc(S, [["render", A]]);
+o.register(o.t24);
+const u = _.loadState("core", "capabilities", {}).password_policy || null, M = new Set(Object.keys(a.NcInputField.props)), q = {
+  name: "NcPasswordField",
+  components: {
+    NcInputField: a.NcInputField,
+    Eye: F,
+    EyeOff: I
+  },
+  props: {
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...a.NcInputField.props,
+    // Redefined props
+    /**
+     * Controls whether to display the trailing button.
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: !0
+    },
+    // Removed NcInputField props, defined only by this component
+    trailingButtonLabel: void 0,
+    // Custom props
+    /**
+     * Check if the user entered a valid password using the password_policy
+     * app if available.
+     *
+     * Warning: this doesn't replace server side checking and will do nothing
+     * if the password_policy app is disabled.
+     */
+    checkPasswordStrength: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The minlength property defines the minimum number of characters
+     * (as UTF-16 code units) the user can enter
+     */
+    minlength: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The maxlength property defines the maximum number of characters
+     * (as UTF-16 code units) the user can enter
+     */
+    maxlength: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: [
+    "valid",
+    "invalid",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      isPasswordHidden: !0,
+      internalHelpMessage: "",
+      isValid: null
+    };
+  },
+  computed: {
+    computedError() {
+      return this.error || this.isValid === !1;
+    },
+    computedSuccess() {
+      return this.success || this.isValid === !0;
+    },
+    computedHelperText() {
+      return this.helperText.length > 0 ? this.helperText : this.internalHelpMessage;
+    },
+    rules() {
+      const { minlength: t } = this;
+      return {
+        minlength: t ?? u?.minLength
+      };
+    },
+    trailingButtonLabelPassword() {
+      return this.isPasswordHidden ? o.t("Show password") : o.t("Hide password");
+    },
+    propsToForward() {
+      return {
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([t]) => M.has(t))
+        )
+      };
+    }
+  },
+  watch: {
+    modelValue(t) {
+      if (this.checkPasswordStrength) {
+        if (u === null)
+          return;
+        this.checkPassword(t);
+      }
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.inputField.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.inputField.select();
+    },
+    handleInput(t) {
+      this.$emit("update:modelValue", t);
+    },
+    togglePasswordVisibility() {
+      this.isPasswordHidden = !this.isPasswordHidden;
+    },
+    checkPassword: k.default(async function(t) {
+      try {
+        const { data: s } = await C.default.post(w.generateOcsUrl("apps/password_policy/api/v1/validate"), { password: t });
+        if (this.isValid = s.ocs.data.passed, s.ocs.data.passed) {
+          this.internalHelpMessage = o.t("Password is secure"), this.$emit("valid");
+          return;
+        }
+        this.internalHelpMessage = s.ocs.data.reason, this.$emit("invalid");
+      } catch (s) {
+        y.logger.error("Password policy returned an error", s);
+      }
+    }, 500)
+  }
+};
+function T(t, s, i, d, l, n) {
+  const r = e.resolveComponent("Eye"), h = e.resolveComponent("EyeOff"), m = e.resolveComponent("NcInputField");
+  return e.openBlock(), e.createBlock(m, e.mergeProps(n.propsToForward, {
+    ref: "inputField",
+    type: l.isPasswordHidden ? "password" : "text",
+    "trailing-button-label": n.trailingButtonLabelPassword,
+    "helper-text": n.computedHelperText,
+    error: n.computedError,
+    success: n.computedSuccess,
+    minlength: n.rules.minlength,
+    onTrailingButtonClick: n.togglePasswordVisibility,
+    "onUpdate:modelValue": n.handleInput
+  }), e.createSlots({
+    "trailing-button-icon": e.withCtx(() => [
+      l.isPasswordHidden ? (e.openBlock(), e.createBlock(r, {
+        key: 0,
+        size: 18
+      })) : (e.openBlock(), e.createBlock(h, {
+        key: 1,
+        size: 18
+      }))
+    ]),
+    _: 2
+  }, [
+    t.$slots.icon ? {
+      name: "icon",
+      fn: e.withCtx(() => [
+        e.renderSlot(t.$slots, "icon")
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1040, ["type", "trailing-button-label", "helper-text", "error", "success", "minlength", "onTrailingButtonClick", "onUpdate:modelValue"]);
+}
+const z = /* @__PURE__ */ c._export_sfc(q, [["render", T]]);
+exports.NcPasswordField = z;

package/dist/chunks/NcPasswordField-QA6kIMu2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPasswordField-QA6kIMu2.cjs","sources":["../../node_modules/vue-material-design-icons/Eye.vue","../../node_modules/vue-material-design-icons/EyeOff.vue","../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-off-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=\"M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeOffIcon\",\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  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  - @author Carl Schwan <carl@carlschwan.eu>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField v-model=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text2\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text3\"\n\t\t\t\tid=\"textField2\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField v-model=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\">\n\t\t\t<template #icon>\n\t\t\t\t<Lock :size=\"20\" />\n\t\t\t</template>\n\t\t</NcPasswordField>\n\n\t\t<NcPasswordField v-model=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\t</div>\n</template>\n<script>\nimport Lock from 'vue-material-design-icons/Lock'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tLock,\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden ? 'password' : 'text'\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@update:model-value=\"handleInput\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<!-- Default slot for the leading icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport debounce from 'debounce'\nimport axios from '@nextcloud/axios'\nimport { loadState } from '@nextcloud/initial-state'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { t } from '../../l10n.js'\nimport logger from '../../utils/logger.js'\n\n/**\n * @typedef PasswordPolicy\n * @property {object} api - The URLs to the password_policy app methods\n * @property {string} api.generate - The URL to the password generator\n * @property {string} api.validate - The URL to the password validator\n * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords\n * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters\n * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters\n * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case\n * @property {number} minLength - The minimum length of the password\n */\n\n/** @type {PasswordPolicy|null} */\nconst passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\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\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\t showTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t// Removed NcInputField props, defined only by this component\n\n\t\ttrailingButtonLabel: undefined,\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodelValue(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.checkPassword(newValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\t/**\n\t\t\t * Triggers when the value inside the password field is\n\t\t\t * updated.\n\t\t\t *\n\t\t\t * @property {string} The new value\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_ctx","$props","_cache","$event","_createElementVNode","_hoisted_4","_createCommentVNode","passwordPolicy","loadState","NcInputFieldProps","NcInputField","Eye","EyeOff","minlength","t","key","newValue","event","debounce","password","data","axios","generateOcsUrl","e","logger","_createBlock","_component_NcInputField","$options","$data","_createSlots","_component_Eye","_component_EyeOff","_withCtx","_renderSlot"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/NcPopover-HwP68PjO.mjs

@@ -0,0 +1,224 @@
+import "../assets/NcPopover-MK4GcuPY.css";
+import { defineComponent as l, computed as p, warn as h, resolveComponent as a, openBlock as g, createBlock as f, withCtx as s, renderSlot as i, createVNode as w, normalizeProps as m, guardReactiveProps as v } from "vue";
+import { Dropdown as y } from "floating-vue";
+import { createFocusTrap as P } from "focus-trap";
+import { g as S } from "./focusTrap-Py2bQ9-r.mjs";
+import { _ as T } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const E = l({
+  name: "NcPopoverTriggerProvider",
+  provide() {
+    return {
+      "NcPopover:trigger:shown": p(() => this.shown),
+      "NcPopover:trigger:attrs": p(() => this.triggerAttrs)
+    };
+  },
+  props: {
+    shown: {
+      type: Boolean,
+      required: !0
+    },
+    popupRole: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    triggerAttrs() {
+      return {
+        "aria-haspopup": this.popupRole,
+        "aria-expanded": this.shown.toString()
+      };
+    }
+  },
+  render() {
+    return this.$slots.default?.({
+      attrs: this.triggerAttrs
+    });
+  }
+}), $ = {
+  name: "NcPopover",
+  components: {
+    Dropdown: y,
+    NcPopoverTriggerProvider: E
+  },
+  props: {
+    /**
+     * Show or hide the popper
+     * @see https://floating-vue.starpad.dev/api/#shown
+     */
+    shown: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Popup role
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values
+     */
+    popupRole: {
+      type: String,
+      default: "true",
+      validator: (e) => ["menu", "listbox", "tree", "grid", "dialog", "true"].includes(e)
+    },
+    popoverBaseClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable popover focus trap
+     */
+    focusTrap: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Set element to return focus to after focus trap deactivation
+     *
+     * @type {import('focus-trap').FocusTargetValueOrFalse}
+     */
+    setReturnFocus: {
+      default: void 0,
+      type: [HTMLElement, SVGElement, String, Boolean]
+    }
+  },
+  emits: [
+    "after-show",
+    "after-hide",
+    /**
+     * @see https://floating-vue.starpad.dev/api/#update-shown
+     */
+    "update:shown"
+  ],
+  data() {
+    return {
+      internalShown: this.shown
+    };
+  },
+  computed: {
+    shownProxy: {
+      get() {
+        return this.internalShown;
+      },
+      set(e) {
+        this.internalShown = e, this.$emit("update:shown", e);
+      }
+    }
+  },
+  watch: {
+    shown(e) {
+      this.internalShown = e;
+    }
+  },
+  mounted() {
+    this.checkTriggerA11y();
+  },
+  beforeUnmount() {
+    this.clearFocusTrap(), this.clearEscapeStopPropagation();
+  },
+  methods: {
+    /**
+     * Check if the trigger has all required a11y attributes.
+     * Important to check custom trigger button.
+     */
+    checkTriggerA11y() {
+      window.OC?.debug && (this.$refs.popover.$refs.popper.$refs.reference.querySelector("[aria-expanded][aria-haspopup]") || h("It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example."));
+    },
+    /**
+     * @return {HTMLElement|undefined}
+     */
+    getPopoverContentElement() {
+      return this.$refs.popover?.$refs.popperContent?.$el;
+    },
+    /**
+     * Add focus trap for accessibility.
+     */
+    async useFocusTrap() {
+      if (await this.$nextTick(), !this.focusTrap)
+        return;
+      const e = this.getPopoverContentElement();
+      e && (this.$focusTrap = P(e, {
+        // Prevents to lose focus using esc key
+        // Focus will be release when popover be hide
+        escapeDeactivates: !1,
+        allowOutsideClick: !0,
+        setReturnFocus: this.setReturnFocus,
+        trapStack: S()
+      }), this.$focusTrap.activate());
+    },
+    /**
+     * Remove focus trap
+     *
+     * @param {object} options The configuration options for focusTrap
+     */
+    clearFocusTrap(e = {}) {
+      try {
+        this.$focusTrap?.deactivate(e), this.$focusTrap = null;
+      } catch (o) {
+        console.warn(o);
+      }
+    },
+    /**
+     * Add stopPropagation for Escape.
+     * It prevents global Escape handling after closing popover.
+     *
+     * Manual event handling is used here instead of v-on because there is no direct access to the node.
+     * Alternative - wrap <template #popover> in a div wrapper.
+     */
+    addEscapeStopPropagation() {
+      this.getPopoverContentElement()?.addEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * Remove stop Escape handler
+     */
+    clearEscapeStopPropagation() {
+      this.getPopoverContentElement()?.removeEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * @param {KeyboardEvent} event - native keydown event
+     */
+    stopKeydownEscapeHandler(e) {
+      e.type === "keydown" && e.key === "Escape" && e.stopPropagation();
+    },
+    afterShow() {
+      this.$nextTick(() => {
+        this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
+      });
+    },
+    afterHide() {
+      this.$emit("after-hide"), this.clearFocusTrap(), this.clearEscapeStopPropagation();
+    }
+  }
+};
+function k(e, o, n, C, c, t) {
+  const u = a("NcPopoverTriggerProvider"), d = a("Dropdown");
+  return g(), f(d, {
+    ref: "popover",
+    shown: t.shownProxy,
+    "onUpdate:shown": o[0] || (o[0] = (r) => t.shownProxy = r),
+    distance: 10,
+    "arrow-padding": 10,
+    "no-auto-focus": !0,
+    "popper-class": n.popoverBaseClass,
+    onApplyShow: t.afterShow,
+    onApplyHide: t.afterHide
+  }, {
+    popper: s(() => [
+      i(e.$slots, "default")
+    ]),
+    default: s(() => [
+      w(u, {
+        shown: c.internalShown,
+        "popup-role": n.popupRole
+      }, {
+        default: s((r) => [
+          i(e.$slots, "trigger", m(v(r)))
+        ]),
+        _: 3
+      }, 8, ["shown", "popup-role"])
+    ]),
+    _: 3
+  }, 8, ["shown", "popper-class", "onApplyShow", "onApplyHide"]);
+}
+const H = /* @__PURE__ */ T($, [["render", k]]);
+export {
+  H as N
+};

package/dist/chunks/NcPopover-HwP68PjO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-HwP68PjO.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<script>\nimport { computed, defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': computed(() => this.shown),\n\t\t\t'NcPopover:trigger:attrs': computed(() => this.triggerAttrs),\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\treturn this.$slots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\tv-model:shown=\"shownProxy\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper>\n\t\t\t<slot />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { warn } from 'vue'\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: 'true',\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshownProxy: {\n\t\t\tget() {\n\t\t\t\treturn this.internalShown\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tthis.internalShown = value\n\t\t\t\tthis.$emit('update:shown', value)\n\t\t\t},\n\t\t},\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.$refs.popover.$refs.popper.$refs.reference\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded][aria-haspopup]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\twarn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tafterShow() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t *\n\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t */\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('after-show')\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-index:-1;\n\twidth:100%;\n\theight:100%;\n\tborder:none;\n\tbackground-color:transparent;\n\tpointer-events:none;\n\tdisplay:block;\n\toverflow:hidden;\n\topacity:0\n}\n\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-width;\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-width;\n\t\t\tborder-top-width: 0;\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","defineComponent","_sfc_main","Dropdown","value","el","createFocusTrap","options","err","event","$options","_cache","$event","$props","withCtx","$data"],"mappings":";;;;;;AAGA,MAAAA,IAAAC,EAAA;AAAA,EACC,MAAA;AAAA,EAEA,UAAA;AACC,WAAA;AAAA;;IAGA;AAAA;EAGD,OAAA;AAAA,IACC,OAAA;AAAA;;;;;;;;EAUD,UAAA;AAAA,IACC,eAAA;AACC,aAAA;AAAA,QACC,iBAAA,KAAA;AAAA,QACA,iBAAA,KAAA,MAAA,SAAA;AAAA,MACD;AAAA;;EAIF,SAAA;;;;;AAKD,CAAA,GCmJAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;MAWC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,WAAA,QAAA,QAAA,UAAA,MAAA,EAAA,SAAAA,CAAA;AAAA;IAGD,kBAAA;AAAA;;;;;;;;;;;;;;;IAgBA,gBAAA;AAAA,MACC,SAAA;AAAA,MACA,MAAA,CAAA,aAAA,YAAA,QAAA,OAAA;AAAA;;EAIF,OAAA;AAAA;;;;;IAMC;AAAA;EAGD,OAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,UAAA;AAAA;;;;;gCAOG,KAAA,MAAA,gBAAAA,CAAA;AAAA;;;EAKH,OAAA;AAAA;;;;EAMA,UAAA;;;EAIA,gBAAA;AACC,SAAA,eAAA,GACA,KAAA,2BAAA;AAAA;EAGD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,mBAAA;AACC,MAAA,OAAA,IAAA,UACC,KAAA,MAAA,QAAA,MAAA,OAAA,MAAA,UACA,cAAA,gCAAA;;;;;;;;;;;IAiBF,MAAA,eAAA;AAGC,UAFA,MAAA,KAAA,UAAA,GAEA,CAAA,KAAA;;AAIA,YAAAC,IAAA,KAAA,yBAAA;AAEA,MAAAA,MAKA,KAAA,aAAAC,EAAAD,GAAA;AAAA;AAAA;AAAA;;QAKC,gBAAA,KAAA;AAAA;;;;;;;;;AAYD,UAAA;AACC,aAAA,YAAA,WAAAE,CAAA,GACA,KAAA,aAAA;AAAA;AAEA,gBAAA,KAAAC,CAAA;AAAA,MACD;AAAA;;;;;;;;;MAWA,KAAA,yBAAA;;;;;;AASA,MADA,KAAA,yBAAA,GACA,oBAAA,WAAA,KAAA,wBAAA;AAAA;;;;IAMD,yBAAAC,GAAA;;;;AAcC,WAAA,UAAA,MAAA;kCAEC,KAAA,aAAA,GACA,KAAA,yBAAA;AAAA;;;gCAQD,KAAA,eAAA,GACA,KAAA,2BAAA;AAAA;;AAGH;;;;IA3OW,KAAA;AAAA,IACD,OAAAC,EAAA;AAAA,IA/JV,kBAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAF,EAAA,aAAAE;AAAA,IAgKG,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAAC,EAAA;AAAA,IACA,aAAAH,EAAA;AAAA,IACA,aAAAA,EAAA;AAAA;IAOU,QAAAI,EAAA,MAAA;AAAA;;IA5Kb,SAAAA,EAAA,MAAA;AAAA;QAsKgD,OAAAC,EAAA;AAAA,QAAuB,cAAAF,EAAA;AAAA;;;;;;;;;;;"}