@nextcloud/vue 8.29.2 → 8.31.0

package/dist/chunks/{NcSettingsSelectGroup-SuQNKdqU.mjs → NcSettingsSelectGroup-C-YAk1f8.mjs}

@@ -1,13 +1,13 @@
-import '../assets/NcSettingsSelectGroup-tjJNoh16.css';
-import { N as NcSelect } from "./NcSelect-BUOuXJUQ.mjs";
-import { r as register, h as t48, a as t } from "./_l10n-CW0YfIWk.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
+import '../assets/NcSettingsSelectGroup-B9FlWQVH.css';
 import axios from "@nextcloud/axios";
-import debounce from "debounce";
 import { generateOcsUrl } from "@nextcloud/router";
+import debounce from "debounce";
+import { N as NcSelect } from "./NcSelect-PvjbF3jF.mjs";
+import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
+import { r as register, h as t49, a as t } from "./_l10n-BEfeU7gr.mjs";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t48);
+register(t49);
 const _sfc_main = {
   name: "NcSettingsSelectGroup",
   components: {
@@ -43,6 +43,7 @@ const _sfc_main = {
     },
     /**
      * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     value: {
@@ -68,6 +69,7 @@ const _sfc_main = {
   emits: [
     /**
      * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     "input",
@@ -110,17 +112,15 @@ const _sfc_main = {
      * 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];
+      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
@@ -228,10 +228,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2bea5f91"
+  "9d59765b"
 );
 const NcSettingsSelectGroup = __component__.exports;
 export {
   NcSettingsSelectGroup as N
 };
-//# sourceMappingURL=NcSettingsSelectGroup-SuQNKdqU.mjs.map
+//# sourceMappingURL=NcSettingsSelectGroup-C-YAk1f8.mjs.map

package/dist/chunks/NcSettingsSelectGroup-C-YAk1f8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-C-YAk1f8.mjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```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\n\t\t\t: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 axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport debounce from 'debounce'\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Array,\n\t\t\tdefault: undefined,\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\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'input',\n\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'error',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'input')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\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\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.model.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((id) => {\n\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn this.groups[id]\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.model.includes(g.id))\n\t\t},\n\t},\n\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\tvalue: {\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\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\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\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\tthis.model = 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-text-error, var(--color-error));\n\tfont-size: 13px;\n\tpadding-inline-start: var(--border-radius-large);\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcSettingsSelectGroup-D0s0bzQI.cjs → NcSettingsSelectGroup-X1pBwmAZ.cjs}

@@ -1,17 +1,17 @@
-require('../assets/NcSettingsSelectGroup-tjJNoh16.css');
+require('../assets/NcSettingsSelectGroup-B9FlWQVH.css');
 "use strict";
-const NcSelect = require("./NcSelect-CnLfkqdF.cjs");
-const _l10n = require("./_l10n-RKohWu5d.cjs");
-const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
-const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
 const axios = require("@nextcloud/axios");
-const debounce = require("debounce");
 const router = require("@nextcloud/router");
+const debounce = require("debounce");
+const NcSelect = require("./NcSelect-s3_u0qvy.cjs");
+const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
+const _l10n = require("./_l10n-DM-VRK9x.cjs");
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const axios__default = /* @__PURE__ */ _interopDefault(axios);
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
-_l10n.register(_l10n.t48);
+_l10n.register(_l10n.t49);
 const _sfc_main = {
   name: "NcSettingsSelectGroup",
   components: {
@@ -47,6 +47,7 @@ const _sfc_main = {
     },
     /**
      * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     value: {
@@ -72,6 +73,7 @@ const _sfc_main = {
   emits: [
     /**
      * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     "input",
@@ -114,17 +116,15 @@ const _sfc_main = {
      * 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];
+      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
@@ -232,8 +232,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2bea5f91"
+  "9d59765b"
 );
 const NcSettingsSelectGroup = __component__.exports;
 exports.NcSettingsSelectGroup = NcSettingsSelectGroup;
-//# sourceMappingURL=NcSettingsSelectGroup-D0s0bzQI.cjs.map
+//# sourceMappingURL=NcSettingsSelectGroup-X1pBwmAZ.cjs.map

package/dist/chunks/NcSettingsSelectGroup-X1pBwmAZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSelectGroup-X1pBwmAZ.cjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```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\n\t\t\t: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 axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport debounce from 'debounce'\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Array,\n\t\t\tdefault: undefined,\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\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'input',\n\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'error',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'input')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\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\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.model.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((id) => {\n\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn this.groups[id]\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.model.includes(g.id))\n\t\t},\n\t},\n\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\tvalue: {\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\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\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\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\tthis.model = 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-text-error, var(--color-error));\n\tfont-size: 13px;\n\tpadding-inline-start: var(--border-radius-large);\n}\n</style>\n"],"names":["NcSelect","GenRandomId","useModelMigration","t","axios","generateOcsUrl","debounce"],"mappings":"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"}

package/dist/chunks/{NcTextArea-BFLuhsEv.mjs → NcTextArea-DHmD6-6s.mjs}

@@ -1,9 +1,10 @@
-import '../assets/NcTextArea-vxeIyeSg.css';
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import '../assets/NcTextArea-B6zS3CRN.css';
 import { A as AlertCircle } from "./AlertCircleOutline-DBxbepLy.mjs";
 import { C as Check } from "./Check-BkThHPH7.mjs";
 import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
 import { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcTextArea",
@@ -19,6 +20,7 @@ const _sfc_main = {
   props: {
     /**
      * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     value: {
@@ -113,6 +115,7 @@ const _sfc_main = {
   emits: [
     /**
      * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     "update:value",
@@ -149,7 +152,7 @@ const _sfc_main = {
     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.");
+        logger.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
       }
       return isValidLabel;
     },
@@ -211,10 +214,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "673d1bdd"
+  "11ea0e4b"
 );
 const NcTextArea = __component__.exports;
 export {
   NcTextArea as N
 };
-//# sourceMappingURL=NcTextArea-BFLuhsEv.mjs.map
+//# sourceMappingURL=NcTextArea-DHmD6-6s.mjs.map

package/dist/chunks/NcTextArea-DHmD6-6s.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-DHmD6-6s.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 label=\"Text area\"\n\t\t\tv-model=\"text1\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\tv-model=\"text2\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tv-model=\"text3\"\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>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\tv-model=\"text4\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\tv-model=\"text5\"\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\tv-model=\"text6\"\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\tv-model=\"text7\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttext1: '',\n\t\t\t\ttext2: '',\n\t\t\t\ttext3: '',\n\t\t\t\ttext4: '',\n\t\t\t\ttext5: '',\n\t\t\t\ttext6: '',\n\t\t\t\ttext7: '',\n\t\t\t}\n\t\t},\n\t}\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\n\t\tclass=\"textarea\"\n\t\t:class=\"{\n\t\t\t'textarea--disabled': disabled,\n\t\t\t'textarea--legacy': isLegacy32,\n\t\t}\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea\n\t\t\t\tv-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: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--legacy': isLegacy,\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=\"model\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-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\n\t\t\tv-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 AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\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\tdefault: undefined,\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/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tisLegacy32,\n\t\t\tmodel,\n\t\t}\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\tif (this.hasPlaceholder) {\n\t\t\t\treturn this.placeholder\n\t\t\t}\n\t\t\tif (isLegacy32) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\treturn undefined\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\tlogger.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.model = event.target.value\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.textarea {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\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&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__main-wrapper {\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tpadding: var(--border-width-input, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(textarea:focus),\n\t\t&:not(:has([disabled])):has(textarea:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: calc(10px + var(--input-border-width-offset));\n\t\tpadding-inline: calc(12px - var(--border-width-input, 2px) + var(--input-border-width-offset)); // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\t// we use box shadow to create a border as this allows use to have a nice gradient\n\t\tborder: none;\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-large));\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\t&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);\n\t\t}\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-width-offset: 0px;\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\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\t--input-border-color: var(--color-border-success, 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\t--input-border-color: var(--color-border-error, 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\t// for Nextcloud 31 and older we need the old design with only one color\n\t&--legacy {\n\t\t.textarea__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);\n\t\t}\n\n\t\t.textarea__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.textarea__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcTextArea-B2hcap39.cjs → NcTextArea-DkVtHTpD.cjs}

@@ -1,10 +1,11 @@
-require('../assets/NcTextArea-vxeIyeSg.css');
+require('../assets/NcTextArea-B6zS3CRN.css');
 "use strict";
-const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const AlertCircleOutline = require("./AlertCircleOutline-BrsasUsU.cjs");
 const Check = require("./Check-Du8mPz_B.cjs");
 const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
 const legacy = require("./legacy-KBXhWdRy.cjs");
+const logger = require("./logger-3HuiEIF6.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   name: "NcTextArea",
@@ -20,6 +21,7 @@ const _sfc_main = {
   props: {
     /**
      * Removed in v9 - use `modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     value: {
@@ -114,6 +116,7 @@ const _sfc_main = {
   emits: [
     /**
      * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     "update:value",
@@ -150,7 +153,7 @@ const _sfc_main = {
     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.");
+        logger.logger.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
       }
       return isValidLabel;
     },
@@ -212,8 +215,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "673d1bdd"
+  "11ea0e4b"
 );
 const NcTextArea = __component__.exports;
 exports.NcTextArea = NcTextArea;
-//# sourceMappingURL=NcTextArea-B2hcap39.cjs.map
+//# sourceMappingURL=NcTextArea-DkVtHTpD.cjs.map

package/dist/chunks/NcTextArea-DkVtHTpD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-DkVtHTpD.cjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 label=\"Text area\"\n\t\t\tv-model=\"text1\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\tv-model=\"text2\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tv-model=\"text3\"\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>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\tv-model=\"text4\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\tv-model=\"text5\"\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\tv-model=\"text6\"\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\tv-model=\"text7\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttext1: '',\n\t\t\t\ttext2: '',\n\t\t\t\ttext3: '',\n\t\t\t\ttext4: '',\n\t\t\t\ttext5: '',\n\t\t\t\ttext6: '',\n\t\t\t\ttext7: '',\n\t\t\t}\n\t\t},\n\t}\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\n\t\tclass=\"textarea\"\n\t\t:class=\"{\n\t\t\t'textarea--disabled': disabled,\n\t\t\t'textarea--legacy': isLegacy32,\n\t\t}\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea\n\t\t\t\tv-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: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--legacy': isLegacy,\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=\"model\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-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\n\t\t\tv-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 AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\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\tdefault: undefined,\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/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tisLegacy32,\n\t\t\tmodel,\n\t\t}\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\tif (this.hasPlaceholder) {\n\t\t\t\treturn this.placeholder\n\t\t\t}\n\t\t\tif (isLegacy32) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\treturn undefined\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\tlogger.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.model = event.target.value\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.textarea {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\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&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__main-wrapper {\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tpadding: var(--border-width-input, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(textarea:focus),\n\t\t&:not(:has([disabled])):has(textarea:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: calc(10px + var(--input-border-width-offset));\n\t\tpadding-inline: calc(12px - var(--border-width-input, 2px) + var(--input-border-width-offset)); // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\t// we use box shadow to create a border as this allows use to have a nice gradient\n\t\tborder: none;\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-large));\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\t&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);\n\t\t}\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-width-offset: 0px;\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\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\t--input-border-color: var(--color-border-success, 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\t--input-border-color: var(--color-border-error, 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\t// for Nextcloud 31 and older we need the old design with only one color\n\t&--legacy {\n\t\t.textarea__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);\n\t\t}\n\n\t\t.textarea__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.textarea__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["AlertCircle","Check","useModelMigration","isLegacy32","GenRandomId","logger"],"mappings":"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"}

package/dist/chunks/{NcTextField-Dyuxj4yu.cjs → NcTextField-Cp3tulze.cjs}

@@ -1,11 +1,11 @@
 "use strict";
-const mdi = require("./mdi-B_QN3oas.cjs");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-CrnN5Sq5.cjs");
-const NcInputField = require("./NcInputField-cT3u4gMS.cjs");
-const _l10n = require("./_l10n-RKohWu5d.cjs");
+const mdi = require("./mdi-BBwE-MZC.cjs");
+const NcInputField = require("./NcInputField-Dry3uU_8.cjs");
 const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
+const _l10n = require("./_l10n-DM-VRK9x.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t16, _l10n.t49);
+_l10n.register(_l10n.t17, _l10n.t50);
 const NcInputFieldProps = new Set(Object.keys(NcInputField.NcInputField.props));
 const _sfc_main = {
   name: "NcTextField",
@@ -31,6 +31,7 @@ const _sfc_main = {
     /**
      * The `aria-label` to set on the trailing button
      * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
+     *
      * @default 'Clear text'|'Save changes'|'Undo changes'
      */
     trailingButtonLabel: {
@@ -61,6 +62,7 @@ const _sfc_main = {
   emits: [
     /**
      * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     "update:value",
@@ -96,9 +98,7 @@ const _sfc_main = {
         // Proxy all the HTML attributes
         ...this.$attrs,
         // Proxy original NcInputField's props
-        ...Object.fromEntries(
-          Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))
-        ),
+        ...Object.fromEntries(Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))),
         // Adjust aria-label for predefined trailing buttons
         trailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon]
       };
@@ -144,4 +144,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcTextField = __component__.exports;
 exports.NcTextField = NcTextField;
-//# sourceMappingURL=NcTextField-Dyuxj4yu.cjs.map
+//# sourceMappingURL=NcTextField-Cp3tulze.cjs.map

package/dist/chunks/NcTextField-Cp3tulze.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-Cp3tulze.cjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Lock :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"With helper text\"\n\t\t\thelper-text=\"This is an optional message to show e.g. validation errors.\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:value=\"text1\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:value=\"text2\"\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<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\tv-on=\"$listeners\">\n\t\t<template v-if=\"!!$scopedSlots.icon || !!$slots.default || !!$scopedSlots.default\" #icon>\n\t\t\t<!-- @slot Leading icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t<slot />\n\t\t\t</slot>\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper v-if=\"isArrow\" directional :path=\"mdiArrowRight\" />\n\t\t\t<NcIconSvgWrapper v-else :path=\"trailingButtonIcon === 'undo' ? mdiUndo : mdiClose\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\nimport { mdiArrowRight, mdiClose, mdiUndo } from '@mdi/js'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t\tNcInputField,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t *\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t *\n\t\t * The `'arrowRight'` value is deprecated and will be removed in the next major version.\n\t\t * Use `'arrowEnd'` instead.\n\t\t *\n\t\t * @type {'close'|'arrowEnd'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowEnd',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\n\t\t\tmdiArrowRight,\n\t\t\tmdiClose,\n\t\t\tmdiUndo,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the trailing button icon directional.\n\t\t * Meaning the icon needs to be flipped on RTL text flow.\n\t\t */\n\t\tisArrow() {\n\t\t\treturn this.trailingButtonIcon === 'arrowEnd' || this.trailingButtonIcon === 'arrowRight'\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tarrowEnd: t('Save changes'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))),\n\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\t},\n}\n</script>\n"],"names":["NcInputField","NcIconSvgWrapper","useModelMigration","mdiArrowRight","mdiClose","mdiUndo","t"],"mappings":";;;;;;;;AA0JA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAAA,aAAAA,aAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC,iBAAAA;AAAAA,IACA,cAAAD,aAAAA;AAAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAA,aAAAA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAAE,oCAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,MAEA,eAAAC,IAAAA;AAAAA,MACA,UAAAC,IAAAA;AAAAA,MACA,SAAAC,IAAAA;AAAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AACA,aAAA,KAAA,uBAAA,cAAA,KAAA,uBAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,YAAA,mBAAA;AAAA,QACA,UAAAC,MAAAA,EAAA,cAAA;AAAA,QACA,YAAAA,MAAAA,EAAA,cAAA;AAAA,QACA,OAAAA,MAAAA,EAAA,YAAA;AAAA,QACA,MAAAA,MAAAA,EAAA,cAAA;AAAA,MACA;AAEA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA,YAAA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAA,GAAA,MAAA,kBAAA,IAAA,GAAA,CAAA,CAAA;AAAA;AAAA,QAGA,qBAAA,KAAA,uBAAA,iBAAA,KAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcTextField-Do6wBDGH.mjs → NcTextField-D_IMz2MR.mjs}

@@ -1,10 +1,10 @@
-import { b as mdiUndo, c as mdiClose, d as mdiArrowRight } from "./mdi-DoaiuWye.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Cb-cPj1R.mjs";
-import { N as NcInputField } from "./NcInputField-BNSfmQqu.mjs";
-import { r as register, b as t49, c as t16, a as t } from "./_l10n-CW0YfIWk.mjs";
+import { b as mdiUndo, c as mdiClose, d as mdiArrowRight } from "./mdi-DXu6GWVJ.mjs";
+import { N as NcInputField } from "./NcInputField-kKgY_2GV.mjs";
 import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
+import { r as register, b as t50, c as t17, a as t } from "./_l10n-BEfeU7gr.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t16, t49);
+register(t17, t50);
 const NcInputFieldProps = new Set(Object.keys(NcInputField.props));
 const _sfc_main = {
   name: "NcTextField",
@@ -30,6 +30,7 @@ const _sfc_main = {
     /**
      * The `aria-label` to set on the trailing button
      * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
+     *
      * @default 'Clear text'|'Save changes'|'Undo changes'
      */
     trailingButtonLabel: {
@@ -60,6 +61,7 @@ const _sfc_main = {
   emits: [
     /**
      * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     *
      * @deprecated
      */
     "update:value",
@@ -95,9 +97,7 @@ const _sfc_main = {
         // Proxy all the HTML attributes
         ...this.$attrs,
         // Proxy original NcInputField's props
-        ...Object.fromEntries(
-          Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))
-        ),
+        ...Object.fromEntries(Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))),
         // Adjust aria-label for predefined trailing buttons
         trailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon]
       };
@@ -145,4 +145,4 @@ const NcTextField = __component__.exports;
 export {
   NcTextField as N
 };
-//# sourceMappingURL=NcTextField-Do6wBDGH.mjs.map
+//# sourceMappingURL=NcTextField-D_IMz2MR.mjs.map

package/dist/chunks/NcTextField-D_IMz2MR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-D_IMz2MR.mjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Lock :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"With helper text\"\n\t\t\thelper-text=\"This is an optional message to show e.g. validation errors.\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:value=\"text1\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:value=\"text2\"\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<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\tv-on=\"$listeners\">\n\t\t<template v-if=\"!!$scopedSlots.icon || !!$slots.default || !!$scopedSlots.default\" #icon>\n\t\t\t<!-- @slot Leading icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t<slot />\n\t\t\t</slot>\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper v-if=\"isArrow\" directional :path=\"mdiArrowRight\" />\n\t\t\t<NcIconSvgWrapper v-else :path=\"trailingButtonIcon === 'undo' ? mdiUndo : mdiClose\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\nimport { mdiArrowRight, mdiClose, mdiUndo } from '@mdi/js'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t\tNcInputField,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t *\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t *\n\t\t * The `'arrowRight'` value is deprecated and will be removed in the next major version.\n\t\t * Use `'arrowEnd'` instead.\n\t\t *\n\t\t * @type {'close'|'arrowEnd'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowEnd',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\n\t\t\tmdiArrowRight,\n\t\t\tmdiClose,\n\t\t\tmdiUndo,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the trailing button icon directional.\n\t\t * Meaning the icon needs to be flipped on RTL text flow.\n\t\t */\n\t\tisArrow() {\n\t\t\treturn this.trailingButtonIcon === 'arrowEnd' || this.trailingButtonIcon === 'arrowRight'\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tarrowEnd: t('Save changes'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))),\n\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\t},\n}\n</script>\n"],"names":[],"mappings":";;;;;;;AA0JA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAA,aAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAA,kBAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AACA,aAAA,KAAA,uBAAA,cAAA,KAAA,uBAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,YAAA,mBAAA;AAAA,QACA,UAAA,EAAA,cAAA;AAAA,QACA,YAAA,EAAA,cAAA;AAAA,QACA,OAAA,EAAA,YAAA;AAAA,QACA,MAAA,EAAA,cAAA;AAAA,MACA;AAEA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA,YAAA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAA,GAAA,MAAA,kBAAA,IAAA,GAAA,CAAA,CAAA;AAAA;AAAA,QAGA,qBAAA,KAAA,uBAAA,iBAAA,KAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcThemeProvider-25ResoIv.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcThemeProvider-25ResoIv.mjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup>\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps({\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2IA,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACT,WAAY,MAAM,OAAO;AACvB,eAAO;AAAA,MACT;AACC,aAAO;AAAA,IACR,CAAC;AACD,YAAQ,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcThemeProvider-25ResoIv.mjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup>\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps({\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2IA,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACR,WAAW,MAAM,OAAO;AACvB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAC;AACD,YAAQ,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcThemeProvider-BqGPTeWg.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcThemeProvider-BqGPTeWg.cjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup>\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps({\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":["computed","provide","INJECTION_KEY_THEME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2IA,UAAM,QAAQA,IAAQ,SAAC,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACT,WAAY,MAAM,OAAO;AACvB,eAAO;AAAA,MACT;AACC,aAAO;AAAA,IACR,CAAC;AACDC,QAAO,QAACC,UAAmB,qBAAE,KAAK;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcThemeProvider-BqGPTeWg.cjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup>\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps({\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":["computed","provide","INJECTION_KEY_THEME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2IA,UAAM,QAAQA,IAAAA,SAAS,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACR,WAAW,MAAM,OAAO;AACvB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAC;AACDC,QAAAA,QAAQC,UAAAA,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;;"}