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

package/dist/chunks/NcSettingsSection-BN98AV4b.mjs

@@ -0,0 +1,115 @@
+import '../assets/NcSettingsSection-DrlA06-W.css';
+import { r as register, p as t22, a as t } from "./_l10n-ipRV_dfs.mjs";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createTextVNode, createVNode, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t22);
+const _sfc_main$1 = {
+  name: "HelpCircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" };
+const _hoisted_4$1 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
+    class: "material-design-icon help-circle-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$1);
+}
+const HelpCircle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "NcSettingsSection",
+  components: {
+    HelpCircle
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    docUrl: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      docNameTranslated: t("External documentation for {name}", {
+        name: this.name
+      })
+    };
+  },
+  computed: {
+    hasDescription() {
+      return this.description.length > 0;
+    },
+    hasDocUrl() {
+      return this.docUrl.length > 0;
+    }
+  }
+};
+const _hoisted_1 = { class: "settings-section" };
+const _hoisted_2 = { class: "settings-section__name" };
+const _hoisted_3 = ["href", "title", "aria-label"];
+const _hoisted_4 = {
+  key: 0,
+  class: "settings-section__desc"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HelpCircle = resolveComponent("HelpCircle");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("h2", _hoisted_2, [
+      createTextVNode(toDisplayString($props.name) + " ", 1),
+      $options.hasDocUrl ? (openBlock(), createElementBlock("a", {
+        key: 0,
+        href: $props.docUrl,
+        class: "settings-section__info",
+        title: $data.docNameTranslated,
+        "aria-label": $data.docNameTranslated,
+        target: "_blank",
+        rel: "noreferrer nofollow"
+      }, [
+        createVNode(_component_HelpCircle, { size: 20 })
+      ], 8, _hoisted_3)) : createCommentVNode("", true)
+    ]),
+    $options.hasDescription ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($props.description), 1)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ]);
+}
+const NcSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-22d69bf6"]]);
+export {
+  NcSettingsSection as N
+};

