@nextcloud/vue 8.19.0 → 8.21.0

package/dist/chunks/NcTextArea-CYLGAGcO.cjs

@@ -0,0 +1,206 @@
+require('../assets/NcTextArea-fzbciv3V.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 _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = {
+  name: "NcTextArea",
+  components: {
+    AlertCircle: AlertCircleOutline.AlertCircle,
+    Check: Check.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.useModelMigration("value", "update:value", true);
+    return {
+      model
+    };
+  },
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + GenRandomId.GenRandomId();
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const isValidLabel = this.label || this.labelOutside;
+      if (!isValidLabel) {
+        console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
+      }
+      return isValidLabel;
+    },
+    ariaDescribedby() {
+      const ariaDescribedby = [];
+      if (this.helperText.length > 0) {
+        ariaDescribedby.push(`${this.inputName}-helper-text`);
+      }
+      if (this.$attrs["aria-describedby"]) {
+        ariaDescribedby.push(this.$attrs["aria-describedby"]);
+      }
+      return ariaDescribedby.join(" ") || null;
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.input.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.input.select();
+    },
+    handleInput(event) {
+      this.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 } }, [_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--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__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "c89174d0"
+);
+const NcTextArea = __component__.exports;
+exports.NcTextArea = NcTextArea;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-CYLGAGcO.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 class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"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'\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\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\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.model = event.target.value\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["AlertCircle","Check","useModelMigration","GenRandomId"],"mappings":"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"}

package/dist/chunks/{NcTextField-CmXmPZ4h.mjs → NcTextField-8RXOuqAy.mjs}

@@ -1,8 +1,9 @@
-import NcInputField from "../Components/NcInputField.mjs";
-import { C as Close } from "./Close-B6ccm1RP.mjs";
-import { A as ArrowRight } from "./ArrowRight-KsL2PC-o.mjs";
+import { N as NcInputField } from "./NcInputField-ixTTHy3h.mjs";
+import { C as Close } from "./Close-BtLPUSdO.mjs";
+import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-import { r as register, d as t48, e as t17, a as t } from "./_l10n-JYjUKekn.mjs";
+import { r as register, d as t48, e as t17, a as t } from "./_l10n-B-QPoWAJ.mjs";
+import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
 const _sfc_main$1 = {
   name: "UndoVariantIcon",
   emits: ["click"],
@@ -22,7 +23,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon undo-variant-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon undo-variant-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -48,6 +49,10 @@ const _sfc_main = {
   },
   // Allow forwarding all attributes
   inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
   props: {
     /**
      * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
@@ -83,8 +88,21 @@ const _sfc_main = {
     }
   },
   emits: [
-    "update:value"
+    /**
+     * 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
+    };
+  },
   computed: {
     propsAndAttrsToForward() {
       const predefinedLabels = {
@@ -120,15 +138,12 @@ const _sfc_main = {
      */
     select() {
       this.$refs.inputField.select();
-    },
-    handleInput(event) {
-      this.$emit("update:value", event.target.value);
     }
   }
 };
 var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", on: { "input": _vm.handleInput }, scopedSlots: _vm._u([_vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
+  return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", scopedSlots: _vm._u([_vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
     return [_vm.trailingButtonIcon === "close" ? _c("Close", { attrs: { "size": 20 } }) : _vm.trailingButtonIcon === "arrowRight" ? _c("ArrowRight", { attrs: { "size": 20 } }) : _vm.trailingButtonIcon === "undo" ? _c("Undo", { attrs: { "size": 20 } }) : _vm._e()];
   }, proxy: true } : null], null, true) }, "NcInputField", _vm.propsAndAttrsToForward, false), _vm.$listeners), [_vm._t("default")], 2);
 };

