require('../assets/NcInputField-CzryIHRa.css'); "use strict"; const Components_NcButton = require("../Components/NcButton.cjs"); 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: "NcInputField", components: { NcButton: Components_NcButton, 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, Number], default: void 0 }, /** * The value of the input field * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number' */ modelValue: { type: [String, Number], default: void 0 }, /** * The type of the input element */ type: { type: String, default: "text", validator: (value) => [ "text", "password", "email", "tel", "url", "search", "number" ].includes(value) }, /** * The input label, always provide one for accessibility purposes. * This will also be used as a placeholder unless the placeholder * prop is populated with a different string. * * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`). */ label: { type: String, default: void 0 }, /** * Pass in true if you want to use an external label. This is useful * if you need a label that looks different from the one provided by * this component */ labelOutside: { type: Boolean, default: 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 }, /** * Controls whether to display the trailing button. */ showTrailingButton: { type: Boolean, default: false }, /** * Label of the trailing button * * Required when showTrailingButton is set */ trailingButtonLabel: { type: String, default: "" }, /** * Toggles the success state of the component. Adds a checkmark icon. * this cannot be used together with canClear. */ success: { type: Boolean, default: 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 }, /** * Specifies whether the input should have a pill form. * By default, input has rounded corners. */ pill: { type: Boolean, default: false }, /** * Class to add to the input field. * Necessary to use NcInputField in the NcActionInput component. */ inputClass: { type: [Object, String], default: "" } }, 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", "trailing-button-click" ], 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(); }, hasTrailingIcon() { return this.success; }, 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) { const newValue = this.type === "number" && typeof this.model === "number" ? parseFloat(event.target.value, 10) : event.target.value; this.model = newValue; }, handleTrailingButtonClick(event) { this.$emit("trailing-button-click", event); } } }; var _sfc_render = function render() { var _vm = this, _c = _vm._self._c; return _c("div", { staticClass: "input-field", class: { "input-field--disabled": _vm.disabled, "input-field--label-outside": _vm.labelOutside || !_vm.isValidLabel, "input-field--leading-icon": !!_vm.$scopedSlots.icon || !!_vm.$scopedSlots.default || !!_vm.$slots.default, "input-field--trailing-icon": _vm.showTrailingButton || _vm.hasTrailingIcon, "input-field--pill": _vm.pill } }, [_c("div", { staticClass: "input-field__main-wrapper" }, [_c("input", _vm._g(_vm._b({ ref: "input", staticClass: "input-field__input", class: [ _vm.inputClass, { "input-field__input--success": _vm.success, "input-field__input--error": _vm.error } ], attrs: { "id": _vm.computedId, "type": _vm.type, "disabled": _vm.disabled, "placeholder": _vm.computedPlaceholder, "aria-describedby": _vm.ariaDescribedby, "aria-live": "polite" }, domProps: { "value": _vm.model?.toString() }, on: { "input": _vm.handleInput } }, "input", _vm.$attrs, false), _vm.$listeners)), !_vm.labelOutside && _vm.isValidLabel ? _c("label", { staticClass: "input-field__label", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !!_vm.$scopedSlots.icon || !!_vm.$scopedSlots.default || !!_vm.$slots.default, expression: "!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default" }], staticClass: "input-field__icon input-field__icon--leading" }, [_vm._t("icon", function() { return [_vm._t("default")]; })], 2), _vm.showTrailingButton ? _c("NcButton", { staticClass: "input-field__trailing-button", attrs: { "type": "tertiary-no-background", "aria-label": _vm.trailingButtonLabel, "disabled": _vm.disabled }, on: { "click": _vm.handleTrailingButtonClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() { return [_vm._t("trailing-button-icon")]; }, proxy: true }], null, true) }) : _vm.success || _vm.error ? _c("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [_vm.success ? _c("Check", { staticStyle: { "color": "var(--color-success-text)" }, attrs: { "size": 20 } }) : _vm.error ? _c("AlertCircle", { staticStyle: { "color": "var(--color-error-text)" }, attrs: { "size": 20 } }) : _vm._e()], 1) : _vm._e()], 1), _vm.helperText.length > 0 ? _c("p", { staticClass: "input-field__helper-text-message", class: { "input-field__helper-text-message--error": _vm.error, "input-field__helper-text-message--success": _vm.success }, attrs: { "id": `${_vm.inputName}-helper-text` } }, [_vm.success ? _c("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { "size": 18 } }) : _vm.error ? _c("AlertCircle", { staticClass: "input-field__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, "ceb23641" ); const NcInputField = __component__.exports; exports.NcInputField = NcInputField;