@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.2

package/dist/chunks/NcIconSvgWrapper-LZxj_D6o.cjs

@@ -0,0 +1,77 @@
+var S = require("../assets/NcIconSvgWrapper-DQ4nGIPd.css");
+const t = require("vue"), c = require("dompurify"), u = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), l = (e) => e && e.__esModule ? e : { default: e }, p = /* @__PURE__ */ l(c), s = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * 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: (e) => typeof e == "number" || e === "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 e = p.default.sanitize(this.svg), r = new DOMParser().parseFromString(e, "image/svg+xml");
+      return r.querySelector("parsererror") ? (t.warn("SVG is not valid"), "") : (r.documentElement.id && r.documentElement.removeAttribute("id"), r.documentElement.outerHTML);
+    },
+    attributes() {
+      return {
+        class: "icon-vue",
+        role: "img",
+        "aria-hidden": this.name ? void 0 : !0,
+        "aria-label": this.name || void 0
+      };
+    }
+  }
+}, i = () => {
+  t.useCssVars((e) => ({
+    e685a604: e.iconSize
+  }));
+}, o = s.setup;
+s.setup = o ? (e, r) => (i(), o(e, r)) : i;
+const d = {
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _ = ["d"], m = ["innerHTML"];
+function g(e, r, a, v, h, n) {
+  return n.cleanSvg ? (t.openBlock(), t.createElementBlock("span", t.mergeProps({ key: 1 }, n.attributes, { innerHTML: n.cleanSvg }), null, 16, m)) : (t.openBlock(), t.createElementBlock("span", t.normalizeProps(t.mergeProps({ key: 0 }, n.attributes)), [
+    (t.openBlock(), t.createElementBlock("svg", d, [
+      t.createElementVNode("path", { d: a.path }, null, 8, _)
+    ]))
+  ], 16));
+}
+const f = /* @__PURE__ */ u._export_sfc(s, [["render", g], ["__scopeId", "data-v-42243c97"]]);
+exports.NcIconSvgWrapper = f;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-LZxj_D6o.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\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\tdata() {\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</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg 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</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport { warn } from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\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 * @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\twarn('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\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: 'icon-vue',\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name || undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: v-bind('iconSize');\n\t\theight: v-bind('iconSize');\n\t\tmax-width: v-bind('iconSize');\n\t\tmax-height: v-bind('iconSize');\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify__default","svgDocument","vue","_hoisted_2","_hoisted_3","$options","_hoisted_1","$props"],"mappings":";0LA0GAA,IAAA;AAAA;EAGC,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,MAAA,CAAA,QAAA,MAAA;AAAA;;;;EAMF,UAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AAaE,YAAAC,IAAAC,EAAA,QAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACCC,EAAA,KAAA,kBAAA,GACA,OAGDD,EAAA,gBAAA,+CAIAA,EAAA,gBAAA;AAAA;;AAGA,aAAA;AAAA,QACC,OAAA;AAAA;QAEA,eAAA,KAAA,OAAA,SAAA;AAAA,QACA,cAAA,KAAA,QAAA;AAAA,MACD;AAAA;;AAGH;;;;;;;EA1FO,SAAA;AAAA,EAAoB,OAAA;GA7F3BE,IAAA,CAAA,GAAA,GAAAC,IAAA,CAAA,WAAA;;uJA2FCF,EAAA,UAAA,GAAAA,EAAA,mBAAA,QAAAA,EAAA,eAAAA,EAAA,WAAA,EAAA,KAAA,EAAA,GAAAG,EAAA,UAAA,CAAA,GAAA;AAAA,KAECH,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAI,GAAA;AAAA,MACCJ,EAAA,mBAAA,QAAA,EAAA,GAAAK,EAAA,KAAA,GAAA,MAAA,GAAAJ,CAAA;AAAA;;;;;"}

package/dist/chunks/NcInputConfirmCancel-CbIGLBVK.cjs

@@ -0,0 +1,105 @@
+var g = require("../assets/NcInputConfirmCancel-D8YX9GNh.css");
+const u = require("./NcButton-CR5WPHh9.cjs"), r = require("./_l10n-CEec8lDL.cjs"), m = require("./ArrowRight-M9UNYhUi.cjs"), d = require("./Close-PZEquBdx.cjs"), e = require("vue"), f = require("./_plugin-vue_export-helper-CTzpuyvq.cjs");
+r.register(r.t12);
+const C = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton: u.NcButton,
+    ArrowRight: m.ArrowRight,
+    Close: d.Close
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: !1,
+      type: Boolean
+    },
+    placeholder: {
+      default: "",
+      type: String
+    },
+    modelValue: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "cancel",
+    "confirm",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      labelConfirm: r.t("Confirm changes"),
+      labelCancel: r.t("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.modelValue;
+      },
+      set(i) {
+        this.$emit("update:modelValue", i);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+}, h = { class: "app-navigation-input-confirm" }, v = ["placeholder"];
+function _(i, t, l, w, c, n) {
+  const s = e.resolveComponent("ArrowRight"), a = e.resolveComponent("NcButton"), p = e.resolveComponent("Close");
+  return e.openBlock(), e.createElementBlock("div", h, [
+    e.createElementVNode("form", {
+      onSubmit: t[1] || (t[1] = e.withModifiers((...o) => n.confirm && n.confirm(...o), ["prevent"])),
+      onKeydown: t[2] || (t[2] = e.withKeys(e.withModifiers((...o) => n.cancel && n.cancel(...o), ["exact", "stop", "prevent"]), ["esc"])),
+      onClick: t[3] || (t[3] = e.withModifiers(() => {
+      }, ["stop", "prevent"]))
+    }, [
+      e.withDirectives(e.createElementVNode("input", {
+        ref: "input",
+        "onUpdate:modelValue": t[0] || (t[0] = (o) => n.valueModel = o),
+        type: "text",
+        class: "app-navigation-input-confirm__input",
+        placeholder: l.placeholder
+      }, null, 8, v), [
+        [e.vModelText, n.valueModel]
+      ]),
+      e.createVNode(a, {
+        "native-type": "submit",
+        type: "primary",
+        "aria-label": c.labelConfirm,
+        onClick: e.withModifiers(n.confirm, ["stop", "prevent"])
+      }, {
+        icon: e.withCtx(() => [
+          e.createVNode(s, { size: 20 })
+        ]),
+        _: 1
+      }, 8, ["aria-label", "onClick"]),
+      e.createVNode(a, {
+        "native-type": "reset",
+        type: l.primary ? "primary" : "tertiary",
+        "aria-label": c.labelCancel,
+        onClick: e.withModifiers(n.cancel, ["stop", "prevent"])
+      }, {
+        icon: e.withCtx(() => [
+          e.createVNode(p, { size: 20 })
+        ]),
+        _: 1
+      }, 8, ["type", "aria-label", "onClick"])
+    ], 32)
+  ]);
+}
+const y = /* @__PURE__ */ f._export_sfc(C, [["render", _], ["__scopeId", "data-v-5be11683"]]);
+exports.NcInputConfirmCancel = y;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputConfirmCancel-CbIGLBVK.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\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\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @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 ref=\"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 native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\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 native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\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<script>\nimport NcButton from '../NcButton/index.ts'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\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\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\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.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', 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\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\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":["_sfc_main","NcButton","_l10n","newValue","_hoisted_1","_hoisted_2","vue","_cache","$event","$options","$props","$data"],"mappings":";;;AAmEA,MAAAA,IAAA;AAAA;;IAIE,UAAAC,EAAA;AAAA;;;EAKD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,SAAA;AAAA;;;;;;;;;;;;EAgBD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,cAAAC,EAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,EAAA,gBAAA;AAAA,IACD;AAAA;EAGD,UAAA;AAAA;;;;;AAIG,aAAA,MAAA,qBAAAC,CAAA;AAAA;;;EAKH,SAAA;AAAA,IACC,UAAA;AACC,WAAA,MAAA,SAAA;AAAA;IAED,SAAA;AACC,WAAA,MAAA,QAAA;AAAA;;;;;AAMH,GAnGMC,IAAA,EAAA,OAAA,+BAAA,GA9BNC,IAAA,CAAA,aAAA;;;AA8BC,SAAAC,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAF,GAAA;AAAA;;;;;;;QAIS,KAAA;AAAA,QAlCV,uBAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,aAAAD;AAAA,QAoCI,MAAA;AAAA,QACA,OAAA;AAAA,QACC,aAAAE,EAAA;AAAA,MAtCL,GAAA,MAAA,GAAAL,CAAA,GAAA;AAAA;;;QAwCa,eAAA;AAAA,QACT,MAAA;AAAA,QACC,cAAAM,EAAA;AAAA;;QAEU,MAAAL,EAAA,QAAA,MAAA;AAAA;;;;;QAKF,eAAA;AAAA,QACR,MAAAI,EAAA,UAAA,YAAA;AAAA,QACA,cAAAC,EAAA;AAAA;;QAEU,MAAAL,EAAA,QAAA,MAAA;AAAA;;;;;;;;;"}

package/dist/chunks/NcInputConfirmCancel-nPRl_bEp.mjs

@@ -0,0 +1,112 @@
+import "../assets/NcInputConfirmCancel-D8YX9GNh.css";
+import { N as C } from "./NcButton-BOed2DnZ.mjs";
+import { r as v, m as _, a as p } from "./_l10n-D1NkaqfQ.mjs";
+import { A as y } from "./ArrowRight-oiVcv9Oj.mjs";
+import { C as h } from "./Close-4aPDwwcw.mjs";
+import { resolveComponent as a, openBlock as b, createElementBlock as g, createElementVNode as s, withModifiers as n, withKeys as N, withDirectives as w, vModelText as k, createVNode as r, withCtx as u } from "vue";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+v(_);
+const V = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton: C,
+    ArrowRight: y,
+    Close: h
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: !1,
+      type: Boolean
+    },
+    placeholder: {
+      default: "",
+      type: String
+    },
+    modelValue: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "cancel",
+    "confirm",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      labelConfirm: p("Confirm changes"),
+      labelCancel: p("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.modelValue;
+      },
+      set(l) {
+        this.$emit("update:modelValue", l);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+}, B = { class: "app-navigation-input-confirm" }, M = ["placeholder"];
+function A(l, e, i, I, c, t) {
+  const f = a("ArrowRight"), m = a("NcButton"), d = a("Close");
+  return b(), g("div", B, [
+    s("form", {
+      onSubmit: e[1] || (e[1] = n((...o) => t.confirm && t.confirm(...o), ["prevent"])),
+      onKeydown: e[2] || (e[2] = N(n((...o) => t.cancel && t.cancel(...o), ["exact", "stop", "prevent"]), ["esc"])),
+      onClick: e[3] || (e[3] = n(() => {
+      }, ["stop", "prevent"]))
+    }, [
+      w(s("input", {
+        ref: "input",
+        "onUpdate:modelValue": e[0] || (e[0] = (o) => t.valueModel = o),
+        type: "text",
+        class: "app-navigation-input-confirm__input",
+        placeholder: i.placeholder
+      }, null, 8, M), [
+        [k, t.valueModel]
+      ]),
+      r(m, {
+        "native-type": "submit",
+        type: "primary",
+        "aria-label": c.labelConfirm,
+        onClick: n(t.confirm, ["stop", "prevent"])
+      }, {
+        icon: u(() => [
+          r(f, { size: 20 })
+        ]),
+        _: 1
+      }, 8, ["aria-label", "onClick"]),
+      r(m, {
+        "native-type": "reset",
+        type: i.primary ? "primary" : "tertiary",
+        "aria-label": c.labelCancel,
+        onClick: n(t.cancel, ["stop", "prevent"])
+      }, {
+        icon: u(() => [
+          r(d, { size: 20 })
+        ]),
+        _: 1
+      }, 8, ["type", "aria-label", "onClick"])
+    ], 32)
+  ]);
+}
+const U = /* @__PURE__ */ x(V, [["render", A], ["__scopeId", "data-v-5be11683"]]);
+export {
+  U as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputConfirmCancel-nPRl_bEp.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\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\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @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 ref=\"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 native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\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 native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\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<script>\nimport NcButton from '../NcButton/index.ts'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\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\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\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.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', 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\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\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":["_sfc_main","NcButton","t","newValue","_hoisted_1","_hoisted_2","openBlock","createElementBlock","_cache","$event","$options","$props","$data","withCtx"],"mappings":";;;;;;;;AAmEA,MAAAA,IAAA;AAAA;;IAIE,UAAAC;AAAA;;;EAKD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,SAAA;AAAA;;;;;;;;;;;;EAgBD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,cAAAC,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,gBAAA;AAAA,IACD;AAAA;EAGD,UAAA;AAAA;;;;;AAIG,aAAA,MAAA,qBAAAC,CAAA;AAAA;;;EAKH,SAAA;AAAA,IACC,UAAA;AACC,WAAA,MAAA,SAAA;AAAA;IAED,SAAA;AACC,WAAA,MAAA,QAAA;AAAA;;;;;AAMH,GAnGMC,IAAA,EAAA,OAAA,+BAAA,GA9BNC,IAAA,CAAA,aAAA;;;AA8BC,SAAAC,EAAA,GAAAC,EAAA,OAAAH,GAAA;AAAA;;;;;;;QAIS,KAAA;AAAA,QAlCV,uBAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAC,EAAA,aAAAD;AAAA,QAoCI,MAAA;AAAA,QACA,OAAA;AAAA,QACC,aAAAE,EAAA;AAAA,MAtCL,GAAA,MAAA,GAAAN,CAAA,GAAA;AAAA;;;QAwCa,eAAA;AAAA,QACT,MAAA;AAAA,QACC,cAAAO,EAAA;AAAA;;QAEU,MAAAC,EAAA,MAAA;AAAA;;;;;QAKF,eAAA;AAAA,QACR,MAAAF,EAAA,UAAA,YAAA;AAAA,QACA,cAAAC,EAAA;AAAA;;QAEU,MAAAC,EAAA,MAAA;AAAA;;;;;;;;"}

