@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrNumberInput/chunks/GrNumberInput-CZOyPz4J.js

@@ -0,0 +1,658 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { n as addLen, t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
+import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
+import { n as chevron_left_default, t as chevron_right_default } from "../../../chunks/chevron-right-BfqMVpbB.js";
+import { a as grNumberInputShellClass, i as grNumberInputInputClass, o as stepperCompactClass, r as clearButtonClass, s as stepperWideClass } from "../../../chunks/config-zjeAJ4ho.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, withCtx, withModifiers } from "vue";
+//#region src/components/GrNumberInput/numberInputMath.ts
+/**
+* Экспоненциальная запись разбирается отдельно: `String(1e-7)` — это `"1e-7"`,
+* и поиск точки насчитал бы ноль знаков, после чего округление съело бы всё
+* значение.
+*/
+function decimalsOf(value) {
+	if (!Number.isFinite(value)) return 0;
+	const text = String(Math.abs(value));
+	const exponential = text.match(/^\d+(?:\.(\d+))?e-(\d+)$/);
+	if (exponential) {
+		const [, fraction = "", exponent] = exponential;
+		return fraction.length + Number(exponent);
+	}
+	const dot = text.indexOf(".");
+	return dot === -1 ? 0 : text.length - dot - 1;
+}
+/**
+* Двоичная дробь копит ошибку, поэтому сумма округляется. Разрядность — по
+* большему из операндов: шаг `0.5` от значения `1.25` обязан дать `1.75`.
+*/
+function addStep(current, step) {
+	const decimals = Math.max(decimalsOf(current), decimalsOf(step));
+	const sum = current + step;
+	return decimals > 100 ? sum : Number(sum.toFixed(decimals));
+}
+/**
+* Правило `GrSlider` (`bigStep` в `GrSlider.vue`): десять шагов либо десятая
+* часть диапазона — что крупнее. У поля границы необязательны, и без них
+* диапазона не существует.
+*/
+function bigStep(step, min, max) {
+	const base = step * 10;
+	if (min === void 0 || max === void 0) return base;
+	const span = max - min;
+	const tenth = Math.round(span / 10 / step) * step;
+	return Math.max(base, tenth || step);
+}
+//#endregion
+//#region ~icons/lucide/chevron-up
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "m18 15l-6-6l-6 6"
+	}, null, -1)])]);
+}
+var chevron_up_default = markRaw({
+	name: "lucide-chevron-up",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrNumberInput/GrNumberInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"name",
+	"inputmode",
+	"autocomplete",
+	"placeholder",
+	"disabled",
+	"value",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly",
+	"aria-label",
+	"readonly"
+];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = { class: "flex flex-col justify-center gap-1" };
+var _hoisted_4 = ["disabled", "aria-label"];
+var _hoisted_5 = ["disabled", "aria-label"];
+var _hoisted_6 = ["disabled", "aria-label"];
+var _hoisted_7 = ["disabled", "aria-label"];
+var REPEAT_DELAY_MS = 400;
+var REPEAT_INTERVAL_MS = 60;
+//#endregion
+//#region src/components/GrNumberInput/GrNumberInput.vue
+var GrNumberInput_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "GrNumberInput",
+	props: {
+		modelValue: {},
+		placeholder: { default: void 0 },
+		autocomplete: { default: void 0 },
+		inputmode: { default: "decimal" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		state: { default: "default" },
+		name: { default: void 0 },
+		id: { default: void 0 },
+		size: { default: void 0 },
+		textAlign: { default: "left" },
+		decimalSeparator: { default: "." },
+		step: { default: 1 },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		precision: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		clearLabel: { default: void 0 },
+		locale: { default: void 0 },
+		useGrouping: {
+			type: Boolean,
+			default: false
+		},
+		controls: {
+			type: Boolean,
+			default: false
+		},
+		controlsDirection: { default: "vertical" },
+		prefixMinWidth: { default: void 0 },
+		prefixMaxWidth: { default: void 0 },
+		suffixMinWidth: { default: void 0 },
+		suffixMaxWidth: { default: void 0 },
+		prefixFixed: {
+			type: Boolean,
+			default: false
+		},
+		suffixFixed: {
+			type: Boolean,
+			default: false
+		},
+		increaseLabel: { default: void 0 },
+		decreaseLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur",
+		"clear"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const ADDON_PX_BY_SIZE = {
+			xs: 32,
+			sm: 36,
+			md: 40,
+			lg: 48
+		};
+		const BASE_PADDING_X_LEN_BY_SIZE = {
+			xs: "10px",
+			sm: "12px",
+			md: "12px",
+			lg: "16px"
+		};
+		function px(n) {
+			return `${n}px`;
+		}
+		const field = useGrFormFieldContext();
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrNumberInput" });
+		const resolvedId = computed(() => props.id ?? field?.id.value);
+		const describedBy = computed(() => field?.describedById.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const emit = __emit;
+		const inputEl = ref(null);
+		const isFocused = ref(false);
+		/**
+		* Строка ровно в том виде, в каком её набирают. Модель к этому моменту может
+		* быть `null` («-», «1,» — не числа), и без черновика поле стирало бы под
+		* пальцами то, что печатают. Коммит (`change`/`blur`) черновик снимает.
+		*/
+		const draft = ref(null);
+		function focus() {
+			inputEl.value?.focus();
+		}
+		function blur() {
+			inputEl.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		const { t, locale } = useGranularityTranslations();
+		/**
+		* Локаль форматирования: свой проп → локаль i18n-адаптера → окружение. Без
+		* второго шага мультиязычное приложение передавало бы `locale` каждому полю.
+		*/
+		const resolvedLocale = computed(() => props.locale ?? locale.value);
+		const resolvedIncreaseLabel = computed(() => props.increaseLabel ?? t("gr.numberInput.increase", "Increase"));
+		const resolvedDecreaseLabel = computed(() => props.decreaseLabel ?? t("gr.numberInput.decrease", "Decrease"));
+		const hasHorizontalControls = computed(() => props.controls && props.controlsDirection === "horizontal");
+		const hasVerticalControls = computed(() => props.controls && props.controlsDirection === "vertical");
+		const addonPx = computed(() => ADDON_PX_BY_SIZE[resolvedSize.value]);
+		const addonLen = computed(() => px(addonPx.value));
+		const basePaddingXLen = computed(() => BASE_PADDING_X_LEN_BY_SIZE[resolvedSize.value]);
+		/** Кнопки ± справа: вертикальный стек — одна колонка, горизонтальный — вторая. */
+		const rightControlsCount = computed(() => (hasHorizontalControls.value ? 1 : 0) + (hasVerticalControls.value ? 1 : 0));
+		const { prefixEl, suffixEl, prefixLen, suffixLen, prefixStyle, suffixStyle, fieldPadding: inputStyle } = useControlAddons(() => props, {
+			defaultMinWidth: () => addonLen.value,
+			paddingX: () => basePaddingXLen.value,
+			leadingReserve: () => hasHorizontalControls.value ? addonLen.value : "0px",
+			trailingReserve: () => rightControlsCount.value > 0 ? px(addonPx.value * rightControlsCount.value) : "0px",
+			anchorSuffixRight: true
+		});
+		function addonStyle(side, offset) {
+			return {
+				width: addonLen.value,
+				[side]: offset
+			};
+		}
+		const verticalControlsStyle = computed(() => addonStyle("right", suffixLen.value));
+		/**
+		* Крестик очистки живёт левее правой зоны (суффикс + кнопки ±) — иначе он лёг бы
+		* на них. Ширины там же, где их считает поле, поэтому переиспользуем расчёт.
+		*/
+		const clearButtonStyle = computed(() => {
+			const controls = rightControlsCount.value > 0 ? px(addonPx.value * rightControlsCount.value) : "0px";
+			return { right: addLen(addLen(suffixLen.value, controls), "6px") };
+		});
+		const horizontalLeftControlsStyle = computed(() => addonStyle("left", prefixLen.value));
+		const horizontalRightControlsStyle = computed(() => addonStyle("right", suffixLen.value));
+		const shellClassName = computed(() => {
+			return grNumberInputShellClass({
+				disabled: isDisabled.value,
+				state: props.state,
+				invalid: isInvalid.value
+			});
+		});
+		const inputClassName = computed(() => {
+			return grNumberInputInputClass({
+				size: resolvedSize.value,
+				textAlign: props.textAlign
+			});
+		});
+		function isDigit(ch) {
+			return ch >= "0" && ch <= "9";
+		}
+		function sanitize(raw) {
+			const sep = props.decimalSeparator || ".";
+			let out = "";
+			let hasSepLocal = false;
+			for (let i = 0; i < raw.length; i++) {
+				const ch = raw[i];
+				if (ch === "-" && out.length === 0) {
+					out += "-";
+					continue;
+				}
+				if (isDigit(ch)) {
+					out += ch;
+					continue;
+				}
+				if ((ch === sep || ch === "." || ch === ",") && !hasSepLocal) {
+					out += sep;
+					hasSepLocal = true;
+				}
+			}
+			return out;
+		}
+		function toNumber(value) {
+			if (value.trim() === "") return null;
+			const sep = props.decimalSeparator || ".";
+			const normalized = sep === "." ? value : value.replace(sep, ".");
+			const n = Number(normalized);
+			if (!Number.isFinite(n)) return null;
+			return n;
+		}
+		function clamp(v) {
+			if (props.min !== void 0) v = Math.max(props.min, v);
+			if (props.max !== void 0) v = Math.min(props.max, v);
+			return v;
+		}
+		function normalize(v) {
+			if (props.precision === void 0) return v;
+			const p = Math.max(0, props.precision);
+			return Number(v.toFixed(p));
+		}
+		function format(n) {
+			const sep = props.decimalSeparator || ".";
+			const p = props.precision;
+			let s = p === void 0 ? n.toLocaleString("en-US", {
+				useGrouping: false,
+				maximumFractionDigits: 20
+			}) : n.toFixed(Math.max(0, p));
+			if (sep !== ".") s = s.replace(".", sep);
+			return s;
+		}
+		function onInput(e) {
+			const el = e.target;
+			const raw = el.value;
+			const next = sanitize(raw);
+			if (raw !== next) {
+				const caret = el.selectionStart ?? raw.length;
+				const keptBefore = sanitize(raw.slice(0, caret)).length;
+				el.value = next;
+				el.setSelectionRange(keptBefore, keptBefore);
+			}
+			draft.value = next;
+			const num = toNumber(next);
+			if (num !== props.modelValue) emit("update:modelValue", num);
+		}
+		/**
+		* Коммит набранного: границы и точность применяются здесь, а не на каждом
+		* нажатии, — иначе `min=10` не дал бы набрать «1» как начало «15».
+		*/
+		function commit() {
+			const num = draft.value !== null ? toNumber(draft.value) : props.modelValue;
+			const next = num === null ? null : clamp(normalize(num));
+			draft.value = null;
+			if (next !== props.modelValue) emit("update:modelValue", next);
+			emit("change", next);
+		}
+		function onChange() {
+			commit();
+		}
+		function setValue(n) {
+			const next = clamp(normalize(n));
+			draft.value = null;
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		/**
+		* Шаг значения. Фокус не трогаем: кнопка ± обязана оставаться под фокусом,
+		* иначе клавиатурный пользователь после первого Enter теряет её и повторно
+		* нажать не может. Поле фокусирует тот, кто шагает от него самого.
+		*/
+		function stepBy(dir, step = props.step ?? 1) {
+			if (isDisabled.value || isReadonly.value) return;
+			setValue(addStep(props.modelValue ?? 0, step * dir));
+		}
+		let repeatFired = false;
+		/** Клик кнопки «±»: шаг, если это не хвост только что завершённого удержания. */
+		function onStepClick(dir, event) {
+			if (event.detail === 0) {
+				repeatFired = false;
+				stepBy(dir);
+				return;
+			}
+			if (repeatFired) {
+				repeatFired = false;
+				return;
+			}
+			stepBy(dir);
+		}
+		function onKeydown(e) {
+			if (isDisabled.value) return;
+			if (isReadonly.value) return;
+			switch (e.key) {
+				case "ArrowUp":
+					e.preventDefault();
+					stepBy(1);
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					stepBy(-1);
+					break;
+				case "PageUp":
+					e.preventDefault();
+					stepBy(1, bigStep(props.step ?? 1, props.min, props.max));
+					break;
+				case "PageDown":
+					e.preventDefault();
+					stepBy(-1, bigStep(props.step ?? 1, props.min, props.max));
+					break;
+				case "Home":
+					if (props.min !== void 0) {
+						e.preventDefault();
+						setValue(props.min);
+					}
+					break;
+				case "End":
+					if (props.max !== void 0) {
+						e.preventDefault();
+						setValue(props.max);
+					}
+					break;
+			}
+		}
+		const ariaValueNow = computed(() => props.modelValue ?? void 0);
+		const numericValue = computed(() => props.modelValue);
+		const canIncrease = computed(() => {
+			if (props.max === void 0) return true;
+			const current = numericValue.value;
+			return current === null || normalize(current) < props.max;
+		});
+		const canDecrease = computed(() => {
+			if (props.min === void 0) return true;
+			const current = numericValue.value;
+			return current === null || normalize(current) > props.min;
+		});
+		function formatGrouped(num) {
+			const sep = props.decimalSeparator || ".";
+			return new Intl.NumberFormat(resolvedLocale.value, {
+				useGrouping: true,
+				minimumFractionDigits: props.precision ?? 0,
+				maximumFractionDigits: props.precision ?? 20
+			}).formatToParts(num).map((part) => part.type === "decimal" ? sep : part.value).join("");
+		}
+		/**
+		* `aria-valuetext` нужен только при группировке: без неё `aria-valuenow` уже
+		* несёт то же самое число, и дублировать его текстом незачем.
+		*/
+		const ariaValueText = computed(() => {
+			if (!props.useGrouping) return void 0;
+			return props.modelValue === null ? void 0 : formatGrouped(props.modelValue);
+		});
+		/**
+		* Что показывает поле: набираемый черновик, пока он есть, иначе — модель.
+		* Группировка только вне фокуса: при правке разделители разрядов мешают.
+		*/
+		const displayValue = computed(() => {
+			if (draft.value !== null) return draft.value;
+			if (props.modelValue === null) return "";
+			if (props.useGrouping && !isFocused.value) return formatGrouped(props.modelValue);
+			return format(props.modelValue);
+		});
+		function onFocus(event) {
+			isFocused.value = true;
+			emit("focus", event);
+		}
+		function onBlur(event) {
+			isFocused.value = false;
+			draft.value = null;
+			emit("blur", event);
+			stopRepeat();
+		}
+		let repeatDelay = null;
+		let repeatTimer = null;
+		function stopRepeat() {
+			if (repeatDelay !== null) {
+				clearTimeout(repeatDelay);
+				repeatDelay = null;
+			}
+			if (repeatTimer !== null) {
+				clearInterval(repeatTimer);
+				repeatTimer = null;
+			}
+		}
+		function canStep(dir) {
+			return dir === 1 ? canIncrease.value : canDecrease.value;
+		}
+		/**
+		* `pointerdown`, а не `mousedown`: на тач-устройствах второго не бывает.
+		* Повтор останавливается на границе — иначе таймер крутился бы вхолостую.
+		*/
+		function startRepeat(dir) {
+			if (isDisabled.value || isReadonly.value) return;
+			stopRepeat();
+			repeatFired = false;
+			repeatDelay = setTimeout(() => {
+				repeatTimer = setInterval(() => {
+					if (!canStep(dir)) {
+						stopRepeat();
+						return;
+					}
+					repeatFired = true;
+					stepBy(dir);
+				}, REPEAT_INTERVAL_MS);
+			}, REPEAT_DELAY_MS);
+		}
+		onBeforeUnmount(stopRepeat);
+		const resolvedClearable = useGrComponentProp("GrNumberInput", "clearable", () => props.clearable, false);
+		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.input.clear", "Clear"));
+		const clearVisible = computed(() => resolvedClearable.value && !isDisabled.value && !isReadonly.value && props.modelValue !== null);
+		function clear() {
+			draft.value = null;
+			emit("update:modelValue", null);
+			emit("change", null);
+			emit("clear");
+			focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-number-input": "",
+				class: normalizeClass(["relative w-full overflow-hidden rounded-[var(--gr-radius-control)] border bg-[var(--gr-bg)] transition-colors duration-[var(--gr-duration-fast)] focus-within:ring-2 focus-within:ring-[var(--gr-ring)]", shellClassName.value])
+			}, [
+				_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "prefixEl",
+					ref: prefixEl,
+					"data-testid": "number-input-prefix",
+					"data-gr-number-input-prefix": "",
+					class: "absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate",
+					style: normalizeStyle(unref(prefixStyle)),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "prefix")], 4)) : createCommentVNode("", true),
+				createElementVNode("input", mergeProps({
+					id: resolvedId.value,
+					ref_key: "inputEl",
+					ref: inputEl
+				}, _ctx.$attrs, {
+					name: __props.name,
+					type: "text",
+					inputmode: __props.inputmode,
+					autocomplete: __props.autocomplete,
+					placeholder: __props.placeholder,
+					disabled: unref(isDisabled),
+					value: displayValue.value,
+					role: "spinbutton",
+					"aria-valuenow": ariaValueNow.value,
+					"aria-valuemin": __props.min,
+					"aria-valuemax": __props.max,
+					"aria-valuetext": ariaValueText.value,
+					"aria-invalid": unref(isInvalid) ? "true" : void 0,
+					"aria-describedby": describedBy.value,
+					"aria-required": unref(isRequired) ? "true" : void 0,
+					"aria-readonly": unref(isReadonly) ? "true" : void 0,
+					"aria-label": __props.ariaLabel,
+					readonly: unref(isReadonly),
+					class: ["w-full bg-transparent text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed", inputClassName.value],
+					style: unref(inputStyle),
+					onInput,
+					onChange,
+					onKeydown,
+					onFocus,
+					onBlur
+				}), null, 16, _hoisted_1),
+				_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					ref_key: "suffixEl",
+					ref: suffixEl,
+					"data-testid": "number-input-suffix",
+					"data-gr-number-input-suffix": "",
+					class: normalizeClass(["absolute inset-y-0 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate", __props.suffixFixed ? "[direction:rtl]" : ""]),
+					style: normalizeStyle(unref(suffixStyle)),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true),
+				clearVisible.value ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					"data-gr-number-input-clear": "",
+					class: normalizeClass(unref(clearButtonClass)),
+					style: normalizeStyle(clearButtonStyle.value),
+					"aria-label": resolvedClearLabel.value,
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+					onClick: clear
+				}, [createVNode(GrIcon_default, { size: 14 }, {
+					default: withCtx(() => [createVNode(unref(x_default))]),
+					_: 1
+				})], 46, _hoisted_2)) : createCommentVNode("", true),
+				hasVerticalControls.value ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					"data-testid": "number-input-controls-vertical",
+					"data-gr-number-input-controls": "vertical",
+					class: "absolute inset-y-0 flex items-center justify-center border-l border-[var(--gr-brd)]",
+					style: normalizeStyle(verticalControlsStyle.value)
+				}, [createElementVNode("div", _hoisted_3, [createElementVNode("button", {
+					type: "button",
+					"data-gr-number-input-increase": "",
+					class: normalizeClass(unref(stepperCompactClass)),
+					disabled: unref(isDisabled) || unref(isReadonly) || !canIncrease.value,
+					"aria-label": resolvedIncreaseLabel.value,
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+					onPointerdown: _cache[2] || (_cache[2] = ($event) => startRepeat(1)),
+					onPointerup: stopRepeat,
+					onPointerleave: stopRepeat,
+					onPointercancel: stopRepeat,
+					onClick: _cache[3] || (_cache[3] = ($event) => onStepClick(1, $event))
+				}, [createVNode(GrIcon_default, { size: 12 }, {
+					default: withCtx(() => [createVNode(unref(chevron_up_default))]),
+					_: 1
+				})], 42, _hoisted_4), createElementVNode("button", {
+					type: "button",
+					"data-gr-number-input-decrease": "",
+					class: normalizeClass(unref(stepperCompactClass)),
+					disabled: unref(isDisabled) || unref(isReadonly) || !canDecrease.value,
+					"aria-label": resolvedDecreaseLabel.value,
+					onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
+					onPointerdown: _cache[5] || (_cache[5] = ($event) => startRepeat(-1)),
+					onPointerup: stopRepeat,
+					onPointerleave: stopRepeat,
+					onPointercancel: stopRepeat,
+					onClick: _cache[6] || (_cache[6] = ($event) => onStepClick(-1, $event))
+				}, [createVNode(GrIcon_default, { size: 12 }, {
+					default: withCtx(() => [createVNode(unref(chevron_down_default))]),
+					_: 1
+				})], 42, _hoisted_5)])], 4)) : createCommentVNode("", true),
+				hasHorizontalControls.value ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					"data-testid": "number-input-controls-horizontal-left",
+					"data-gr-number-input-controls": "horizontal-left",
+					class: "absolute inset-y-0 flex items-stretch justify-center border-r border-[var(--gr-brd)]",
+					style: normalizeStyle(horizontalLeftControlsStyle.value)
+				}, [createElementVNode("button", {
+					type: "button",
+					"data-gr-number-input-decrease": "",
+					class: normalizeClass(unref(stepperWideClass)),
+					disabled: unref(isDisabled) || unref(isReadonly) || !canDecrease.value,
+					"aria-label": resolvedDecreaseLabel.value,
+					onMousedown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["prevent"])),
+					onPointerdown: _cache[8] || (_cache[8] = ($event) => startRepeat(-1)),
+					onPointerup: stopRepeat,
+					onPointerleave: stopRepeat,
+					onPointercancel: stopRepeat,
+					onClick: _cache[9] || (_cache[9] = ($event) => onStepClick(-1, $event))
+				}, [createVNode(GrIcon_default, { size: 12 }, {
+					default: withCtx(() => [createVNode(unref(chevron_left_default))]),
+					_: 1
+				})], 42, _hoisted_6)], 4)) : createCommentVNode("", true),
+				hasHorizontalControls.value ? (openBlock(), createElementBlock("div", {
+					key: 5,
+					"data-testid": "number-input-controls-horizontal-right",
+					"data-gr-number-input-controls": "horizontal-right",
+					class: "absolute inset-y-0 flex items-stretch justify-center border-l border-[var(--gr-brd)]",
+					style: normalizeStyle(horizontalRightControlsStyle.value)
+				}, [createElementVNode("button", {
+					type: "button",
+					"data-gr-number-input-increase": "",
+					class: normalizeClass(unref(stepperWideClass)),
+					disabled: unref(isDisabled) || unref(isReadonly) || !canIncrease.value,
+					"aria-label": resolvedIncreaseLabel.value,
+					onMousedown: _cache[10] || (_cache[10] = withModifiers(() => {}, ["prevent"])),
+					onPointerdown: _cache[11] || (_cache[11] = ($event) => startRepeat(1)),
+					onPointerup: stopRepeat,
+					onPointerleave: stopRepeat,
+					onPointercancel: stopRepeat,
+					onClick: _cache[12] || (_cache[12] = ($event) => onStepClick(1, $event))
+				}, [createVNode(GrIcon_default, { size: 12 }, {
+					default: withCtx(() => [createVNode(unref(chevron_right_default))]),
+					_: 1
+				})], 42, _hoisted_7)], 4)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { GrNumberInput_default as t };