import e from "../PlTooltip/PlTooltip.js";
import "../PlTooltip/index.js";
import t from "../PlIcon16/PlIcon16.js";
import n from "../../utils/DoubleContour.js";
import { useLabelNotch as r } from "../../utils/useLabelNotch.js";
import "../PlIcon16/index.js";
import './pl-number-field.css';/* empty css                */
import { numberToDecimalString as i, tryParseNumber as a, validateNumber as o } from "./parseNumber.js";
import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, useSlots as C, watch as w, withCtx as T, withModifiers as E } from "vue";
var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-number-field__wrapper flex-grow d-flex flex-align-center" }, k = {
	key: 0,
	class: "text-description"
}, A = [
	"value",
	"disabled",
	"placeholder"
], j = {
	key: 0,
	class: "pl-number-field__error"
}, M = /* @__PURE__ */ m({
	name: "PlNumberField",
	props: /* @__PURE__ */ h({
		required: {},
		label: {},
		placeholder: {},
		step: { default: 1 },
		minValue: {},
		maxValue: {},
		disabled: { type: Boolean },
		disableSteps: { type: Boolean },
		errorMessage: {},
		validate: {},
		clearable: {},
		groupPosition: {}
	}, {
		modelValue: { required: !0 },
		modelModifiers: {}
	}),
	emits: /* @__PURE__ */ h([
		"blur",
		"focus",
		"enter"
	], ["update:modelValue"]),
	setup(m, { emit: h }) {
		let M = S(m, "modelValue"), N = h, P = m, F = C(), I = v();
		r(I);
		let L = v(i(M.value));
		w(M, (e) => {
			a(L.value).value !== e && (L.value = i(e));
		});
		function R(e) {
			let t = e.target;
			L.value = t.value;
			let n = a(t.value);
			n.value !== void 0 && (M.value = n.value);
		}
		function z() {
			let e = L.value.trim(), t = a(e);
			if (e === "" || t.value === void 0 && t.error === void 0) {
				L.value = "", P.required || (M.value = void 0);
				return;
			}
			t.value !== void 0 && (M.value = t.value, L.value = i(t.value));
		}
		let B = s(() => {
			if (P.errorMessage) return P.errorMessage;
			let e = a(L.value);
			if (e.error) return e.error;
			if (e.value !== void 0) return o(e.value, P);
			if (P.required && L.value.trim() === "") return "Value is required";
		}), V = s(() => P.clearable && (M.value !== void 0 || L.value.trim() !== "") && !P.disabled);
		function H() {
			typeof P.clearable == "function" ? (M.value = P.clearable(), L.value = i(M.value)) : (M.value = void 0, L.value = "");
		}
		let U = s(() => B.value ? !0 : P.maxValue !== void 0 && M.value !== void 0 && M.value >= P.maxValue), W = s(() => B.value ? !0 : P.minValue !== void 0 && M.value !== void 0 && M.value <= P.minValue), G = s(() => 10 ** (P.step.toString().split(".").at(1)?.length ?? 0));
		function K() {
			if (U.value) return;
			let e;
			e = M.value === void 0 ? P.minValue ?? 0 : ((M.value || 0) * G.value + P.step * G.value) / G.value, M.value = P.maxValue === void 0 ? e : Math.min(P.maxValue, e);
		}
		function q() {
			if (W.value) return;
			let e;
			e = M.value === void 0 ? 0 : ((M.value || 0) * G.value - P.step * G.value) / G.value, M.value = P.minValue === void 0 ? e : Math.max(P.minValue, e);
		}
		function J() {
			z(), N("blur", M.value);
		}
		function Y() {
			N("focus", M.value);
		}
		function X(e) {
			e.code === "Enter" && (z(), N("enter", M.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), !P.disableSteps && e.code === "ArrowUp" && K(), !P.disableSteps && e.code === "ArrowDown" && q();
		}
		function Z(e) {
			e.detail > 1 && e.preventDefault();
		}
		return (r, i) => (_(), u("div", {
			ref_key: "rootRef",
			ref: I,
			class: g([{
				error: !!B.value,
				disabled: m.disabled
			}, "pl-number-field d-flex-column"]),
			onKeydown: X
		}, [d("div", D, [
			p(n, {
				class: "pl-number-field__contour",
				"group-position": m.groupPosition
			}, null, 8, ["group-position"]),
			d("div", O, [
				m.label ? (_(), u("label", k, [f(b(m.label) + " ", 1), x(F).tooltip ? (_(), c(x(e), {
					key: 0,
					class: "info",
					position: "top"
				}, {
					tooltip: T(() => [y(r.$slots, "tooltip")]),
					_: 3
				})) : l("", !0)])) : l("", !0),
				d("input", {
					ref: "inputRef",
					type: "text",
					inputmode: "numeric",
					value: L.value,
					disabled: m.disabled,
					placeholder: m.placeholder,
					class: "text-s flex-grow",
					onInput: R,
					onFocusout: J,
					onFocusin: Y
				}, null, 40, A),
				V.value ? (_(), c(x(t), {
					key: 1,
					class: "pl-number-field__clearable",
					name: "delete-clear",
					onClick: E(H, ["stop"])
				})) : l("", !0)
			]),
			P.disableSteps ? l("", !0) : (_(), u("div", {
				key: 0,
				class: "pl-number-field__icons d-flex-column",
				onMousedown: Z
			}, [d("div", {
				class: g([{ disabled: U.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
				onClick: K
			}, [...i[0] ||= [d("svg", {
				xmlns: "http://www.w3.org/2000/svg",
				width: "16",
				height: "16",
				viewBox: "0 0 16 16",
				fill: "none"
			}, [d("path", {
				"fill-rule": "evenodd",
				"clip-rule": "evenodd",
				d: "M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z",
				fill: "#110529"
			})], -1)]], 2), d("div", {
				class: g([{ disabled: W.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
				onClick: q
			}, [...i[1] ||= [d("svg", {
				xmlns: "http://www.w3.org/2000/svg",
				width: "16",
				height: "16",
				viewBox: "0 0 16 16",
				fill: "none"
			}, [d("path", {
				"fill-rule": "evenodd",
				"clip-rule": "evenodd",
				d: "M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z",
				fill: "#110529"
			})], -1)]], 2)], 32))
		]), B.value ? (_(), u("div", j, b(B.value), 1)) : l("", !0)], 34));
	}
});
export { M as default };

//# sourceMappingURL=PlNumberField.vue2.js.map