package/dist/chunks/NcTextField-8RXOuqAy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-8RXOuqAy.mjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-variant-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoVariantIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - 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<Magnify :size=\"20\" />\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<Lock :size=\"20\" />\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\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\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<!-- Default slot for the leading icon -->\n\t\t<slot />\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<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\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\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\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 * @type {'close'|'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'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\t\t}\n\t},\n\n\tcomputed: {\n\t\tpropsAndAttrsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save 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":["_sfc_main"],"mappings":";;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACiHA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAA,aAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;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,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;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,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,YAAA,mBAAA;AAAA,QACA,MAAA,EAAA,cAAA;AAAA,QACA,OAAA,EAAA,YAAA;AAAA,QACA,YAAA,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;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcTextField-BnZnDMjV.cjs → NcTextField-rCaBV_TN.cjs}

@@ -1,9 +1,10 @@
 "use strict";
-const Components_NcInputField = require("../Components/NcInputField.cjs");
-const Close = require("./Close-B7lGu0cG.cjs");
-const ArrowRight = require("./ArrowRight-Bj5G_mG0.cjs");
+const NcInputField = require("./NcInputField-CbBdbdE8.cjs");
+const Close = require("./Close-CqmXxEKi.cjs");
+const ArrowRight = require("./ArrowRight-DPARnmu3.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
+const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
 const _sfc_main$1 = {
   name: "UndoVariantIcon",
   emits: ["click"],
@@ -23,7 +24,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon undo-variant-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon undo-variant-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -38,17 +39,21 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const Undo = __component__$1.exports;
 _l10n.register(_l10n.t17, _l10n.t48);
-const NcInputFieldProps = new Set(Object.keys(Components_NcInputField.props));
+const NcInputFieldProps = new Set(Object.keys(NcInputField.NcInputField.props));
 const _sfc_main = {
   name: "NcTextField",
   components: {
-    NcInputField: Components_NcInputField,
+    NcInputField: NcInputField.NcInputField,
     Close: Close.Close,
     ArrowRight: ArrowRight.ArrowRight,
     Undo
   },
   // Allow forwarding all attributes
   inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
   props: {
     /**
      * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
@@ -57,7 +62,7 @@ const _sfc_main = {
     // eslint-disable-next-line
     " ": {},
     // Reuse all the props from NcInputField for better typing and documentation
-    ...Components_NcInputField.props,
+    ...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`:
@@ -84,8 +89,21 @@ const _sfc_main = {
     }
   },
   emits: [
-    "update:value"
+    /**
+     * 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
+    };
+  },
   computed: {
     propsAndAttrsToForward() {
       const predefinedLabels = {
@@ -121,15 +139,12 @@ const _sfc_main = {
      */
     select() {
       this.$refs.inputField.select();
-    },
-    handleInput(event) {
-      this.$emit("update:value", event.target.value);
     }
   }
 };
 var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", on: { "input": _vm.handleInput }, scopedSlots: _vm._u([_vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
+  return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", scopedSlots: _vm._u([_vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
     return [_vm.trailingButtonIcon === "close" ? _c("Close", { attrs: { "size": 20 } }) : _vm.trailingButtonIcon === "arrowRight" ? _c("ArrowRight", { attrs: { "size": 20 } }) : _vm.trailingButtonIcon === "undo" ? _c("Undo", { attrs: { "size": 20 } }) : _vm._e()];
   }, proxy: true } : null], null, true) }, "NcInputField", _vm.propsAndAttrsToForward, false), _vm.$listeners), [_vm._t("default")], 2);
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-rCaBV_TN.cjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-variant-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoVariantIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - 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<Magnify :size=\"20\" />\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<Lock :size=\"20\" />\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\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\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<!-- Default slot for the leading icon -->\n\t\t<slot />\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<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\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\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\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 * @type {'close'|'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'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\t\t}\n\t},\n\n\tcomputed: {\n\t\tpropsAndAttrsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save 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":["_sfc_main","NcInputField","Close","ArrowRight","useModelMigration","t"],"mappings":";;;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACiHA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAAC,aAAAA,aAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA,aAAA;AAAA,IACA,OAAAC,MAAA;AAAA,IACA,YAAAC,WAAA;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,GAAAF,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,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;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,QAAAG,kBAAAA,kBAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,YAAA,mBAAA;AAAA,QACA,MAAAC,MAAA,EAAA,cAAA;AAAA,QACA,OAAAA,MAAA,EAAA,YAAA;AAAA,QACA,YAAAA,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;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcTimezonePicker-CPfvqXuN.cjs → NcTimezonePicker-B5ps-VnZ.cjs}

