@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcTextArea-BFLuhsEv.mjs

@@ -1,220 +0,0 @@
-import '../assets/NcTextArea-vxeIyeSg.css';
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-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 { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-const _sfc_main = {
-  name: "NcTextArea",
-  components: {
-    AlertCircle,
-    Check
-  },
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Removed in v9 - use `modelValue` (`v-model`) instead
-     * @deprecated
-     */
-    value: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The value of the input field
-     */
-    modelValue: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The input label, always provide one for accessibility purposes.
-     * This will also be used as a placeholder unless the placeholder
-     * prop is populated with a different string.
-     */
-    label: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Pass in true if you want to use an external label. This is useful
-     * if you need a label that looks different from the one provided by
-     * this component
-     */
-    labelOutside: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * The placeholder of the input. This defaults as the string that's
-     * passed into the label prop. In order to remove the placeholder,
-     * pass in an empty string.
-     */
-    placeholder: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Toggles the success state of the component. Adds a checkmark icon.
-     * this cannot be used together with canClear.
-     */
-    success: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Toggles the error state of the component. Adds an error icon.
-     * this cannot be used together with canClear.
-     */
-    error: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Additional helper text message
-     *
-     * This will be displayed beneath the input field. In case the field is
-     * also marked as having an error, the text will be displayed in red.
-     */
-    helperText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Disable the input field
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Class to add to the input field.
-     * Necessary to use NcInputField in the NcActionInput component.
-     */
-    inputClass: {
-      type: [Object, String],
-      default: ""
-    },
-    /**
-     * The resize CSS property sets whether an element is resizable, and if
-     * so, in which directions.
-     */
-    resize: {
-      type: String,
-      default: "both",
-      validator: (value) => ["both", "vertical", "horizontal", "none"].includes(value)
-    }
-  },
-  emits: [
-    /**
-     * Removed in v9 - use `update:modelValue` (`v-model`) instead
-     * @deprecated
-     */
-    "update:value",
-    "update:modelValue",
-    /** Same as update:modelValue for Vue 2 compatibility */
-    "update:model-value"
-  ],
-  setup() {
-    const model = useModelMigration("value", "update:value", true);
-    return {
-      isLegacy32,
-      model
-    };
-  },
-  computed: {
-    computedId() {
-      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
-    },
-    inputName() {
-      return "input" + GenRandomId();
-    },
-    hasPlaceholder() {
-      return this.placeholder !== "" && this.placeholder !== void 0;
-    },
-    computedPlaceholder() {
-      if (this.hasPlaceholder) {
-        return this.placeholder;
-      }
-      if (isLegacy32) {
-        return this.label;
-      }
-      return void 0;
-    },
-    isValidLabel() {
-      const isValidLabel = this.label || this.labelOutside;
-      if (!isValidLabel) {
-        console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
-      }
-      return isValidLabel;
-    },
-    ariaDescribedby() {
-      const ariaDescribedby = [];
-      if (this.helperText.length > 0) {
-        ariaDescribedby.push(`${this.inputName}-helper-text`);
-      }
-      if (this.$attrs["aria-describedby"]) {
-        ariaDescribedby.push(this.$attrs["aria-describedby"]);
-      }
-      return ariaDescribedby.join(" ") || null;
-    }
-  },
-  methods: {
-    /**
-     * Focus the input element
-     *
-     * @public
-     */
-    focus() {
-      this.$refs.input.focus();
-    },
-    /**
-     * Select all the text in the input
-     *
-     * @public
-     */
-    select() {
-      this.$refs.input.select();
-    },
-    handleInput(event) {
-      this.model = event.target.value;
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "textarea", class: {
-    "textarea--disabled": _vm.disabled,
-    "textarea--legacy": _vm.isLegacy32
-  } }, [_c("div", { staticClass: "textarea__main-wrapper" }, [_c("textarea", _vm._g(_vm._b({ ref: "input", staticClass: "textarea__input", class: [
-    _vm.inputClass,
-    {
-      "textarea__input--label-outside": _vm.labelOutside,
-      "textarea__input--legacy": _vm.isLegacy,
-      "textarea__input--success": _vm.success,
-      "textarea__input--error": _vm.error
-    }
-  ], style: { resize: _vm.resize }, attrs: { "id": _vm.computedId, "disabled": _vm.disabled, "placeholder": _vm.computedPlaceholder, "aria-describedby": _vm.ariaDescribedby, "aria-live": "polite" }, domProps: { "value": _vm.model }, on: { "input": _vm.handleInput } }, "textarea", _vm.$attrs, false), _vm.$listeners)), _vm._v(" "), !_vm.labelOutside && _vm.isValidLabel ? _c("label", { staticClass: "textarea__label", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e()]), _vm.helperText.length > 0 ? _c("p", { staticClass: "textarea__helper-text-message", class: {
-    "textarea__helper-text-message--error": _vm.error,
-    "textarea__helper-text-message--success": _vm.success
-  }, attrs: { "id": `${_vm.inputName}-helper-text` } }, [_vm.success ? _c("Check", { staticClass: "textarea__helper-text-message__icon", attrs: { "size": 18 } }) : _vm.error ? _c("AlertCircle", { staticClass: "textarea__helper-text-message__icon", attrs: { "size": 18 } }) : _vm._e(), _vm._v(" " + _vm._s(_vm.helperText) + " ")], 1) : _vm._e()]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "673d1bdd"
-);
-const NcTextArea = __component__.exports;
-export {
-  NcTextArea as N
-};
-//# sourceMappingURL=NcTextArea-BFLuhsEv.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcTextArea-BFLuhsEv.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 class=\"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 v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t: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 v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { isLegacy32 } from '../../utils/legacy.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 * @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 * @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\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.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":";;;;;;AAgJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAA,kBAAA,SAAA,gBAAA,IAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,UAAA,KAAA,gBAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,UAAA,YAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAA,eAAA,KAAA,SAAA,KAAA;AACA,UAAA,CAAA,cAAA;AACA,gBAAA,KAAA,mJAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,kBAAA,CAAA;AACA,UAAA,KAAA,WAAA,SAAA,GAAA;AACA,wBAAA,KAAA,GAAA,KAAA,SAAA,cAAA;AAAA,MACA;AACA,UAAA,KAAA,OAAA,kBAAA,GAAA;AACA,wBAAA,KAAA,KAAA,OAAA,kBAAA,CAAA;AAAA,MACA;AACA,aAAA,gBAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAA,OAAA;AACA,WAAA,QAAA,MAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcTextField-DDJqk3SI.cjs

@@ -1,147 +0,0 @@
-"use strict";
-const mdi = require("./mdi-BBwE-MZC.cjs");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-CrnN5Sq5.cjs");
-const NcInputField = require("./NcInputField-cT3u4gMS.cjs");
-const _l10n = require("./_l10n-RKohWu5d.cjs");
-const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t16, _l10n.t49);
-const NcInputFieldProps = new Set(Object.keys(NcInputField.NcInputField.props));
-const _sfc_main = {
-  name: "NcTextField",
-  components: {
-    NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper,
-    NcInputField: NcInputField.NcInputField
-  },
-  // Allow forwarding all attributes
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
-     */
-    // Not an actual prop but needed to show in vue-styleguidist docs
-    // eslint-disable-next-line
-    " ": {},
-    // Reuse all the props from NcInputField for better typing and documentation
-    ...NcInputField.NcInputField.props,
-    /**
-     * 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: {
-      type: String,
-      default: ""
-    },
-    // Custom props
-    /**
-     * Specifies which material design icon should be used for the trailing
-     * button.
-     *
-     * The `'arrowRight'` value is deprecated and will be removed in the next major version.
-     * Use `'arrowEnd'` instead.
-     *
-     * @type {'close'|'arrowEnd'|'arrowRight'|'undo'}
-     */
-    trailingButtonIcon: {
-      type: String,
-      default: "close",
-      validator: (value) => [
-        "close",
-        "arrowEnd",
-        "arrowRight",
-        "undo"
-      ].includes(value)
-    }
-  },
-  emits: [
-    /**
-     * Removed in v9 - use `update:modelValue` (`v-model`) instead
-     * @deprecated
-     */
-    "update:value",
-    "update:modelValue",
-    /** Same as update:modelValue for Vue 2 compatibility */
-    "update:model-value"
-  ],
-  setup() {
-    const model = useModelMigration.useModelMigration("value", "update:value");
-    return {
-      model,
-      mdiArrowRight: mdi.mdiArrowRight,
-      mdiClose: mdi.mdiClose,
-      mdiUndo: mdi.mdiUndo
-    };
-  },
-  computed: {
-    /**
-     * Is the trailing button icon directional.
-     * Meaning the icon needs to be flipped on RTL text flow.
-     */
-    isArrow() {
-      return this.trailingButtonIcon === "arrowEnd" || this.trailingButtonIcon === "arrowRight";
-    },
-    propsAndAttrsToForward() {
-      const predefinedLabels = {
-        arrowEnd: _l10n.t("Save changes"),
-        arrowRight: _l10n.t("Save changes"),
-        close: _l10n.t("Clear text"),
-        undo: _l10n.t("Undo changes")
-      };
-      return {
-        // Proxy all the HTML attributes
-        ...this.$attrs,
-        // Proxy original NcInputField's props
-        ...Object.fromEntries(
-          Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))
-        ),
-        // Adjust aria-label for predefined trailing buttons
-        trailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon]
-      };
-    }
-  },
-  methods: {
-    /**
-     * Focus the input element
-     *
-     * @public
-     */
-    focus() {
-      this.$refs.inputField.focus();
-    },
-    /**
-     * Select all the text in the input
-     *
-     * @public
-     */
-    select() {
-      this.$refs.inputField.select();
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", scopedSlots: _vm._u([!!_vm.$scopedSlots.icon || !!_vm.$slots.default || !!_vm.$scopedSlots.default ? { key: "icon", fn: function() {
-    return [_vm._t("icon", function() {
-      return [_vm._t("default")];
-    })];
-  }, proxy: true } : null, _vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
-    return [_vm.isArrow ? _c("NcIconSvgWrapper", { attrs: { "directional": "", "path": _vm.mdiArrowRight } }) : _c("NcIconSvgWrapper", { attrs: { "path": _vm.trailingButtonIcon === "undo" ? _vm.mdiUndo : _vm.mdiClose } })];
-  }, proxy: true } : null], null, true) }, "NcInputField", _vm.propsAndAttrsToForward, false), _vm.$listeners));
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const NcTextField = __component__.exports;
-exports.NcTextField = NcTextField;
-//# sourceMappingURL=NcTextField-DDJqk3SI.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcTextField-DDJqk3SI.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 v-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 NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\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 * @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 * @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(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\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":";;;;;;;;AAyJA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAAA,aAAAA,aAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC,iBAAA;AAAA,IACA,cAAAD,aAAA;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,GAAAA,aAAA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,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,IAKA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAAE,oCAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,MAEA,eAAAC,IAAA;AAAA,MACA,UAAAC,IAAA;AAAA,MACA,SAAAC,IAAA;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,UAAAC,MAAA,EAAA,cAAA;AAAA,QACA,YAAAA,MAAA,EAAA,cAAA;AAAA,QACA,OAAAA,MAAA,EAAA,YAAA;AAAA,QACA,MAAAA,MAAA,EAAA,cAAA;AAAA,MACA;AAEA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAA,GAAA,MAAA,kBAAA,IAAA,GAAA,CAAA;AAAA,QACA;AAAA;AAAA,QAEA,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-eKuP0G6I.mjs