package/dist/chunks/NcSettingsSection-BN98AV4b.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSection-BN98AV4b.mjs","sources":["../../node_modules/vue-material-design-icons/HelpCircle.vue","../../src/components/NcSettingsSection/NcSettingsSection.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon help-circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"HelpCircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\n  - @author Greta Doci <gretadoci@gmail.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\n<docs>\n### General description\n\nThis component is to be used in the settings section of nextcloud.\n\n### Examples\n\n```vue\n<template>\n\t<NcSettingsSection\n\t\tname=\"Two-Factor Authentication\"\n\t\tdescription=\"Two-factor authentication can be enforced for all users and specific groups.\"\n\t\tdoc-url=\"https://docs.nextcloud.com/server/19/go.php?to=admin-2fa\">\n\t\t<p>Your settings here</p>\n\t</NcSettingsSection>\n</template>\n```\n</docs>\n\n<template>\n\t<div class=\"settings-section\">\n\t\t<h2 class=\"settings-section__name\">\n\t\t\t{{ name }}\n\t\t\t<a v-if=\"hasDocUrl\"\n\t\t\t\t:href=\"docUrl\"\n\t\t\t\tclass=\"settings-section__info\"\n\t\t\t\t:title=\"docNameTranslated\"\n\t\t\t\t:aria-label=\"docNameTranslated\"\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\trel=\"noreferrer nofollow\">\n\t\t\t\t<HelpCircle :size=\"20\" />\n\t\t\t</a>\n\t\t</h2>\n\t\t<p v-if=\"hasDescription\"\n\t\t\tclass=\"settings-section__desc\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\n\nimport HelpCircle from 'vue-material-design-icons/HelpCircle.vue'\n\nexport default {\n\tname: 'NcSettingsSection',\n\n\tcomponents: {\n\t\tHelpCircle,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tdocNameTranslated: t('External documentation for {name}', {\n\t\t\t\tname: this.name,\n\t\t\t}),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasDescription() {\n\t\t\treturn this.description.length > 0\n\t\t},\n\t\thasDocUrl() {\n\t\t\treturn this.docUrl.length > 0\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n$maxWidth: 900px;\n$sectionMargin: calc(var(--default-grid-baseline) * 7);\n\n.settings-section {\n\tdisplay: block;\n\tpadding: 0 0 calc(var(--default-grid-baseline) * 5) 0;\n\tmargin: $sectionMargin;\n\twidth: min($maxWidth, 100% - calc($sectionMargin * 2));\n\n\t&:not(:last-child) {\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t&__name {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmax-width: $maxWidth;\n\t}\n\n\t&__info {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\t// make sure to properly align the icon with the text\n\t\tmargin: -$icon-margin;\n\t\tmargin-left: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover, &:focus, &:active {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n\n\t&__desc {\n\t\tmargin-top: -.2em;\n\t\tmargin-bottom: 1em;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmax-width: $maxWidth;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","_openBlock","_createTextVNode","_toDisplayString","_createVNode","_renderSlot"],"mappings":";;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,oUAAmU;uBAZjV,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACqEA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EAED,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA,IACD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AACN,WAAO;AAAA,MACN,mBAAmB,EAAE,qCAAqC;AAAA,QACzD,MAAM,KAAK;AAAA,MACZ,CAAC;AAAA,IACF;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,iBAAiB;AAChB,aAAO,KAAK,YAAY,SAAS;AAAA,IACjC;AAAA,IACD,YAAY;AACX,aAAO,KAAK,OAAO,SAAS;AAAA,IAC5B;AAAA,EACD;AACF;AAhEM,MAAA,aAAA,EAAA,OAAM,mBAAkB;AACxB,MAAA,aAAA,EAAA,OAAM,yBAAwB;AA5CpC,MAAA,aAAA,CAAA,QAAA,SAAA,YAAA;;EAAA,KAAA;AAAA,EAyDG,OAAM;;;;AAdR,SAAAQ,UAAA,GAAAL,mBAkBM,OAlBN,YAkBM;AAAA,IAjBLE,mBAWK,MAXL,YAWK;AAAA,MAvDPI,gBA6CMC,gBAAA,OAAA,IAAI,IAAG,KACV,CAAA;AAAA,MAAS,SAAS,0BAAlBP,mBAQI,KAAA;AAAA,QAtDP,KAAA;AAAA,QA+CK,MAAM,OAAM;AAAA,QACb,OAAM;AAAA,QACL,OAAO,MAAiB;AAAA,QACxB,cAAY,MAAiB;AAAA,QAC9B,QAAO;AAAA,QACP,KAAI;AAAA;QACJQ,YAAyB,uBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA,MArDzB,GAAA,GAAA,UAAA,KAAAJ,mBAAA,IAAA,IAAA;AAAA;IAwDW,SAAc,+BAAvBJ,mBAGI,KAHJ,YAGIO,gBADA,OAAW,WAAA,GAAA,CAAA,KA1DjBH,mBAAA,IAAA,IAAA;AAAA,IA4DEK,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcSettingsSelectGroup-61ylzaOo.mjs