@@ -1,8 +1,9 @@
 "use strict";
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const timezones = require("@nextcloud/timezones");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
-const NcSelect = require("./NcSelect-CKgkjF4m.cjs");
+const NcSelect = require("./NcSelect-Cp83bFsi.cjs");
+const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t25);
 function getSortedTimezoneList(timezoneList = [], additionalTimezones = []) {
@@ -75,6 +76,10 @@ const _sfc_main = {
   components: {
     NcSelect: NcSelect.NcSelect
   },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
   props: {
     /**
      * An array of additional timezones to include with the standard database. Useful if there is a custom timezone, e.g. read from user data
@@ -84,9 +89,17 @@ const _sfc_main = {
       default: () => []
     },
     /**
-     * The selected timezone. Use v-model for two-way binding. The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.
+     * Removed in v9 - use `modelValue` (`v-model`) instead
+     * @deprecated
      */
     value: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The selected timezone. Use v-model for two-way binding. The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.
+     */
+    modelValue: {
       type: String,
       default: "floating"
     },
@@ -95,23 +108,41 @@ const _sfc_main = {
      */
     uid: {
       type: [String, Number],
-      default: () => "tz-".concat(GenRandomId.GenRandomId(5))
+      default: () => `tz-${GenRandomId.GenRandomId(5)}`
     }
   },
-  emits: ["input"],
+  emits: [
+    /**
+     * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     * @deprecated
+     */
+    "input",
+    /**
+     * Two-way binding of the value prop. Use v-model="selectedTimezone" for two-way binding
+     */
+    "update:modelValue",
+    /** Same as update:modelValue for Vue 2 compatibility */
+    "update:model-value"
+  ],
+  setup() {
+    const model = useModelMigration.useModelMigration("value", "input");
+    return {
+      model
+    };
+  },
   computed: {
     placeholder() {
       return _l10n.t("Type to search time zone");
     },
     selectedTimezone() {
       for (const additionalTimezone of this.additionalTimezones) {
-        if (additionalTimezone.timezoneId === this.value) {
+        if (additionalTimezone.timezoneId === this.model) {
           return additionalTimezone;
         }
       }
       return {
-        label: getReadableTimezoneName(this.value),
-        timezoneId: this.value
+        label: getReadableTimezoneName(this.model),
+        timezoneId: this.model
       };
     },
     options() {
@@ -130,7 +161,7 @@ const _sfc_main = {
       if (!newValue) {
         return;
       }
-      this.$emit("input", newValue.timezoneId);
+      this.model = newValue.timezoneId;
     },
     /**
      * Returns whether this is a continent label,

package/dist/chunks/NcTimezonePicker-B5ps-VnZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTimezonePicker-B5ps-VnZ.cjs","sources":["../../src/components/NcTimezonePicker/timezone.js","../../src/components/NcTimezonePicker/timezoneDataProviderService.js","../../src/components/NcTimezonePicker/NcTimezonePicker.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { t } from '../../l10n.js'\n\n/**\n *\n * @param {string[]} timezoneList List of Olsen timezones\n * @param {Array} additionalTimezones List of additional timezones\n * @return {Array}\n */\nexport function getSortedTimezoneList(timezoneList = [], additionalTimezones = []) {\n\tconst sortedByContinent = {}\n\tconst sortedList = []\n\n\tfor (const timezoneId of timezoneList) {\n\t\tconst components = timezoneId.split('/')\n\t\tlet [continent, name] = [components.shift(), components.join('/')]\n\t\tif (!name) {\n\t\t\tname = continent\n\t\t\t// TRANSLATORS This refers to global timezones in the timezone picker\n\t\t\tcontinent = t('Global')\n\t\t}\n\n\t\tsortedByContinent[continent] = sortedByContinent[continent] || {\n\t\t\tcontinent,\n\t\t\tregions: [],\n\t\t}\n\n\t\tsortedByContinent[continent].regions.push({\n\t\t\tlabel: getReadableTimezoneName(name),\n\t\t\tcities: [],\n\t\t\ttimezoneId,\n\t\t})\n\t}\n\n\tfor (const additionalTimezone of additionalTimezones) {\n\t\tconst { continent, label, timezoneId } = additionalTimezone\n\n\t\tsortedByContinent[continent] = sortedByContinent[continent] || {\n\t\t\tcontinent,\n\t\t\tregions: [],\n\t\t}\n\n\t\tsortedByContinent[continent].regions.push({\n\t\t\tlabel,\n\t\t\tcities: [],\n\t\t\ttimezoneId,\n\t\t})\n\t}\n\n\tfor (const continent in sortedByContinent) {\n\t\tif (!Object.prototype.hasOwnProperty.call(sortedByContinent, continent)) {\n\t\t\tcontinue\n\t\t}\n\n\t\tsortedByContinent[continent].regions.sort((a, b) => {\n\t\t\tif (a.label < b.label) {\n\t\t\t\treturn -1\n\t\t\t}\n\n\t\t\treturn 1\n\t\t})\n\t\tsortedList.push(sortedByContinent[continent])\n\t}\n\n\t// Sort continents by name\n\tsortedList.sort((a, b) => {\n\t\tif (a.continent < b.continent) {\n\t\t\treturn -1\n\t\t}\n\n\t\treturn 1\n\t})\n\n\treturn sortedList\n}\n\n/**\n * Get human-readable name for timezoneId\n *\n * @param {string} timezoneId TimezoneId to turn human-readable\n * @return {string}\n */\nexport function getReadableTimezoneName(timezoneId) {\n\treturn timezoneId\n\t\t.split('_')\n\t\t.join(' ')\n\t\t.replace('St ', 'St. ')\n\t\t.split('/')\n\t\t.join(' - ')\n}\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getTimezoneManager } from '@nextcloud/timezones'\n\nconst timezoneManager = getTimezoneManager()\nlet initialized = false\n\n/**\n * Gets the timezone-manager\n * initializes it if necessary\n *\n * @return {object}\n */\nexport default function() {\n\tif (!initialized) {\n\t\ttimezoneManager.registerDefaultTimezones()\n\t\tinitialized = true\n\t}\n\n\treturn timezoneManager\n}\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcTimezonePicker v-model=\"tz\" />\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttz: 'Hawaiian Standard Time',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcSelect :aria-label-combobox=\"t('Search for time zone')\"\n\t\t:clearable=\"false\"\n\t\t:filter-by=\"filterBy\"\n\t\t:multiple=\"false\"\n\t\t:options=\"options\"\n\t\t:placeholder=\"placeholder\"\n\t\t:selectable=\"isSelectable\"\n\t\t:uid=\"uid\"\n\t\t:value=\"selectedTimezone\"\n\t\tlabel=\"label\"\n\t\t@option:selected=\"change\" />\n</template>\n\n<script>\nimport {\n\tgetReadableTimezoneName,\n\tgetSortedTimezoneList,\n} from './timezone.js'\nimport getTimezoneManager from './timezoneDataProviderService.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcSelect from '../NcSelect/index.js'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcTimezonePicker',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\tprops: {\n\t\t/**\n\t\t * An array of additional timezones to include with the standard database. Useful if there is a custom timezone, e.g. read from user data\n\t\t */\n\t\tadditionalTimezones: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\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\t\t/**\n\t\t * The selected timezone. Use v-model for two-way binding. The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: 'floating',\n\t\t},\n\t\t/**\n\t\t * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`\n\t\t */\n\t\tuid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: () => `tz-${GenRandomId(5)}`,\n\t\t},\n\t},\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'input',\n\t\t/**\n\t\t * Two-way binding of the value prop. Use v-model=\"selectedTimezone\" for two-way binding\n\t\t */\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\tsetup() {\n\t\tconst model = useModelMigration('value', 'input')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\tcomputed: {\n\t\tplaceholder() {\n\t\t\treturn t('Type to search time zone')\n\t\t},\n\t\tselectedTimezone() {\n\t\t\tfor (const additionalTimezone of this.additionalTimezones) {\n\t\t\t\tif (additionalTimezone.timezoneId === this.model) {\n\t\t\t\t\treturn additionalTimezone\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tlabel: getReadableTimezoneName(this.model),\n\t\t\t\ttimezoneId: this.model,\n\t\t\t}\n\t\t},\n\t\toptions() {\n\t\t\tconst timezoneManager = getTimezoneManager()\n\t\t\tconst timezoneList = getSortedTimezoneList(timezoneManager.listAllTimezones(), this.additionalTimezones)\n\t\t\t/**\n\t\t\t * Since NcSelect does not support groups,\n\t\t\t * we create an object with the grouped timezones and continent labels.\n\t\t\t *\n\t\t\t * NOTE for now we are removing the grouping from the fields to fix an accessibility issue\n\t\t\t * in the future, other options can be introduced to better display the different areas\n\t\t\t */\n\t\t\tlet timezonesGrouped = []\n\t\t\tObject.values(timezoneList).forEach(group => {\n\t\t\t\t// Add an entry as group label\n\t\t\t\t// timezonesGrouped.push({\n\t\t\t\t// label: group.continent,\n\t\t\t\t// timezoneId: `tz-group__${group.continent}`,\n\t\t\t\t// regions: group.regions,\n\t\t\t\t// })\n\t\t\t\ttimezonesGrouped = timezonesGrouped.concat(group.regions)\n\t\t\t})\n\t\t\treturn timezonesGrouped\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tchange(newValue) {\n\t\t\tif (!newValue) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.model = newValue.timezoneId\n\t\t},\n\n\t\t/**\n\t\t * Returns whether this is a continent label,\n\t\t * or an actual timezone. Continent labels are not selectable.\n\t\t *\n\t\t * @param {string} option The option\n\t\t * @return {boolean}\n\t\t */\n\t\tisSelectable(option) {\n\t\t\treturn !option.timezoneId.startsWith('tz-group__')\n\t\t},\n\n\t\t/**\n\t\t * Function to filter the timezone list.\n\t\t * We search in the timezoneId, so both continent and region names can be matched.\n\t\t *\n\t\t * @param {object} option The timezone option\n\t\t * @param {string} label The label of the timezone\n\t\t * @param {string} search The search string\n\t\t * @return {boolean}\n\t\t */\n\t\tfilterBy(option, label, search) {\n\t\t\t// We split the search term in case one searches \"<continent> <region>\".\n\t\t\tconst terms = search.trim().split(' ')\n\n\t\t\t// For the continent labels, we have to check if one region matches every search term.\n\t\t\tif (option.timezoneId.startsWith('tz-group__')) {\n\t\t\t\treturn option.regions.some(region => {\n\t\t\t\t\treturn this.matchTimezoneId(region.timezoneId, terms)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// For a region, every search term must be found.\n\t\t\treturn this.matchTimezoneId(option.timezoneId, terms)\n\t\t},\n\n\t\tmatchTimezoneId(timezoneId, terms) {\n\t\t\treturn terms.every(term => timezoneId.toLowerCase().includes(term.toLowerCase()))\n\t\t},\n\t},\n}\n</script>\n"],"names":["t","getTimezoneManager","NcSelect","GenRandomId","useModelMigration","timezoneManager"],"mappings":"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"}