import { DESCRIPTION_SIZE_TYPES as e, VALIDATION_MESSAGE_TYPES as t } from "../../common/constants/index.js";
import { addClassStyleAttrs as n, getUniqueString as r, getValidationState as i, hasSlotContent as a, removeClassStyleAttrs as o } from "../../common/utils/index.js";
import { MessagesMixin as s } from "../../common/mixins/input.js";
import { t as c } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import l from "../validation-messages/validation-messages.js";
import { DESCRIPTION_SIZE_CLASSES as u, INPUT_ICON_SIZES as d, INPUT_SIZES as f, INPUT_SIZE_CLASSES as p, INPUT_STATE_CLASSES as m, INPUT_TYPES as h, LABEL_SIZE_CLASSES as g } from "./input-constants.js";
import { createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, mergeProps as S, normalizeClass as C, openBlock as w, renderSlot as T, resolveComponent as E, toDisplayString as D, toHandlers as O } from "vue";
//#region components/input/input.vue
var k = {
	compatConfig: { MODE: 3 },
	name: "DtInput",
	components: { DtValidationMessages: l },
	mixins: [s],
	inheritAttrs: !1,
	props: {
		name: {
			type: String,
			default: ""
		},
		type: {
			type: String,
			default: h.TEXT,
			validator: (e) => Object.values(h).includes(e)
		},
		modelValue: {
			type: [String, Number],
			default: ""
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		label: {
			type: String,
			default: ""
		},
		labelVisible: {
			type: Boolean,
			default: !0
		},
		description: {
			type: String,
			default: ""
		},
		size: {
			type: String,
			default: "md",
			validator: (e) => Object.values(f).includes(e)
		},
		inputClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		inputWrapperClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		rootClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		currentLength: {
			type: Number,
			default: null
		},
		retainWarning: {
			type: Boolean,
			default: !1
		},
		validate: {
			type: Object,
			default: null
		},
		hidden: {
			type: Boolean,
			default: !1
		}
	},
	emits: [
		"input",
		"blur",
		"clear",
		"focus",
		"focusin",
		"focusout",
		"update:modelValue",
		"update:length",
		"update:invalid"
	],
	data() {
		return {
			isInputFocused: !1,
			isInvalid: !1,
			defaultLength: 0,
			hasSlotContent: a,
			isComposing: !1,
			justEndedComposition: !1
		};
	},
	computed: {
		isTextarea() {
			return this.type === h.TEXTAREA;
		},
		isDefaultSize() {
			return this.size === f.DEFAULT;
		},
		iconSize() {
			return d[this.size];
		},
		isValidSize() {
			return Object.values(f).includes(this.size);
		},
		isValidDescriptionSize() {
			return Object.values(e).includes(this.size);
		},
		inputComponent() {
			return this.isTextarea ? "textarea" : "input";
		},
		inputListeners() {
			return {
				compositionstart: () => {
					this.isComposing = !0;
				},
				compositionend: () => {
					this.isComposing = !1, this.justEndedComposition = !0;
					let e = this.$refs.input.value;
					this.$emit("input", e), this.$emit("update:modelValue", e), Promise.resolve().then(() => {
						this.justEndedComposition = !1;
					});
				},
				input: async (e) => {
					if (this.isComposing || this.justEndedComposition) return;
					let t = e.target.value;
					this.type === h.FILE && (t = Array.from(e.target.files).map((e) => e.name)), this.$emit("input", t), this.$emit("update:modelValue", t);
				},
				blur: (e) => {
					this.isInputFocused = !1, this.onBlur(e);
				},
				focus: (e) => {
					this.isInputFocused = !0, this.$emit("focus", e);
				},
				focusin: (e) => this.$emit("focusin", e),
				focusout: (e) => this.$emit("focusout", e)
			};
		},
		descriptionKey() {
			return `input-description-${r()}`;
		},
		inputState() {
			return i(this.validationMessages);
		},
		defaultLengthCalculation() {
			return this.calculateLength(this.modelValue);
		},
		validationProps() {
			return { length: {
				description: this?.validate?.length?.description,
				max: this?.validate?.length?.max,
				warn: this?.validate?.length?.warn,
				message: this?.validate?.length?.message,
				limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : !1
			} };
		},
		validationMessages() {
			return this.showLengthLimitValidation ? this.formattedMessages.concat([this.inputLengthErrorMessage()]) : this.formattedMessages;
		},
		showInputState() {
			return this.showMessages && this.inputState;
		},
		inputLength() {
			return this.currentLength ? this.currentLength : this.defaultLengthCalculation;
		},
		inputLengthState() {
			return this.inputLength < this.validationProps.length.warn ? null : this.inputLength <= this.validationProps.length.max ? this.validationProps.length.warn ? t.WARNING : null : t.ERROR;
		},
		shouldValidateLength() {
			return !!(this.validationProps.length.description && this.validationProps.length.max);
		},
		shouldLimitMaxLength() {
			return this.shouldValidateLength && this.validationProps.length.limitMaxLength;
		},
		showLengthLimitValidation() {
			return this.shouldValidateLength && this.inputLengthState !== null && this.validationProps.length.message && (this.retainWarning || this.isInputFocused || this.isInvalid);
		},
		sizeModifierClass() {
			return this.isDefaultSize || !this.isValidSize ? "" : p[this.inputComponent][this.size];
		},
		stateClass() {
			return [m[this.inputState]];
		}
	},
	watch: {
		isInvalid(e) {
			this.$emit("update:invalid", e);
		},
		modelValue: {
			immediate: !0,
			handler(e) {
				this.shouldValidateLength && this.validateLength(this.inputLength), this.currentLength ?? this.$emit("update:length", this.calculateLength(e)), this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== e && (this.$refs.input.value = e);
			}
		}
	},
	beforeMount() {
		this.descriptionSizeClasses = u, this.labelSizeClasses = g;
	},
	mounted() {
		this.isTextarea && this.$refs.input && (this.$refs.input.value = this.modelValue);
	},
	methods: {
		removeClassStyleAttrs: o,
		addClassStyleAttrs: n,
		inputClasses() {
			return [
				"d-input__input",
				this.inputComponent === "input" ? "d-input" : "d-textarea",
				{
					[this.stateClass]: this.showInputState,
					"d-input-icon--left": this.$slots.leftIcon,
					"d-input-icon--right": this.$slots.rightIcon
				},
				this.sizeModifierClass,
				this.inputClass
			];
		},
		inputWrapperClasses() {
			return this.hidden ? [] : [
				"d-input__wrapper",
				{ [this.stateClass]: this.showInputState },
				this.inputWrapperClass
			];
		},
		calculateLength(e) {
			return typeof e == "string" ? [...e].length : 0;
		},
		inputLengthErrorMessage() {
			return {
				message: this.validationProps.length.message,
				type: this.inputLengthState
			};
		},
		onBlur(e) {
			this.$refs.container?.contains(e.relatedTarget) || this.$emit("blur", e);
		},
		emitClearEvents() {
			this.$emit("input", ""), this.$emit("clear"), this.$emit("update:modelValue", "");
		},
		blur() {
			this.$refs.input.blur();
		},
		focus() {
			this.$refs.input.focus();
		},
		select() {
			this.$refs.input.select();
		},
		getMessageKey(e, t) {
			return `message-${e}-${t}`;
		},
		validateLength(e) {
			this.isInvalid = e > this.validationProps.length.max;
		},
		clearInput() {
			this.$refs.input.value = "", this.$refs.input.focus(), this.emitClearEvents();
		}
	}
}, A = ["aria-details"], j = ["id"], M = { key: 0 }, N = {
	key: 1,
	"data-qa": "dt-input-length-description",
	class: "d-input__length-description"
}, P = ["read-only"], F = [
	"name",
	"disabled",
	"autocomplete",
	"maxlength"
], I = [
	"value",
	"name",
	"type",
	"disabled",
	"autocomplete",
	"maxlength"
];
function L(e, t, n, r, i, a) {
	let o = E("dt-validation-messages");
	return w(), v("div", S({
		ref: "container",
		class: [
			n.rootClass,
			"d-input__root",
			{ "d-input--hidden": n.hidden }
		]
	}, a.addClassStyleAttrs(e.$attrs), { "data-qa": "dt-input" }), [y("label", {
		class: "d-input__label",
		"aria-details": e.$slots.description || n.description ? a.descriptionKey : void 0,
		"data-qa": "dt-input-label-wrapper"
	}, [
		T(e.$slots, "labelSlot", {}, () => [n.labelVisible && n.label ? (w(), v("div", {
			key: 0,
			ref: "label",
			"data-qa": "dt-input-label",
			class: C([
				"d-input__label-text",
				"d-label",
				e.labelSizeClasses[n.size]
			])
		}, D(n.label), 3)) : _("", !0)]),
		i.hasSlotContent(e.$slots.description) || n.description || a.shouldValidateLength ? (w(), v("div", {
			key: 0,
			id: a.descriptionKey,
			ref: "description",
			class: C([
				"d-input__description",
				"d-description",
				e.descriptionSizeClasses[n.size]
			]),
			"data-qa": "dt-input-description"
		}, [i.hasSlotContent(e.$slots.description) || n.description ? (w(), v("div", M, [T(e.$slots, "description", {}, () => [b(D(n.description), 1)])])) : _("", !0), a.shouldValidateLength ? (w(), v("div", N, D(a.validationProps.length.description), 1)) : _("", !0)], 10, j)) : _("", !0),
		y("div", {
			class: C(a.inputWrapperClasses()),
			"read-only": n.disabled === !0 ? !0 : void 0
		}, [
			y("span", {
				class: "d-input-icon d-input-icon--left",
				"data-qa": "dt-input-left-icon-wrapper",
				onFocusout: t[0] || (t[0] = (...e) => a.onBlur && a.onBlur(...e))
			}, [T(e.$slots, "leftIcon", { iconSize: a.iconSize })], 32),
			a.isTextarea ? (w(), v("textarea", S({
				key: 0,
				ref: "input",
				name: n.name,
				disabled: n.disabled,
				autocomplete: e.$attrs.autocomplete ?? "off",
				class: a.inputClasses(),
				maxlength: a.shouldLimitMaxLength ? a.validationProps.length.max : null,
				"data-qa": "dt-input-input"
			}, a.removeClassStyleAttrs(e.$attrs), O(a.inputListeners, !0)), null, 16, F)) : (w(), v("input", S({
				key: 1,
				ref: "input",
				value: n.modelValue,
				name: n.name,
				type: n.type,
				disabled: n.disabled,
				autocomplete: e.$attrs.autocomplete ?? "off",
				class: a.inputClasses(),
				maxlength: a.shouldLimitMaxLength ? a.validationProps.length.max : null,
				"data-qa": "dt-input-input"
			}, a.removeClassStyleAttrs(e.$attrs), O(a.inputListeners, !0)), null, 16, I)),
			y("span", {
				class: "d-input-icon d-input-icon--right",
				"data-qa": "dt-input-right-icon-wrapper",
				onFocusout: t[1] || (t[1] = (...e) => a.onBlur && a.onBlur(...e))
			}, [T(e.$slots, "rightIcon", {
				iconSize: a.iconSize,
				clear: a.clearInput
			})], 32)
		], 10, P)
	], 8, A), x(o, S({
		"validation-messages": a.validationMessages,
		"show-messages": e.showMessages,
		class: e.messagesClass
	}, e.messagesChildProps, { "data-qa": "dt-input-messages" }), null, 16, [
		"validation-messages",
		"show-messages",
		"class"
	])], 16);
}
var R = /* @__PURE__ */ c(k, [["render", L]]);
//#endregion
export { R as default };

//# sourceMappingURL=input.js.map