@@ -1,148 +0,0 @@
-import { b as mdiUndo, c as mdiClose, d as mdiArrowRight } from "./mdi-DXu6GWVJ.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 { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t16, t49);
-const NcInputFieldProps = new Set(Object.keys(NcInputField.props));
-const _sfc_main = {
-  name: "NcTextField",
-  components: {
-    NcIconSvgWrapper,
-    NcInputField
-  },
-  // Allow forwarding all attributes
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
-     */
-    // Not an actual prop but needed to show in vue-styleguidist docs
-    // eslint-disable-next-line
-    " ": {},
-    // Reuse all the props from NcInputField for better typing and documentation
-    ...NcInputField.props,
-    /**
-     * 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: {
-      type: String,
-      default: ""
-    },
-    // Custom props
-    /**
-     * Specifies which material design icon should be used for the trailing
-     * button.
-     *
-     * The `'arrowRight'` value is deprecated and will be removed in the next major version.
-     * Use `'arrowEnd'` instead.
-     *
-     * @type {'close'|'arrowEnd'|'arrowRight'|'undo'}
-     */
-    trailingButtonIcon: {
-      type: String,
-      default: "close",
-      validator: (value) => [
-        "close",
-        "arrowEnd",
-        "arrowRight",
-        "undo"
-      ].includes(value)
-    }
-  },
-  emits: [
-    /**
-     * Removed in v9 - use `update:modelValue` (`v-model`) instead
-     * @deprecated
-     */
-    "update:value",
-    "update:modelValue",
-    /** Same as update:modelValue for Vue 2 compatibility */
-    "update:model-value"
-  ],
-  setup() {
-    const model = useModelMigration("value", "update:value");
-    return {
-      model,
-      mdiArrowRight,
-      mdiClose,
-      mdiUndo
-    };
-  },
-  computed: {
-    /**
-     * Is the trailing button icon directional.
-     * Meaning the icon needs to be flipped on RTL text flow.
-     */
-    isArrow() {
-      return this.trailingButtonIcon === "arrowEnd" || this.trailingButtonIcon === "arrowRight";
-    },
-    propsAndAttrsToForward() {
-      const predefinedLabels = {
-        arrowEnd: t("Save changes"),
-        arrowRight: t("Save changes"),
-        close: t("Clear text"),
-        undo: t("Undo changes")
-      };
-      return {
-        // Proxy all the HTML attributes
-        ...this.$attrs,
-        // Proxy original NcInputField's props
-        ...Object.fromEntries(
-          Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))
-        ),
-        // Adjust aria-label for predefined trailing buttons
-        trailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon]
-      };
-    }
-  },
-  methods: {
-    /**
-     * Focus the input element
-     *
-     * @public
-     */
-    focus() {
-      this.$refs.inputField.focus();
-    },
-    /**
-     * Select all the text in the input
-     *
-     * @public
-     */
-    select() {
-      this.$refs.inputField.select();
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", scopedSlots: _vm._u([!!_vm.$scopedSlots.icon || !!_vm.$slots.default || !!_vm.$scopedSlots.default ? { key: "icon", fn: function() {
-    return [_vm._t("icon", function() {
-      return [_vm._t("default")];
-    })];
-  }, proxy: true } : null, _vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
-    return [_vm.isArrow ? _c("NcIconSvgWrapper", { attrs: { "directional": "", "path": _vm.mdiArrowRight } }) : _c("NcIconSvgWrapper", { attrs: { "path": _vm.trailingButtonIcon === "undo" ? _vm.mdiUndo : _vm.mdiClose } })];
-  }, proxy: true } : null], null, true) }, "NcInputField", _vm.propsAndAttrsToForward, false), _vm.$listeners));
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const NcTextField = __component__.exports;
-export {
-  NcTextField as N
-};
-//# sourceMappingURL=NcTextField-eKuP0G6I.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcTextField-eKuP0G6I.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 v-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 NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\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 * @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 * @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(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\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":";;;;;;;AAyJA,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,IAOA,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,IAKA;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;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAA,GAAA,MAAA,kBAAA,IAAA,GAAA,CAAA;AAAA,QACA;AAAA;AAAA,QAEA,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

@@ -1,53 +0,0 @@
-import { computed, provide } from "vue";
-import { I as INJECTION_KEY_THEME } from "./constants-Bls5liKo.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-const _sfc_main = {
-  __name: "NcThemeProvider",
-  props: {
-    /**
-     * Enforce the dark theme for the content.
-     */
-    dark: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Enforce the light theme for the content
-     */
-    light: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const theme = computed(() => {
-      if (props.dark) {
-        return "dark";
-      } else if (props.light) {
-        return "light";
-      }
-      return "";
-    });
-    provide(INJECTION_KEY_THEME, theme);
-    return { __sfc: true, props, theme };
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("div", _vm._b({}, "div", _vm._d({}, [`data-theme-${_setup.theme}`, _setup.theme])), [_vm._t("default")], 2);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const NcThemeProvider = __component__.exports;
-export {
-  NcThemeProvider as N
-};
-//# sourceMappingURL=NcThemeProvider-25ResoIv.mjs.map

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;"}