@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcIconSvgWrapper-DoVPfeNg.cjs

@@ -0,0 +1,114 @@
+require('../assets/NcIconSvgWrapper-DJQ2Kuip.css');
+"use strict";
+const DOMPurify = require("dompurify");
+const Vue = require("vue");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const DOMPurify__default = /* @__PURE__ */ _interopDefault(DOMPurify);
+const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
+const __default__ = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * Make the icon directional, meaning it is langauge direction aware.
+     * If the icon is placed in a right-to-left context it will be mirrored vertically.
+     */
+    directional: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Set if the icon should be used as inline content e.g. within text.
+     * By default the icon is made a block element for use inside `icon`-slots.
+     */
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Raw SVG string to render
+     */
+    svg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label of the icon, used in aria-label
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Size of the icon to show. Only use if not using within an icon slot.
+     * Defaults to 20px which is the Nextcloud icon size for all icon slots.
+     *
+     * @default 20
+     */
+    size: {
+      type: [Number, String],
+      default: 20,
+      validator: (value) => typeof value === "number" || value === "auto"
+    }
+  },
+  computed: {
+    /**
+     * Icon size used in CSS
+     */
+    iconSize() {
+      return typeof this.size === "number" ? "".concat(this.size, "px") : this.size;
+    },
+    cleanSvg() {
+      if (!this.svg || this.path) {
+        return;
+      }
+      const svg = DOMPurify__default.default.sanitize(this.svg);
+      const svgDocument = new DOMParser().parseFromString(svg, "image/svg+xml");
+      if (svgDocument.querySelector("parsererror")) {
+        Vue__default.default.util.warn("SVG is not valid");
+        return "";
+      }
+      if (svgDocument.documentElement.id) {
+        svgDocument.documentElement.removeAttribute("id");
+      }
+      return svgDocument.documentElement.outerHTML;
+    }
+  }
+};
+const __injectCSSVars__ = () => {
+  Vue.useCssVars((_vm, _setup) => ({
+    "0ceed50f": _vm.iconSize
+  }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+const _sfc_main = __default__;
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { staticClass: "icon-vue", class: {
+    "icon-vue--directional": _vm.directional,
+    "icon-vue--inline": _vm.inline
+  }, attrs: { "aria-hidden": _vm.name ? void 0 : "true", "aria-label": _vm.name || void 0, "role": "img" } }, [!_vm.cleanSvg ? _c("svg", { attrs: { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" } }, [_c("path", { attrs: { "d": _vm.path } })]) : _c("span", { domProps: { "innerHTML": _vm._s(_vm.cleanSvg) } })]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "6a8df8b8"
+);
+const NcIconSvgWrapper = __component__.exports;
+exports.NcIconSvgWrapper = NcIconSvgWrapper;
+//# sourceMappingURL=NcIconSvgWrapper-DoVPfeNg.cjs.map

package/dist/chunks/NcIconSvgWrapper-DoVPfeNg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-DoVPfeNg.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.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\nRender raw SVG string icons.\n\n### Usage within `icon`-slot\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// This icons are static data, so you do not need to put them into `data` which will make them reactive\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n\n### Inline usage inside text\n\n```vue\n<template>\n\t<p>\n\t\tThis is my <NcIconSvgWrapper inline :path=\"mdiStar\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Directional usage\n\nThe `directional` property allows to enable a language direction aware icon.\nThis icon component can be used in places where an language direction aware icon should be used,\nfor example if an arrow pointing to the left it used it often points in the wrong direction for right-to-left languages.\nIn this cases this icon can be used which will always point into the logical \"start\" direction.\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcButton @click=\"isRtl = !isRtl\">Toggle RTL</NcButton>\n\t\t<div class=\"directional\" :dir=\"isRtl ? 'rtl' : 'ltr'\">\n\t\t\t<NcButton alignment=\"start\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronLeft\" />\n\t\t\t\t</template>\n\t\t\t\tPrevious\n\t\t\t</NcButton>\n\t\t\t<NcButton alignment=\"end-reverse\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronRight\" />\n\t\t\t\t</template>\n\t\t\t\tNext\n\t\t\t</NcButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiChevronLeft,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisRtl: false\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmax-width: 300px;\n}\n\n.directional {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.directional * {\n\tflex: 1 50%;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:aria-hidden=\"name ? undefined : 'true'\"\n\t\t:aria-label=\"name || undefined\"\n\t\tclass=\"icon-vue\"\n\t\t:class=\"{\n\t\t\t'icon-vue--directional': directional,\n\t\t\t'icon-vue--inline': inline,\n\t\t}\"\n\t\trole=\"img\">\n\t\t<svg v-if=\"!cleanSvg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t\t<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component,vue/no-v-html -->\n\t\t<span v-else v-html=\"cleanSvg\" />\n\t</span>\n</template>\n\n<script>\nimport DOMPurify from 'dompurify'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t */\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t */\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t *\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: var(--default-clickable-area);\n\tmin-height: var(--default-clickable-area);\n\topacity: 1;\n\n\t&--inline {\n\t\tdisplay: inline-flex;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t// Icon svg wrapper\n\tspan {\n\t\tline-height: 0;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":["DOMPurify","Vue"],"mappings":";;;;;;;AAsLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,YAAA,MAAA,QAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,MAAAA,mBAAAA,QAAA,SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;AACAC,6BAAA,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcInputConfirmCancel-C8WnMK2V.mjs

@@ -0,0 +1,115 @@
+import '../assets/NcInputConfirmCancel-CkhRZCfD.css';
+import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
+import { C as Close } from "./Close-BtLPUSdO.mjs";
+import { r as register, q as t13, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register(t13);
+const _sfc_main = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton,
+    ArrowRight,
+    Close
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: false,
+      type: Boolean
+    },
+    /**
+     * Placeholder of the edit field
+     */
+    placeholder: {
+      default: "",
+      type: String
+    },
+    /**
+     * The current name (model value)
+     */
+    value: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "input",
+    "confirm",
+    "cancel"
+  ],
+  data() {
+    return {
+      labelConfirm: t("Confirm changes"),
+      labelCancel: t("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit("input", newValue);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  }, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  }, "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+  } } }, [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.valueModel, expression: "valueModel" }], ref: "input", staticClass: "app-navigation-input-confirm__input", attrs: { "type": "text", "placeholder": _vm.placeholder }, domProps: { "value": _vm.valueModel }, on: { "input": function($event) {
+    if ($event.target.composing) return;
+    _vm.valueModel = $event.target.value;
+  } } }), _c("NcButton", { attrs: { "aria-label": _vm.labelConfirm, "type": "submit", "variant": "primary" }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ArrowRight", { attrs: { "size": 20 } })];
+  }, proxy: true }]) }), _c("NcButton", { attrs: { "aria-label": _vm.labelCancel, "type": "reset", "variant": _vm.primary ? "primary" : "tertiary" }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("Close", { attrs: { "size": 20 } })];
+  }, proxy: true }]) })], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "093a8eb9"
+);
+const NcInputConfirmCancel = __component__.exports;
+export {
+  NcInputConfirmCancel as N
+};
+//# sourceMappingURL=NcInputConfirmCancel-C8WnMK2V.mjs.map