@@ -0,0 +1,226 @@
+import '../assets/NcSettingsSelectGroup-Ba_9qqBq.css';
+import { N as NcSelect } from "./NcSelect-Dt3JJc9b.mjs";
+import { r as register, e as t42, a as t } from "./_l10n-ipRV_dfs.mjs";
+import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import axios from "@nextcloud/axios";
+import debounce from "debounce";
+import { generateOcsUrl } from "@nextcloud/router";
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, vShow } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t42);
+const _sfc_main = {
+  name: "NcSettingsSelectGroup",
+  components: {
+    NcSelect
+  },
+  props: {
+    /**
+     * The text of the label element of the select group input
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * Placeholder for the input element
+     * For backwards compatibility it falls back to the `label` value
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * id attribute of the select group element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * value of the select group input
+     * A list of group IDs can be provided
+     */
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * disabled state of the settings select group input
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "error",
+    "input",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      /** Temporary store to cache groups */
+      groups: {},
+      randId: GenRandomId(),
+      errorMessage: ""
+    };
+  },
+  computed: {
+    /**
+     * If the error message should be shown
+     */
+    hasError() {
+      return this.errorMessage !== "";
+    },
+    /**
+     * Validate input value and only return valid strings (group IDs)
+     *
+     * @return {string[]}
+     */
+    filteredValue() {
+      return this.modelValue.filter((group) => group !== "" && typeof group === "string");
+    },
+    /**
+     * value property converted to an array of group objects used as input for the NcSelect
+     */
+    inputValue() {
+      return this.filteredValue.map(
+        (id) => {
+          if (typeof this.groups[id] === "undefined") {
+            return {
+              id,
+              displayname: id
+            };
+          }
+          return this.groups[id];
+        }
+      );
+    },
+    /**
+     * Convert groups object to array of groups required for NcSelect.options
+     * Filter out currently selected values
+     *
+     * @return {object[]}
+     */
+    groupsArray() {
+      return Object.values(this.groups).filter((g) => !this.modelValue.includes(g.id));
+    }
+  },
+  watch: {
+    /**
+     * If the value is changed, check that all groups are loaded so we show the correct display name
+     */
+    modelValue: {
+      handler() {
+        const loadedGroupIds = Object.keys(this.groups);
+        const missing = this.filteredValue.filter((group) => !loadedGroupIds.includes(group));
+        missing.forEach((groupId) => {
+          this.loadGroup(groupId);
+        });
+      },
+      // Run the watch handler also when the component is initially mounted
+      immediate: true
+    }
+  },
+  /**
+   * Load groups matching the empty query to reduce API calls
+   */
+  async mounted() {
+    const storageName = `${appName}:${appVersion}/initialGroups`;
+    let savedGroups = window.sessionStorage.getItem(storageName);
+    if (savedGroups) {
+      savedGroups = Object.fromEntries(JSON.parse(savedGroups).map((group) => [group.id, group]));
+      this.groups = { ...this.groups, ...savedGroups };
+    } else {
+      await this.loadGroup("");
+      window.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)));
+    }
+  },
+  methods: {
+    t,
+    /**
+     * Called when a new group is selected or previous group is deselected to emit the update event
+     *
+     * @param {object[]} updatedValue Array of selected groups
+     */
+    update(updatedValue) {
+      const value = updatedValue.map((element) => element.id);
+      this.$emit("update:modelValue", value);
+    },
+    /**
+     * Use provisioning API to search for given group and save it in the groups object
+     *
+     * @param {string} query The query like parts of the id oder display name
+     * @return {boolean}
+     */
+    async loadGroup(query) {
+      try {
+        query = typeof query === "string" ? encodeURI(query) : "";
+        const response = await axios.get(generateOcsUrl(`cloud/groups/details?search=${query}&limit=10`, 2));
+        if (this.errorMessage !== "") {
+          window.setTimeout(() => {
+            this.errorMessage = "";
+          }, 5e3);
+        }
+        if (Object.keys(response.data.ocs.data.groups).length > 0) {
+          const newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]));
+          this.groups = { ...this.groups, ...newGroups };
+          return true;
+        }
+      } catch (error) {
+        this.$emit("error", error);
+        this.errorMessage = t("Unable to search the group");
+      }
+      return false;
+    },
+    /**
+     * Custom filter function for `NcSelect` to filter by ID *and* display name
+     *
+     * @param {object} option One of the groups
+     * @param {string} label The label property of the group
+     * @param {string} search The current search string
+     */
+    filterGroups(option, label, search) {
+      return `${label || ""} ${option.id}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
+    },
+    /**
+     * Debounce the group search (reduce API calls)
+     */
+    onSearch: debounce(function(query) {
+      this.loadGroup(query);
+    }, 200)
+  }
+};
+const _hoisted_1 = ["for"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcSelect = resolveComponent("NcSelect");
+  return openBlock(), createElementBlock("div", null, [
+    $props.label ? (openBlock(), createElementBlock("label", {
+      key: 0,
+      for: $props.id,
+      class: "hidden-visually"
+    }, toDisplayString($props.label), 9, _hoisted_1)) : createCommentVNode("", true),
+    createVNode(_component_NcSelect, {
+      "model-value": $options.inputValue,
+      options: $options.groupsArray,
+      placeholder: $props.placeholder || $props.label,
+      "filter-by": $options.filterGroups,
+      "input-id": $props.id,
+      limit: 5,
+      label: "displayname",
+      multiple: true,
+      "close-on-select": false,
+      disabled: $props.disabled,
+      "onUpdate:modelValue": $options.update,
+      onSearch: $options.onSearch
+    }, null, 8, ["model-value", "options", "placeholder", "filter-by", "input-id", "disabled", "onUpdate:modelValue", "onSearch"]),
+    withDirectives(createElementVNode("div", { class: "select-group-error" }, toDisplayString($data.errorMessage), 513), [
+      [vShow, $options.hasError]
+    ])
+  ]);
+}
+const NcSettingsSelectGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7a7f3619"]]);
+export {
+  NcSettingsSelectGroup as N
+};

package/dist/chunks/NcSettingsSelectGroup-61ylzaOo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-61ylzaOo.mjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\n  - @author Greta Doci <gretadoci@gmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.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```vue\n<template>\n\t<section>\n\t\t<NcSettingsSelectGroup v-model=\"groups\" placeholder=\"Select user groups\" label=\"The hidden label\" />\n\t\t<NcSettingsSelectGroup v-model=\"otherGroups\" :disabled=\"true\" label=\"Also a fallback for the placeholder\" />\n\t\t<div>You have selected: <code>{{ groups }}</code> and <code>{{ otherGroups }}</code></div>\n\t</section>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\totherGroups: ['admin']\n\t\t}\n\t}\n}\n</script>\n<style scoped>\nsection * {\n\tpadding: 6px 0px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div>\n\t\t<label v-if=\"label\" :for=\"id\" class=\"hidden-visually\">{{ label }}</label>\n\t\t<NcSelect :model-value=\"inputValue\"\n\t\t\t:options=\"groupsArray\"\n\t\t\t:placeholder=\"placeholder || label\"\n\t\t\t:filter-by=\"filterGroups\"\n\t\t\t:input-id=\"id\"\n\t\t\t:limit=\"5\"\n\t\t\tlabel=\"displayname\"\n\t\t\t:multiple=\"true\"\n\t\t\t:close-on-select=\"false\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@update:model-value=\"update\"\n\t\t\t@search=\"onSearch\" />\n\t\t<div v-show=\"hasError\" class=\"select-group-error\">\n\t\t\t{{ errorMessage }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport axios from '@nextcloud/axios'\nimport debounce from 'debounce'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text of the label element of the select group input\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder for the input element\n\t\t * For backwards compatibility it falls back to the `label` value\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t * A list of group IDs can be provided\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\temits: [\n\t\t'error',\n\t\t'input',\n\t\t'update:modelValue',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/** Temporary store to cache groups */\n\t\t\tgroups: {},\n\t\t\trandId: GenRandomId(),\n\t\t\terrorMessage: '',\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * If the error message should be shown\n\t\t */\n\t\thasError() {\n\t\t\treturn this.errorMessage !== ''\n\t\t},\n\n\t\t/**\n\t\t * Validate input value and only return valid strings (group IDs)\n\t\t *\n\t\t * @return {string[]}\n\t\t */\n\t\tfilteredValue() {\n\t\t\treturn this.modelValue.filter((group) => group !== '' && typeof group === 'string')\n\t\t},\n\n\t\t/**\n\t\t * value property converted to an array of group objects used as input for the NcSelect\n\t\t */\n\t\tinputValue() {\n\t\t\treturn this.filteredValue.map(\n\t\t\t\t(id) => {\n\t\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn this.groups[id]\n\t\t\t\t},\n\t\t\t)\n\t\t},\n\n\t\t/**\n\t\t * Convert groups object to array of groups required for NcSelect.options\n\t\t * Filter out currently selected values\n\t\t *\n\t\t * @return {object[]}\n\t\t */\n\t\tgroupsArray() {\n\t\t\treturn Object.values(this.groups).filter(g => !this.modelValue.includes(g.id))\n\t\t},\n\t},\n\twatch: {\n\t\t/**\n\t\t * If the value is changed, check that all groups are loaded so we show the correct display name\n\t\t */\n\t\tmodelValue: {\n\t\t\thandler() {\n\t\t\t\tconst loadedGroupIds = Object.keys(this.groups)\n\t\t\t\tconst missing = this.filteredValue.filter(group => !loadedGroupIds.includes(group))\n\t\t\t\tmissing.forEach((groupId) => {\n\t\t\t\t\tthis.loadGroup(groupId)\n\t\t\t\t})\n\t\t\t},\n\t\t\t// Run the watch handler also when the component is initially mounted\n\t\t\timmediate: true,\n\t\t},\n\t},\n\t/**\n\t * Load groups matching the empty query to reduce API calls\n\t */\n\tasync mounted() {\n\t\t// version scoped to prevent issues with different library versions\n\t\tconst storageName = `${appName}:${appVersion}/initialGroups`\n\n\t\tlet savedGroups = window.sessionStorage.getItem(storageName)\n\t\tif (savedGroups) {\n\t\t\tsavedGroups = Object.fromEntries(JSON.parse(savedGroups).map(group => [group.id, group]))\n\t\t\tthis.groups = { ...this.groups, ...savedGroups }\n\t\t} else {\n\t\t\tawait this.loadGroup('')\n\t\t\twindow.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)))\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Called when a new group is selected or previous group is deselected to emit the update event\n\t\t *\n\t\t * @param {object[]} updatedValue Array of selected groups\n\t\t */\n\t\tupdate(updatedValue) {\n\t\t\tconst value = updatedValue.map((element) => element.id)\n\t\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t\tthis.$emit('update:modelValue', value)\n\t\t},\n\n\t\t/**\n\t\t * Use provisioning API to search for given group and save it in the groups object\n\t\t *\n\t\t * @param {string} query The query like parts of the id oder display name\n\t\t * @return {boolean}\n\t\t */\n\t\tasync loadGroup(query) {\n\t\t\ttry {\n\t\t\t\tquery = typeof query === 'string' ? encodeURI(query) : ''\n\t\t\t\tconst response = await axios.get(generateOcsUrl(`cloud/groups/details?search=${query}&limit=10`, 2))\n\n\t\t\t\t// No network error, so reset any error after 5 seconds\n\t\t\t\tif (this.errorMessage !== '') {\n\t\t\t\t\twindow.setTimeout(() => {\n\t\t\t\t\t\tthis.errorMessage = ''\n\t\t\t\t\t}, 5000)\n\t\t\t\t}\n\n\t\t\t\tif (Object.keys(response.data.ocs.data.groups).length > 0) {\n\t\t\t\t\tconst newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]))\n\t\t\t\t\tthis.groups = { ...this.groups, ...newGroups }\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t/** Emitted if groups could not be queried.<br />**Payload:** `error` (`object`) - The Axios error */\n\t\t\t\tthis.$emit('error', error)\n\t\t\t\tthis.errorMessage = t('Unable to search the group')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * Custom filter function for `NcSelect` to filter by ID *and* display name\n\t\t *\n\t\t * @param {object} option One of the groups\n\t\t * @param {string} label The label property of the group\n\t\t * @param {string} search The current search string\n\t\t */\n\t\tfilterGroups(option, label, search) {\n\t\t\treturn `${label || ''} ${option.id}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1\n\t\t},\n\n\t\t/**\n\t\t * Debounce the group search (reduce API calls)\n\t\t */\n\t\tonSearch: debounce(function(query) {\n\t\t\tthis.loadGroup(query)\n\t\t}, 200),\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.select-group-error {\n\tcolor: var(--color-error);\n\tfont-size: 13px;\n\tpadding-inline-start: var(--border-radius-large);\n}\n</style>\n"],"names":["_createElementBlock","_toDisplayString","_createCommentVNode","_createVNode","_withDirectives","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcTextArea-DOXp3B2R.mjs

@@ -0,0 +1,217 @@
+import '../assets/NcTextArea-n0qdPImB.css';
+import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { A as AlertCircle } from "./AlertCircleOutline-DWBCJkLM.mjs";
+import { C as Check } from "./Check-_j2mQvkT.mjs";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toDisplayString, createCommentVNode, createBlock, createTextVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcTextArea",
+  components: {
+    AlertCircle,
+    Check
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The value of the input field
+     */
+    modelValue: {
+      type: String,
+      required: true
+    },
+    /**
+     * 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.
+     */
+    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
+    },
+    /**
+     * 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
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * The resize CSS property sets whether an element is resizable, and if
+     * so, in which directions.
+     */
+    resize: {
+      type: String,
+      default: "both",
+      validator: (value) => ["both", "vertical", "horizontal", "none"].includes(value)
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + GenRandomId();
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const isValidLabel = this.label || this.labelOutside;
+      if (!isValidLabel) {
+        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.");
+      }
+      return isValidLabel;
+    },
+    ariaDescribedby() {
+      const ariaDescribedby = [];
+      if (this.helperText.length > 0) {
+        ariaDescribedby.push(`${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) {
+      this.$emit("update:modelValue", event.target.value);
+    }
+  }
+};
+const _hoisted_1 = { class: "textarea__main-wrapper" };
+const _hoisted_2 = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"];
+const _hoisted_3 = ["for"];
+const _hoisted_4 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Check = resolveComponent("Check");
+  const _component_AlertCircle = resolveComponent("AlertCircle");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["textarea", { "textarea--disabled": $props.disabled }])
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("textarea", mergeProps(_ctx.$attrs, {
+        id: $options.computedId,
+        ref: "input",
+        class: ["textarea__input", [
+          $props.inputClass,
+          {
+            "textarea__input--label-outside": $props.labelOutside,
+            "textarea__input--success": $props.success,
+            "textarea__input--error": $props.error
+          }
+        ]],
+        type: _ctx.type,
+        disabled: $props.disabled,
+        placeholder: $options.computedPlaceholder,
+        "aria-describedby": $options.ariaDescribedby,
+        "aria-live": "polite",
+        style: { resize: $props.resize },
+        value: $props.modelValue,
+        onInput: _cache[0] || (_cache[0] = (...args) => $options.handleInput && $options.handleInput(...args))
+      }), null, 16, _hoisted_2),
+      !$props.labelOutside && $options.isValidLabel ? (openBlock(), createElementBlock("label", {
+        key: 0,
+        class: "textarea__label",
+        for: $options.computedId
+      }, toDisplayString($props.label), 9, _hoisted_3)) : createCommentVNode("", true)
+    ]),
+    $props.helperText.length > 0 ? (openBlock(), createElementBlock("p", {
+      key: 0,
+      id: `${$options.inputName}-helper-text`,
+      class: normalizeClass(["textarea__helper-text-message", {
+        "textarea__helper-text-message--error": $props.error,
+        "textarea__helper-text-message--success": $props.success
+      }])
+    }, [
+      $props.success ? (openBlock(), createBlock(_component_Check, {
+        key: 0,
+        class: "textarea__helper-text-message__icon",
+        size: 18
+      })) : $props.error ? (openBlock(), createBlock(_component_AlertCircle, {
+        key: 1,
+        class: "textarea__helper-text-message__icon",
+        size: 18
+      })) : createCommentVNode("", true),
+      createTextVNode(" " + toDisplayString($props.helperText), 1)
+    ], 10, _hoisted_4)) : createCommentVNode("", true)
+  ], 2);
+}
+const NcTextArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-db4d2d17"]]);
+export {
+  NcTextArea as N
+};

package/dist/chunks/NcTextArea-DOXp3B2R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-DOXp3B2R.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud>\n  -\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\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 General Public License as published by\n  - the Free Software Foundation, either version 3 of the License, or\n  - (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 General Public License for more details.\n  -\n  - You should have received a copy of the GNU General Public License\n  - along with this program.  If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\" />\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\n\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\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__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'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"modelValue\"\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=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\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=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\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: 'NcTextArea',\n\n\tcomponents: {\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 */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\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\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 * 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 * 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\n\t\t/**\n\t\t * The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t */\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\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\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', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\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\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\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\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// 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&--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\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 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\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\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\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}\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":["_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toDisplayString","_createCommentVNode","_createBlock","_createTextVNode"],"mappings":"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"}