package/dist/chunks/NcInputField-BSNgY76i.cjs

@@ -0,0 +1,283 @@
+var V = require("../assets/NcInputField-CrHgx7u4.css");
+const c = require("./NcButton-CR5WPHh9.cjs"), d = require("./GenRandomId-B2O1GMbH.cjs"), u = require("./AlertCircleOutline-CWsuE9tq.cjs"), h = require("./Check-DfVOclb6.cjs"), e = require("vue"), p = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), _ = {
+  name: "NcInputField",
+  components: {
+    NcButton: c.NcButton,
+    AlertCircle: u.AlertCircle,
+    Check: h.Check
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
+     */
+    modelValue: {
+      type: [String, Number],
+      required: !0
+    },
+    /**
+     * The type of the input element
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator: (l) => [
+        "text",
+        "password",
+        "email",
+        "tel",
+        "url",
+        "search",
+        "number"
+      ].includes(l)
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * Toggles the error state of the component. Adds an error icon.
+     * this cannot be used together with canClear.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * Specifies whether the input should have a pill form.
+     * By default, input has rounded corners.
+     */
+    pill: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the root component.
+     */
+    class: {
+      type: [Object, String, Array],
+      default: ""
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "trailing-button-click"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + d.GenRandomId();
+    },
+    hasTrailingIcon() {
+      return this.success;
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const l = this.label || this.labelOutside;
+      return l || console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation."), l;
+    },
+    ariaDescribedby() {
+      const l = [];
+      return this.helperText.length > 0 && l.push("".concat(this.inputName, "-helper-text")), this.$attrs["aria-describedby"] && l.push(this.$attrs["aria-describedby"]), l.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(l) {
+      this.$emit("update:modelValue", this.type === "number" && typeof this.modelValue == "number" ? parseFloat(l.target.value, 10) : l.target.value);
+    },
+    handleTrailingButtonClick(l) {
+      this.$emit("trailing-button-click", l);
+    }
+  }
+}, m = { class: "input-field__main-wrapper" }, f = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"], b = ["for"], g = { class: "input-field__icon input-field__icon--leading" }, y = {
+  key: 2,
+  class: "input-field__icon input-field__icon--trailing"
+}, k = ["id"];
+function B(l, n, t, N, v, i) {
+  const s = e.resolveComponent("NcButton"), a = e.resolveComponent("Check"), r = e.resolveComponent("AlertCircle");
+  return e.openBlock(), e.createElementBlock("div", {
+    class: e.normalizeClass(["input-field", [{ "input-field--disabled": t.disabled }, l.$props.class]])
+  }, [
+    e.createElementVNode("div", m, [
+      e.createElementVNode("input", e.mergeProps(l.$attrs, {
+        id: i.computedId,
+        ref: "input",
+        class: ["input-field__input", [
+          t.inputClass,
+          {
+            "input-field__input--trailing-icon": t.showTrailingButton || i.hasTrailingIcon,
+            "input-field__input--leading-icon": !!l.$slots.icon,
+            "input-field__input--label-outside": t.labelOutside,
+            "input-field__input--success": t.success,
+            "input-field__input--error": t.error,
+            "input-field__input--pill": t.pill
+          }
+        ]],
+        type: t.type,
+        disabled: t.disabled,
+        placeholder: i.computedPlaceholder,
+        "aria-describedby": i.ariaDescribedby,
+        "aria-live": "polite",
+        value: t.modelValue.toString(),
+        onInput: n[0] || (n[0] = (...o) => i.handleInput && i.handleInput(...o))
+      }), null, 16, f),
+      !t.labelOutside && i.isValidLabel ? (e.openBlock(), e.createElementBlock("label", {
+        key: 0,
+        class: e.normalizeClass(["input-field__label", [{
+          "input-field__label--trailing-icon": t.showTrailingButton || i.hasTrailingIcon,
+          "input-field__label--leading-icon": !!l.$slots.icon
+        }]]),
+        for: i.computedId
+      }, e.toDisplayString(t.label), 11, b)) : e.createCommentVNode("", !0),
+      e.withDirectives(e.createElementVNode("div", g, [
+        e.renderSlot(l.$slots, "icon", {}, void 0, !0)
+      ], 512), [
+        [e.vShow, !!l.$slots.icon]
+      ]),
+      t.showTrailingButton ? (e.openBlock(), e.createBlock(s, {
+        key: 1,
+        type: "tertiary-no-background",
+        class: e.normalizeClass(["input-field__trailing-button", [{
+          "input-field__trailing-button--pill": t.pill
+        }]]),
+        "aria-label": t.trailingButtonLabel,
+        disabled: t.disabled,
+        onClick: i.handleTrailingButtonClick
+      }, {
+        icon: e.withCtx(() => [
+          e.renderSlot(l.$slots, "trailing-button-icon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["class", "aria-label", "disabled", "onClick"])) : t.success || t.error ? (e.openBlock(), e.createElementBlock("div", y, [
+        t.success ? (e.openBlock(), e.createBlock(a, {
+          key: 0,
+          size: 20,
+          style: { color: "var(--color-success-text)" }
+        })) : t.error ? (e.openBlock(), e.createBlock(r, {
+          key: 1,
+          size: 20,
+          style: { color: "var(--color-error-text)" }
+        })) : e.createCommentVNode("", !0)
+      ])) : e.createCommentVNode("", !0)
+    ]),
+    t.helperText.length > 0 ? (e.openBlock(), e.createElementBlock("p", {
+      key: 0,
+      id: "".concat(i.inputName, "-helper-text"),
+      class: e.normalizeClass(["input-field__helper-text-message", {
+        "input-field__helper-text-message--error": t.error,
+        "input-field__helper-text-message--success": t.success
+      }])
+    }, [
+      t.success ? (e.openBlock(), e.createBlock(a, {
+        key: 0,
+        class: "input-field__helper-text-message__icon",
+        size: 18
+      })) : t.error ? (e.openBlock(), e.createBlock(r, {
+        key: 1,
+        class: "input-field__helper-text-message__icon",
+        size: 18
+      })) : e.createCommentVNode("", !0),
+      e.createTextVNode(" " + e.toDisplayString(t.helperText), 1)
+    ], 10, k)) : e.createCommentVNode("", !0)
+  ], 2);
+}
+const C = /* @__PURE__ */ p._export_sfc(_, [["render", B], ["__scopeId", "data-v-53a71842"]]);
+exports.NcInputField = C;

package/dist/chunks/NcInputField-BSNgY76i.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputField-BSNgY76i.cjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\" :class=\"[{ 'input-field--disabled': disabled }, $props.class ]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t\t'input-field__input--leading-icon': !!$slots.icon,\n\t\t\t\t\t\t'input-field__input--label-outside': labelOutside,\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t\t'input-field__input--pill': pill,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__label--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t'input-field__label--leading-icon': !!$slots.icon,\n\t\t\t\t}]\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- Leading material design icon in the text field, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__trailing-button--pill': pill,\n\t\t\t\t}]\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t *\n\t\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the root component.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [Object, String, Array],\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'trailing-button-click',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:modelValue', this.type === 'number' && typeof this.modelValue === 'number' ? parseFloat(event.target.value, 10) : event.target.value)\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: var(--default-clickable-area) !important;\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t// Center text if external label is used\n\t\t&--label-outside {\n\t\t\tpadding-block: 0;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: 2px solid var(--color-main-text) !important;\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--pill {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tmargin-inline-end: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: 41px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\t&--leading {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t&--pill.button-vue {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","value","isValidLabel","ariaDescribedby","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","vue","$options","$props","_ctx","_cache","args","_hoisted_5"],"mappings":"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"}