package/dist/chunks/NcInputConfirmCancel-C8WnMK2V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputConfirmCancel-C8WnMK2V.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder of the edit field\n\t\t */\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/**\n\t\t * The current name (model value)\n\t\t */\n\t\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-left: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;AAuDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,EAAA,iBAAA;AAAA,MACA,aAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAA,UAAA;AACA,aAAA,MAAA,SAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcInputConfirmCancel-DVVTaxWi.cjs

@@ -0,0 +1,114 @@
+require('../assets/NcInputConfirmCancel-CkhRZCfD.css');
+"use strict";
+const ArrowRight = require("./ArrowRight-DPARnmu3.cjs");
+const Close = require("./Close-CqmXxEKi.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const NcButton = require("./NcButton-DK7bNZIL.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register(_l10n.t13);
+const _sfc_main = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton: NcButton.NcButton,
+    ArrowRight: ArrowRight.ArrowRight,
+    Close: Close.Close
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: false,
+      type: Boolean
+    },
+    /**
+     * Placeholder of the edit field
+     */
+    placeholder: {
+      default: "",
+      type: String
+    },
+    /**
+     * The current name (model value)
+     */
+    value: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "input",
+    "confirm",
+    "cancel"
+  ],
+  data() {
+    return {
+      labelConfirm: _l10n.t("Confirm changes"),
+      labelCancel: _l10n.t("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit("input", newValue);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  }, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  }, "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+  } } }, [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.valueModel, expression: "valueModel" }], ref: "input", staticClass: "app-navigation-input-confirm__input", attrs: { "type": "text", "placeholder": _vm.placeholder }, domProps: { "value": _vm.valueModel }, on: { "input": function($event) {
+    if ($event.target.composing) return;
+    _vm.valueModel = $event.target.value;
+  } } }), _c("NcButton", { attrs: { "aria-label": _vm.labelConfirm, "type": "submit", "variant": "primary" }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ArrowRight", { attrs: { "size": 20 } })];
+  }, proxy: true }]) }), _c("NcButton", { attrs: { "aria-label": _vm.labelCancel, "type": "reset", "variant": _vm.primary ? "primary" : "tertiary" }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("Close", { attrs: { "size": 20 } })];
+  }, proxy: true }]) })], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "093a8eb9"
+);
+const NcInputConfirmCancel = __component__.exports;
+exports.NcInputConfirmCancel = NcInputConfirmCancel;
+//# sourceMappingURL=NcInputConfirmCancel-DVVTaxWi.cjs.map

package/dist/chunks/NcInputConfirmCancel-DVVTaxWi.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputConfirmCancel-DVVTaxWi.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder of the edit field\n\t\t */\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/**\n\t\t * The current name (model value)\n\t\t */\n\t\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-left: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","ArrowRight","Close","t"],"mappings":";;;;;;;AAuDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,IACA,YAAAC,WAAAA;AAAAA,IACA,OAAAC,MAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,MAAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,MAAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAA,UAAA;AACA,aAAA,MAAA,SAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcInputField-1ujONIvp.mjs

@@ -0,0 +1,276 @@
+import '../assets/NcInputField-BI3vWgSo.css';
+import { A as AlertCircle } from "./AlertCircleOutline-DBxbepLy.mjs";
+import { C as Check } from "./Check-BkThHPH7.mjs";
+import { u as useModelMigration } from "./useModelMigration-DBUi8saj.mjs";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { i as isLegacy32 } from "./legacy-NU_qxPFK.mjs";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
+import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = {
+  name: "NcInputField",
+  components: {
+    NcButton,
+    AlertCircle,
+    Check
+  },
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
+     * @deprecated
+     */
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * The value of the input field
+     * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'
+     */
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * The type of the input element
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator: (value) => [
+        "text",
+        "password",
+        "email",
+        "tel",
+        "url",
+        "search",
+        "number"
+      ].includes(value)
+    },
+    /**
+     * The input label, always provide one for accessibility purposes.
+     * This will also be used as a placeholder unless the placeholder
+     * prop is populated with a different string.
+     *
+     * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).
+     */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Pass in true if you want to use an external label. This is useful
+     * if you need a label that looks different from the one provided by
+     * this component
+     */
+    labelOutside: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The placeholder of the input. This defaults as the string that's
+     * passed into the label prop. In order to remove the placeholder,
+     * pass in an empty string.
+     */
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Controls whether to display the trailing button.
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Label of the trailing button
+     *
+     * Required when showTrailingButton is set
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Toggles the success state of the component. Adds a checkmark icon.
+     * this cannot be used together with canClear.
+     */
+    success: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Toggles the error state of the component. Adds an error icon.
+     * this cannot be used together with canClear.
+     */
+    error: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional helper text message
+     *
+     * This will be displayed beneath the input field. In case the field is
+     * also marked as having an error, the text will be displayed in red.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable the input field
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Specifies whether the input should have a pill form.
+     * By default, input has rounded corners.
+     */
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
+     * @deprecated
+     */
+    "update:value",
+    "update:modelValue",
+    /** Same as update:modelValue for Vue 2 compatibility */
+    "update:model-value",
+    "trailing-button-click"
+  ],
+  setup() {
+    const model = useModelMigration("value", "update:value", true);
+    return {
+      isLegacy32,
+      model
+    };
+  },
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + GenRandomId();
+    },
+    hasTrailingIcon() {
+      return this.success;
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      if (this.hasPlaceholder) {
+        return this.placeholder;
+      }
+      if (isLegacy32) {
+        return this.label;
+      }
+      return void 0;
+    },
+    isValidLabel() {
+      const isValidLabel = this.label || this.labelOutside;
+      if (!isValidLabel) {
+        logger.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
+      }
+      return isValidLabel;
+    },
+    ariaDescribedby() {
+      const ariaDescribedby = [];
+      if (this.helperText.length > 0) {
+        ariaDescribedby.push("".concat(this.inputName, "-helper-text"));
+      }
+      if (this.$attrs["aria-describedby"]) {
+        ariaDescribedby.push(this.$attrs["aria-describedby"]);
+      }
+      return ariaDescribedby.join(" ") || null;
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.input.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.input.select();
+    },
+    handleInput(event) {
+      const newValue = this.type === "number" && typeof this.model === "number" ? parseFloat(event.target.value, 10) : event.target.value;
+      this.model = newValue;
+    },
+    handleTrailingButtonClick(event) {
+      this.$emit("trailing-button-click", event);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _a;
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "input-field", class: {
+    "input-field--disabled": _vm.disabled,
+    "input-field--error": _vm.error,
+    "input-field--label-outside": _vm.labelOutside || !_vm.isValidLabel,
+    "input-field--leading-icon": !!_vm.$scopedSlots.icon || !!_vm.$scopedSlots.default || !!_vm.$slots.default,
+    "input-field--success": _vm.success,
+    "input-field--trailing-icon": _vm.showTrailingButton || _vm.hasTrailingIcon,
+    "input-field--pill": _vm.pill,
+    "input-field--legacy": _vm.isLegacy32
+  } }, [_c("div", { staticClass: "input-field__main-wrapper" }, [_c("input", _vm._g(_vm._b({ ref: "input", staticClass: "input-field__input", class: [
+    _vm.inputClass,
+    {
+      "input-field__input--success": _vm.success,
+      "input-field__input--error": _vm.error
+    }
+  ], attrs: { "id": _vm.computedId, "type": _vm.type, "disabled": _vm.disabled, "placeholder": _vm.computedPlaceholder, "aria-describedby": _vm.ariaDescribedby, "aria-live": "polite" }, domProps: { "value": (_a = _vm.model) == null ? void 0 : _a.toString() }, on: { "input": _vm.handleInput } }, "input", _vm.$attrs, false), _vm.$listeners)), !_vm.labelOutside && _vm.isValidLabel ? _c("label", { staticClass: "input-field__label", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !!_vm.$scopedSlots.icon || !!_vm.$scopedSlots.default || !!_vm.$slots.default, expression: "!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default" }], staticClass: "input-field__icon input-field__icon--leading" }, [_vm._t("icon", function() {
+    return [_vm._t("default")];
+  })], 2), _vm.showTrailingButton ? _c("NcButton", { staticClass: "input-field__trailing-button", attrs: { "aria-label": _vm.trailingButtonLabel, "disabled": _vm.disabled, "variant": "tertiary-no-background" }, on: { "click": _vm.handleTrailingButtonClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("trailing-button-icon")];
+  }, proxy: true }], null, true) }) : _vm.success || _vm.error ? _c("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [_vm.success ? _c("Check", { staticStyle: { "color": "var(--color-success-text)" }, attrs: { "size": 20 } }) : _vm.error ? _c("AlertCircle", { staticStyle: { "color": "var(--color-error-text)" }, attrs: { "size": 20 } }) : _vm._e()], 1) : _vm._e()], 1), _vm.helperText.length > 0 ? _c("p", { staticClass: "input-field__helper-text-message", class: {
+    "input-field__helper-text-message--error": _vm.error,
+    "input-field__helper-text-message--success": _vm.success
+  }, attrs: { "id": "".concat(_vm.inputName, "-helper-text") } }, [_vm.success ? _c("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { "size": 18 } }) : _vm.error ? _c("AlertCircle", { staticClass: "input-field__helper-text-message__icon", attrs: { "size": 18 } }) : _vm._e(), _vm._v(" " + _vm._s(_vm.helperText) + " ")], 1) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "770f8cf7"
+);
+const NcInputField = __component__.exports;
+export {
+  NcInputField as N
+};
+//# sourceMappingURL=NcInputField-1ujONIvp.mjs.map