From c303eb974c07282825b64e66460cff9a18cc2b1b Mon Sep 17 00:00:00 2001
From: Cole Blanchard <33158416+blanchco@users.noreply.github.com>
Date: Tue, 30 Jul 2024 16:44:54 -0400
Subject: [PATCH] separate input components (#4302)

Co-authored-by: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local>
Co-authored-by: Cole Blanchard <cblanchard@coleblahardsmbp.home>
---
 .../css/theme/designer/_components.scss       |   3 +-
 .../designer/components/input/_terainput.scss |  60 ++++++
 .../model-parts/tera-model-part-entry.vue     |   8 +-
 .../model/model-parts/tera-model-part.vue     |   8 +-
 .../model/petrinet/tera-initial-entry.vue     |   6 +-
 .../tera-initial-other-value-modal.vue        |   8 +-
 .../model/petrinet/tera-initial-table.vue     |   4 +-
 .../model/petrinet/tera-parameter-entry.vue   |  14 +-
 .../tera-parameter-other-value-modal.vue      |  22 +-
 .../model/petrinet/tera-parameter-table.vue   |   4 +-
 .../components/widgets/tera-input-number.vue  | 108 ++++++++++
 .../components/widgets/tera-input-text.vue    |  93 ++++++++
 .../src/components/widgets/tera-input.vue     | 202 ------------------
 .../widgets/tera-toggleable-edit.vue          |   4 +-
 .../tera-calibrate-ciemss-drilldown.vue       |   8 +-
 .../tera-calibrate-ensemble-ciemss.vue        |   4 +-
 .../ops/funman/tera-constraint-group-form.vue |   6 +-
 .../workflow/ops/funman/tera-funman.vue       |   4 +-
 .../tera-intervention-card.vue                |  20 +-
 .../tera-intervention-policy-drilldown.vue    |   4 +-
 .../tera-model-config-drilldown.vue           |   4 +-
 .../tera-optimize-ciemss-drilldown.vue        |  21 +-
 .../tera-optimize-criterion-group-form.vue    |  11 +-
 .../tera-static-intervention-policy-group.vue |  20 +-
 .../tera-simulate-ensemble-ciemss.vue         |   4 +-
 .../hmi-client/src/temp/custom-input-test.vue |  22 +-
 26 files changed, 360 insertions(+), 312 deletions(-)
 create mode 100644 packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
 create mode 100644 packages/client/hmi-client/src/components/widgets/tera-input-number.vue
 create mode 100644 packages/client/hmi-client/src/components/widgets/tera-input-text.vue
 delete mode 100644 packages/client/hmi-client/src/components/widgets/tera-input.vue

diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/_components.scss b/packages/client/hmi-client/src/assets/css/theme/designer/_components.scss
index 45ef2c1990..5774e3e033 100644
--- a/packages/client/hmi-client/src/assets/css/theme/designer/_components.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/designer/_components.scss
@@ -24,6 +24,7 @@
 @import './components/input/_slider';
 @import './components/input/_treeselect';
 @import './components/input/_togglebutton';
+@import './components/input/_terainput';
 
 //Button
 @import './components/button/_button';
@@ -96,4 +97,4 @@
 @import './components/misc/_scrolltop';
 @import './components/misc/_skeleton';
 @import './components/misc/_tag';
-@import './components/misc/_terminal';
\ No newline at end of file
+@import './components/misc/_terminal';
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
new file mode 100644
index 0000000000..e70475dff7
--- /dev/null
+++ b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
@@ -0,0 +1,60 @@
+.tera-input {
+	display: flex;
+	& > label {
+			background-color: none;
+			color: var(--text-color-secondary);
+			cursor: text;
+			padding-right: var(--gap-1-5);
+			font-size: var(--font-caption);
+			align-self: center;
+	};
+	& > main {
+		display: flex;
+		flex: 1 1 0;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--gap-xsmall) var(--gap-small);
+		background-color: var(--surface-section);
+		border: 1px solid var(--surface-border-alt);
+		border-radius: var(--border-radius);
+		cursor: text;
+		transition: border-color 0.3s ease-in-out;
+		font-family: var(--font-family);
+		&:has(*:disabled) {
+			opacity: 0.5;
+		}
+		&:has(*:focus) {
+			border-color: var(--primary-color);
+		}
+		&.error {
+			border-color: var(--error-border-color);
+		}
+		& > i {
+			margin-right: var(--gap-1);
+		}
+		& > input {
+			min-width: 0;
+			font-family: var(--font-family);
+			font-feature-settings: 'tnum';
+			flex-grow: 1;
+			border: none;
+			background-color: none;
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+	}
+		}
+	}
+
+	+ aside {
+		color: var(--error-message-color);
+		font-size: var(--font-caption);
+		word-wrap: break-word;
+		display: flex;
+		align-items: center;
+		i {
+			margin-right: var(--gap-2);
+		}
+	}
+}
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
index c47d974418..ca524cb57d 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
@@ -3,7 +3,7 @@
 		<h6>
 			<template v-if="item.templateId">{{ item.templateId }},</template> {{ item.id }}
 		</h6>
-		<tera-input
+		<tera-input-text
 			title="Name"
 			placeholder="Add a name"
 			:model-value="item.name ?? ''"
@@ -15,7 +15,7 @@
 			<span><span>Output:</span> {{ item.output }}</span>
 		</div>
 		<!--amr_to_mmt doesn't like unit expressions with spaces, removing them here before they are saved to the amr-->
-		<tera-input
+		<tera-input-text
 			v-else
 			label="Unit"
 			placeholder="Add a unit"
@@ -49,7 +49,7 @@
 			:expression="stringToLatexExpression(item.expression)"
 			:throw-on-error="false"
 		/>
-		<tera-input
+		<tera-input-text
 			title="Description"
 			placeholder="Add a description"
 			:model-value="item.description ?? ''"
@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import AutoComplete from 'primevue/autocomplete';
 import type { ModelPartItem } from '@/types/Model';
 import { stringToLatexExpression } from '@/services/model';
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
index 4f0739e671..78ba5767f9 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
@@ -23,7 +23,11 @@
 							size="small"
 						/>
 						<span v-else>
-							<tera-input label="Unit" placeholder="Add a unit" v-model="parentEditingState[index].childrenUnits" />
+							<tera-input-text
+								label="Unit"
+								placeholder="Add a unit"
+								v-model="parentEditingState[index].childrenUnits"
+							/>
 							<Button
 								icon="pi pi-check"
 								text
@@ -124,7 +128,7 @@ import { searchCuriesEntities } from '@/services/concept';
 import TeraModelPartEntry from '@/components/model/model-parts/tera-model-part-entry.vue';
 import AutoComplete from 'primevue/autocomplete';
 import Button from 'primevue/button';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 
 const props = defineProps<{
 	items: {
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
index 0b60835ab9..1d18e3a803 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
@@ -13,7 +13,7 @@
 		</header>
 		<main>
 			<span class="expression">
-				<tera-input
+				<tera-input-text
 					label="Expression"
 					:model-value="getInitialExpression(modelConfiguration, initialId)"
 					@update:model-value="emit('update-expression', { id: initialId, value: $event })"
@@ -23,7 +23,7 @@
 			<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
 		</main>
 		<footer v-if="sourceOpen">
-			<tera-input
+			<tera-input-text
 				placeholder="Add a source"
 				:model-value="getInitialSource(modelConfiguration, initialId)"
 				@update:model-value="emit('update-source', { id: initialId, value: $event })"
@@ -47,7 +47,7 @@
 import { DistributionType } from '@/services/distribution';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getInitialExpression, getInitialSource, getOtherValues } from '@/services/model-configurations';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraInitialOtherValueModal from '@/components/model/petrinet/tera-initial-other-value-modal.vue';
 import { computed, ref } from 'vue';
 import Button from 'primevue/button';
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
index d3abcc898a..b9afc36466 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
@@ -60,7 +60,7 @@
 					</Column>
 					<Column :colspan="2">
 						<template #footer>
-							<tera-input
+							<tera-input-text
 								placeholder="Add a source"
 								v-model="customSource"
 								@update:modelValue="onCustomSelectionChange"
@@ -71,8 +71,7 @@
 						<template #footer>
 							<section class="inline-flex gap-1">
 								<span class="custom-input-label">Constant</span>
-								<tera-input
-									type="nist"
+								<tera-input-number
 									placeholder="Constant"
 									v-model="customConstant"
 									@update:modelValue="onCustomSelectionChange"
@@ -92,7 +91,8 @@
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { DistributionType } from '@/services/distribution';
 import { ref } from 'vue';
 import Button from 'primevue/button';
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
index f8be893afe..c6585ea833 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
@@ -3,7 +3,7 @@
 		<AccordionTab>
 			<template #header>
 				Initials <span class="artifact-amount">({{ numInitials }})</span>
-				<tera-input v-model="filterText" placeholder="Filter" />
+				<tera-input-text v-model="filterText" placeholder="Filter" />
 			</template>
 
 			<ul>
@@ -73,7 +73,7 @@ import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
 import Divider from 'primevue/divider';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';
 import TeraInitialEntry from './tera-initial-entry.vue';
 
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
index d78c225b7f..d025505b77 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
@@ -33,10 +33,9 @@
 				/>
 
 				<!-- Constant -->
-				<tera-input
+				<tera-input-number
 					v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
 					label="Constant"
-					type="nist"
 					:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
 					@update:model-value="
 						emit('update-parameter', {
@@ -47,9 +46,8 @@
 				/>
 				<!-- Uniform Distribution -->
 				<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
-					<tera-input
+					<tera-input-number
 						label="Min"
-						type="nist"
 						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
 						@update:model-value="
 							emit('update-parameter', {
@@ -58,9 +56,8 @@
 							})
 						"
 					/>
-					<tera-input
+					<tera-input-number
 						label="Max"
-						type="nist"
 						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
 						@update:model-value="
 							emit('update-parameter', {
@@ -77,7 +74,7 @@
 			</section>
 		</main>
 		<footer v-if="isSourceOpen" class="mb-2">
-			<tera-input
+			<tera-input-text
 				placeholder="Add a source"
 				:model-value="getParameterSource(modelConfiguration, parameterId)"
 				@update:model-value="emit('update-source', { id: parameterId, value: $event })"
@@ -98,7 +95,8 @@
 <script setup lang="ts">
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { computed, ref } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-other-value-modal.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-other-value-modal.vue
index 52329eac03..0f48afd965 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-other-value-modal.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-other-value-modal.vue
@@ -82,7 +82,7 @@
 						</Column>
 						<Column :colspan="2">
 							<template #footer>
-								<tera-input
+								<tera-input-text
 									placeholder="Add a source"
 									v-model="customSource"
 									@update:modelValue="onCustomSelectionChange"
@@ -96,8 +96,7 @@
 						</Column>
 						<Column>
 							<template #footer v-if="numberType === numberOptions[0]">
-								<tera-input
-									type="nist"
+								<tera-input-number
 									placeholder="Constant"
 									v-model="customConstant"
 									@update:modelValue="onCustomSelectionChange"
@@ -106,22 +105,12 @@
 						</Column>
 						<Column>
 							<template #footer v-if="numberType === numberOptions[1]">
-								<tera-input
-									type="nist"
-									placeholder="Min"
-									v-model="customMin"
-									@update:modelValue="onCustomSelectionChange"
-								/>
+								<tera-input-number placeholder="Min" v-model="customMin" @update:modelValue="onCustomSelectionChange" />
 							</template>
 						</Column>
 						<Column>
 							<template #footer v-if="numberType === numberOptions[1]">
-								<tera-input
-									type="nist"
-									placeholder="Max"
-									v-model="customMax"
-									@update:modelValue="onCustomSelectionChange"
-								/>
+								<tera-input-number placeholder="Max" v-model="customMax" @update:modelValue="onCustomSelectionChange" />
 							</template>
 						</Column>
 					</Row>
@@ -141,7 +130,8 @@ import { extent } from 'd3';
 import { DistributionType } from '@/services/distribution';
 import { SemanticOtherValues } from '@/services/model-configurations';
 import Dropdown from 'primevue/dropdown';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { ref } from 'vue';
 import Button from 'primevue/button';
 import TeraModal from '@/components/widgets/tera-modal.vue';
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
index fdd554db5c..8e6996b5dd 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
@@ -14,7 +14,7 @@
 					@click.stop="onAddUncertainty"
 					class="mr-2"
 				/>
-				<tera-input v-model="filterText" placeholder="Filter" />
+				<tera-input-text v-model="filterText" placeholder="Filter" />
 			</template>
 
 			<!-- Adding uncertainty header -->
@@ -142,7 +142,7 @@ import { DistributionType, DistributionTypeLabel, distributionTypeOptions } from
 import InputNumber from 'primevue/inputnumber';
 import Dropdown from 'primevue/dropdown';
 import Checkbox from 'primevue/checkbox';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraParameterEntry from './tera-parameter-entry.vue';
 import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';
 
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
new file mode 100644
index 0000000000..f86d4d54aa
--- /dev/null
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -0,0 +1,108 @@
+<template>
+	<div class="tera-input" :label="label" :title="title">
+		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
+		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
+			<i v-if="icon" :class="icon" />
+			<input
+				@click.stop
+				ref="inputField"
+				:disabled="getDisabled"
+				:value="displayValue()"
+				@input="updateValue"
+				:style="inputStyle"
+				@blur="onBlur"
+				@focus="isFocused = true"
+				@focusout="$emit('focusout', $event)"
+				type="text"
+				:placeholder="placeholder"
+			/>
+		</main>
+	</div>
+	<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
+</template>
+
+<script setup lang="ts">
+import { numberToNist } from '@/utils/number';
+import { isNaN, toNumber } from 'lodash';
+import { CSSProperties, computed, ref, watch } from 'vue';
+
+const props = defineProps<{
+	modelValue: number | undefined;
+	label?: string;
+	title?: string;
+	icon?: string;
+	errorMessage?: string;
+	disabled?: boolean;
+	placeholder?: string;
+	autoWidth?: boolean;
+}>();
+const emit = defineEmits(['update:model-value', 'focusout']);
+const inputField = ref<HTMLInputElement | null>(null);
+const error = ref('');
+const maskedValue = ref('');
+const isFocused = ref(false);
+const getDisabled = props.disabled ?? false;
+const focusInput = () => {
+	inputField.value?.focus();
+};
+// Computed property to dynamically adjust the input's style based on the autoWidth prop
+const inputStyle = computed(() => {
+	const style: CSSProperties = {};
+	const value = displayValue()?.toString();
+	if (props.autoWidth) {
+		const textToMeasure = value || props.placeholder;
+		// Estimate the width based on the length of the text to measure.
+		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
+		style.width = `${width}px`; // Dynamically set the width
+		style['min-width'] = '20px'; // Ensure a minimum width
+	}
+	return style; // Return the combined style object
+});
+const getErrorMessage = computed(() => props.errorMessage || error.value);
+
+const updateValue = (event: Event) => {
+	const value = (event.target as HTMLInputElement).value;
+	maskedValue.value = value;
+	const numValue = toNumber(value);
+	error.value = isNaN(numValue) ? 'Invalid number' : '';
+};
+
+function displayValue() {
+	// only format value if input is focused
+	if (isFocused.value) {
+		return maskedValue.value;
+	}
+	return formatValue(maskedValue.value);
+}
+
+function formatValue(value: string | undefined) {
+	// format as number if value is a number
+	if (!getErrorMessage.value) {
+		return numberToNist(value?.toString() ?? '');
+	}
+	return value;
+}
+
+const onBlur = () => {
+	const numValue = toNumber(maskedValue.value);
+	if (!getErrorMessage.value && !isNaN(numValue)) {
+		emit('update:model-value', maskedValue.value === '' ? Number.NaN : numValue);
+	}
+	isFocused.value = false;
+};
+
+watch(
+	() => props.modelValue,
+	(newValue) => {
+		if (isNaN(newValue)) return;
+		maskedValue.value = newValue?.toString() ?? '';
+	},
+	{ immediate: true }
+);
+</script>
+
+<style scoped>
+input {
+	text-align: right;
+}
+</style>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
new file mode 100644
index 0000000000..7bbec5fab2
--- /dev/null
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="tera-input" :label="label" :title="title">
+		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
+		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
+			<i v-if="icon" :class="icon" />
+			<input
+				ref="inputField"
+				:disabled="getDisabled"
+				:placeholder="placeholder"
+				:style="inputStyle"
+				type="text"
+				:value="displayValue()"
+				@click.stop
+				@focus="isFocused = true"
+				@focusout="$emit('focusout', $event)"
+				@blur="onBlur"
+				@input="updateValue"
+			/>
+		</main>
+	</div>
+	<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
+</template>
+
+<script setup lang="ts">
+import { numberToNist } from '@/utils/number';
+import { isString, toNumber, isNaN } from 'lodash';
+import { CSSProperties, computed, ref } from 'vue';
+
+const props = defineProps<{
+	modelValue: string | undefined;
+	label?: string;
+	title?: string;
+	icon?: string;
+	errorMessage?: string;
+	disabled?: boolean;
+	placeholder?: string;
+	autoWidth?: boolean;
+}>();
+
+const emit = defineEmits(['update:model-value', 'focusout']);
+const inputField = ref<HTMLInputElement | null>(null);
+const getDisabled = props.disabled ?? false;
+const isFocused = ref(false);
+
+const focusInput = () => {
+	inputField.value?.focus();
+};
+
+// Computed property to dynamically adjust the input's style based on the autoWidth prop
+const inputStyle = computed(() => {
+	const style: CSSProperties = {};
+	const value = displayValue()?.toString();
+	if (props.autoWidth) {
+		const textToMeasure = value || props.placeholder;
+		// Estimate the width based on the length of the text to measure.
+		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
+		style.width = `${width}px`; // Dynamically set the width
+		style['min-width'] = '20px'; // Ensure a minimum width
+	}
+
+	return style; // Return the combined style object
+});
+
+const getErrorMessage = computed(() => props.errorMessage);
+
+function displayValue() {
+	// only format value if input is focused
+	if (isFocused.value) {
+		return props.modelValue;
+	}
+	return formatValue(props.modelValue);
+}
+
+function formatValue(value: string | number | undefined) {
+	// format as number if value is a number
+	if (isString(value) && !isNaN(toNumber(value))) {
+		return numberToNist(value?.toString() ?? '');
+	}
+	return value;
+}
+
+const updateValue = (event: Event) => {
+	const target = event.target as HTMLInputElement;
+	const value = target.value;
+
+	console.log(value);
+	emit('update:model-value', value);
+};
+
+const onBlur = () => {
+	isFocused.value = false;
+};
+</script>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input.vue b/packages/client/hmi-client/src/components/widgets/tera-input.vue
deleted file mode 100644
index 1304ef82a4..0000000000
--- a/packages/client/hmi-client/src/components/widgets/tera-input.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-	<div class="flex" :label="label" :title="title">
-		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
-		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
-			<i v-if="icon" :class="icon" />
-			<input
-				ref="inputField"
-				:disabled="getDisabled"
-				:placeholder="placeholder"
-				:style="inputStyle"
-				:type="getType"
-				:value="getValue()"
-				@blur="unmask"
-				@click.stop
-				@focusout="$emit('focusout', $event)"
-				@input="updateValue"
-			/>
-		</main>
-	</div>
-	<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
-</template>
-
-<script setup lang="ts">
-import { isString } from 'lodash';
-import { nistToNumber, nistToString, numberToNist, scrubAndParse } from '@/utils/number';
-import { CSSProperties, InputTypeHTMLAttribute, computed, onMounted, ref, watch } from 'vue';
-
-const props = defineProps<{
-	modelValue: string | number | undefined;
-	label?: string;
-	title?: string;
-	icon?: string;
-	errorMessage?: string;
-	disabled?: boolean;
-	type?: InputTypeHTMLAttribute | 'nist';
-	placeholder?: string;
-	autoWidth?: boolean;
-}>();
-
-const emit = defineEmits(['update:model-value', 'focusout']);
-const inputField = ref<HTMLInputElement | null>(null);
-const error = ref('');
-const maskedValue = ref('');
-
-const isNistType = props.type === 'nist';
-const getType = isNistType ? 'text' : props.type;
-const getDisabled = props.disabled ?? false;
-
-const focusInput = () => {
-	inputField.value?.focus();
-};
-
-// Computed property to dynamically adjust the input's style based on the autoWidth prop
-const inputStyle = computed(() => {
-	const style: CSSProperties = {
-		'text-align': props.type === 'number' || props.type === 'nist' ? 'right' : 'left' // Set textAlign based on type
-	};
-
-	if (props.autoWidth) {
-		const textToMeasure = maskedValue.value?.length > 0 ? maskedValue.value : props.placeholder;
-		// Estimate the width based on the length of the value. Adjust the multiplier as needed for your font.
-		// Use the length of the text to measure as the width in ch units
-		// Estimate the width based on the length of the text to measure. Adjust the multiplier as needed for your font.
-		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
-		style.width = `${width}px`; // Dynamically set the width
-		style['min-width'] = '20px'; // Ensure a minimum width
-	}
-
-	return style; // Return the combined style object
-});
-
-const getErrorMessage = computed(() => props.errorMessage || error.value);
-
-// If the input is a string composed only of digits, display as NIST number
-function isTextContainingOnlyDigits(value: string | number | undefined): boolean {
-	return isString(value) && /^\d+(\s\d+)?$/.test(value);
-}
-
-function getValue() {
-	if (isNistType || isTextContainingOnlyDigits(props.modelValue)) return maskedValue.value;
-	return props.modelValue;
-}
-
-const updateValue = (event: Event) => {
-	const target = event.target as HTMLInputElement;
-	const value = target.value;
-
-	if (isNistType) {
-		maskedValue.value = value;
-		if (scrubAndParse(maskedValue.value)) {
-			// update the model value only when the value is a valid nist
-			error.value = '';
-			maskedValue.value = numberToNist(maskedValue.value);
-		} else {
-			error.value = 'Invalid number';
-		}
-	} else if (isTextContainingOnlyDigits(value)) {
-		maskedValue.value = numberToNist(value);
-	} else if (props.type === 'number') {
-		emit('update:model-value', parseFloat(value));
-	} else {
-		emit('update:model-value', value);
-	}
-};
-
-watch(
-	() => props.modelValue,
-	(newValue) => {
-		if (isNistType || isTextContainingOnlyDigits(newValue)) {
-			maskedValue.value = numberToNist(newValue?.toString() ?? '');
-		}
-	}
-);
-
-onMounted(() => {
-	if (isNistType || isTextContainingOnlyDigits(props.modelValue)) {
-		maskedValue.value = numberToNist(props.modelValue?.toString() ?? '');
-	}
-});
-
-const unmask = () => {
-	// convert back to a number when finished
-	if (isNistType && !getErrorMessage.value) {
-		emit('update:model-value', nistToNumber(maskedValue.value));
-	}
-
-	if (isTextContainingOnlyDigits(maskedValue.value)) {
-		emit('update:model-value', nistToString(maskedValue.value));
-	}
-};
-</script>
-
-<style scoped>
-main {
-	display: flex;
-	flex: 1 1 0;
-	justify-content: space-between;
-	align-items: center;
-	padding: var(--gap-1) var(--gap-2);
-	background-color: var(--surface-section);
-	border: 1px solid var(--surface-border-alt);
-	border-radius: var(--border-radius);
-	cursor: text;
-	transition: border-color 0.3s ease-in-out;
-	font-family: var(--font-family), sans-serif;
-
-	&:has(*:disabled) {
-		opacity: 0.5;
-	}
-
-	&:has(*:focus) {
-		border-color: var(--primary-color);
-	}
-	&.error {
-		border-color: var(--error-border-color);
-	}
-
-	& > i {
-		margin-right: var(--gap-1);
-	}
-
-	& > input {
-		min-width: 0;
-	}
-}
-
-label {
-	background: none;
-	color: var(--text-color-secondary);
-	cursor: text;
-	padding-right: var(--gap-1-5);
-	font-size: var(--font-caption);
-}
-
-input {
-	font-family: var(--font-family), sans-serif;
-	font-feature-settings: 'tnum';
-	flex-grow: 1;
-	border: none;
-	background: none;
-	&::-webkit-inner-spin-button,
-	&::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-}
-
-aside {
-	color: var(--error-message-color);
-	font-size: var(--font-caption);
-	word-wrap: break-word;
-	display: flex;
-	align-items: center;
-	i {
-		margin-right: var(--gap-2);
-	}
-}
-
-label {
-	align-self: center;
-}
-</style>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-toggleable-edit.vue b/packages/client/hmi-client/src/components/widgets/tera-toggleable-edit.vue
index ff1062efb0..e9f4ada44c 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-toggleable-edit.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-toggleable-edit.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex align-items-center">
 		<template v-if="isEditing">
-			<tera-input v-model="newValue" />
+			<tera-input-text v-model="newValue" />
 			<Button text icon="pi pi-times" @click="onCancel" />
 			<Button text icon="pi pi-check" @click="onConfirm" />
 		</template>
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Button from 'primevue/button';
-import TeraInput from './tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 3d3f8172f3..36f6e19f92 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -140,15 +140,15 @@
 						</div>
 						<div class="label-and-input">
 							<label>Inference algorithm</label>
-							<tera-input disabled model-value="SVI" />
+							<tera-input-text disabled model-value="SVI" />
 						</div>
 						<div class="label-and-input">
 							<label>Loss function</label>
-							<tera-input disabled model-value="ELBO" />
+							<tera-input-text disabled model-value="ELBO" />
 						</div>
 						<div class="label-and-input">
 							<label>Optimizer method</label>
-							<tera-input disabled model-value="ADAM" />
+							<tera-input-text disabled model-value="ADAM" />
 						</div>
 					</div>
 				</section>
@@ -245,7 +245,7 @@ import { createForecastChart } from '@/services/charts';
 import VegaChart from '@/components/widgets/VegaChart.vue';
 import TeraChartControl from '@/components/workflow/tera-chart-control.vue';
 import { CiemssPresetTypes, DrilldownTabs } from '@/types/common';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import type { CalibrationOperationStateCiemss } from './calibrate-operation';
 import { renameFnGenerator, mergeResults } from './calibrate-utils';
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-ciemss.vue
index c340b000f9..292c78c091 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-ciemss.vue
@@ -29,7 +29,7 @@
 												{{ id }}
 											</td>
 											<td>
-												<tera-input v-model="knobs.ensembleConfigs[i].weight" type="number" />
+												<tera-input-number v-model="knobs.ensembleConfigs[i].weight" />
 											</td>
 										</tr>
 									</tbody>
@@ -179,7 +179,7 @@ import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import AccordionTab from 'primevue/accordiontab';
 import Accordion from 'primevue/accordion';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import Dropdown from 'primevue/dropdown';
 import { useProjects } from '@/composables/project';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
index 20f6f93cd0..272ec68221 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
@@ -92,12 +92,12 @@
 
 			<div class="input-container">
 				<label for="input3" class="label label-padding">Lower bound</label>
-				<tera-input type="number" v-model="lowerBound" @update:model-value="updateChanges()" />
+				<tera-input-number v-model="lowerBound" @update:model-value="updateChanges()" />
 			</div>
 
 			<div class="input-container">
 				<label for="input4" class="label label-padding">Upper bound</label>
-				<tera-input type="number" v-model="upperBound" @update:model-value="updateChanges()" />
+				<tera-input-number v-model="upperBound" @update:model-value="updateChanges()" />
 			</div>
 		</div>
 	</div>
@@ -111,7 +111,7 @@ import MultiSelect from 'primevue/multiselect';
 import Dropdown from 'primevue/dropdown';
 import RadioButton from 'primevue/radiobutton';
 import { ConstraintGroup } from '@/components/workflow/ops/funman/funman-operation';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 
 const props = defineProps<{
 	modelStates: string[];
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
index c4ce2e5553..0be0599f82 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
@@ -43,7 +43,7 @@
 						<div class="button-column">
 							<label>Tolerance</label>
 							<div class="input-tolerance fadein animation-ease-in-out animation-duration-350">
-								<tera-input type="nist" v-model="knobs.tolerance" />
+								<tera-input-number v-model="knobs.tolerance" />
 								<Slider v-model="knobs.tolerance" :min="0" :max="1" :step="0.01" class="w-full mr-2" />
 							</div>
 						</div>
@@ -147,7 +147,7 @@ import _, { floor } from 'lodash';
 import { computed, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import InputNumber from 'primevue/inputnumber';
 import Slider from 'primevue/slider';
 import MultiSelect from 'primevue/multiselect';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue
index c088256806..05c94600a1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue
@@ -50,16 +50,14 @@
 					to
 					<template v-if="intervention.staticInterventions.length > 1">...</template>
 					<template v-else-if="intervention.staticInterventions.length === 1">
-						<tera-input
-							type="nist"
+						<tera-input-number
 							auto-width
 							:model-value="intervention.staticInterventions[0].value"
 							@update:model-value="(val) => onUpdateValue(val, 0)"
 							placeholder="value"
 						/>
 						starting at
-						<tera-input
-							type="nist"
+						<tera-input-number
 							auto-width
 							:model-value="intervention.staticInterventions[0].timestep"
 							@update:model-value="(val) => onUpdateThreshold(val, 0)"
@@ -71,16 +69,14 @@
 					<ul v-if="intervention.staticInterventions.length > 1" class="w-full">
 						<li v-for="(i, index) in intervention.staticInterventions" class="flex-1" :key="index">
 							<div class="flex align-items-center pt-2 pb-2 gap-2">
-								<tera-input
-									type="nist"
+								<tera-input-number
 									auto-width
 									:model-value="i.value"
 									@update:model-value="(val) => onUpdateValue(val, index)"
 									placeholder="value"
 								/>
 								starting at
-								<tera-input
-									type="nist"
+								<tera-input-number
 									auto-width
 									:model-value="i.timestep"
 									@update:model-value="(val) => onUpdateThreshold(val, index)"
@@ -97,8 +93,7 @@
 				<!-- Dynamic -->
 				<template v-else>
 					to
-					<tera-input
-						type="nist"
+					<tera-input-number
 						auto-width
 						:model-value="intervention.dynamicInterventions[0].value"
 						@update:model-value="(val) => onUpdateValue(val, 0)"
@@ -120,8 +115,7 @@
 						option-label="label"
 						option-value="value"
 					/>
-					<tera-input
-						type="nist"
+					<tera-input-number
 						auto-width
 						:model-value="intervention.dynamicInterventions[0].threshold"
 						@update:model-value="(val) => onUpdateThreshold(val, 0)"
@@ -151,7 +145,7 @@ import RadioButton from 'primevue/radiobutton';
 import { computed } from 'vue';
 import { Intervention, InterventionSemanticType } from '@/types/Types';
 import Dropdown, { DropdownChangeEvent } from 'primevue/dropdown';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { cloneDeep, uniqueId } from 'lodash';
 import Divider from 'primevue/divider';
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
index 8bbc4dd240..c993f6600a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
@@ -9,7 +9,7 @@
 			<tera-slider-panel v-model:is-open="isSidebarOpen" content-width="360px" header="Intervention policies">
 				<template #content>
 					<section>
-						<tera-input v-model="filterInterventionsText" placeholder="Filter" />
+						<tera-input-text v-model="filterInterventionsText" placeholder="Filter" />
 						<ul v-if="!isFetchingPolicies">
 							<li v-for="policy in interventionPoliciesFiltered" :key="policy.id">
 								<tera-intervention-policy-card
@@ -129,7 +129,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';
 import _, { cloneDeep, groupBy, isEmpty, isEqual } from 'lodash';
 import Button from 'primevue/button';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import { getInterventionPoliciesForModel, getModel } from '@/services/model';
 import { Intervention, InterventionPolicy, Model } from '@/types/Types';
 import { logger } from '@/utils/logger';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index ebc78bf49d..d522ddf095 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -45,7 +45,7 @@
 								></Dropdown>
 							</span>
 
-							<tera-input v-model="filterModelConfigurationsText" placeholder="Filter" />
+							<tera-input-text v-model="filterModelConfigurationsText" placeholder="Filter" />
 						</div>
 						<ul v-if="!isLoading && model?.id">
 							<li v-for="configuration in filteredModelConfigurations" :key="configuration.id">
@@ -254,7 +254,7 @@ import Message from 'primevue/message';
 import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import { useConfirm } from 'primevue/useconfirm';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import Dropdown from 'primevue/dropdown';
 import TeraToggleableEdit from '@/components/widgets/tera-toggleable-edit.vue';
 import TeraModelConfigurationItem from './tera-model-configuration-item.vue';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
index 658db64cc6..8535165d5c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
@@ -63,11 +63,11 @@
 					<div class="input-row">
 						<div class="label-and-input">
 							<label>Start time</label>
-							<tera-input disabled type="number" model-value="0" />
+							<tera-input-number disabled :model-value="0" />
 						</div>
 						<div class="label-and-input">
 							<label>End time</label>
-							<tera-input type="number" v-model="knobs.endTime" />
+							<tera-input-number v-model="knobs.endTime" />
 						</div>
 					</div>
 					<div>
@@ -100,7 +100,7 @@
 							<div class="label-and-input">
 								<label>Number of samples to simulate model</label>
 								<div>
-									<tera-input type="number" v-model="knobs.numSamples" />
+									<tera-input-number v-model="knobs.numSamples" />
 								</div>
 							</div>
 							<div class="label-and-input">
@@ -119,19 +119,19 @@
 						<div class="input-row">
 							<div class="label-and-input">
 								<label>Algorithm</label>
-								<tera-input disabled model-value="basinhopping" />
+								<tera-input-text disabled model-value="basinhopping" />
 							</div>
 							<div class="label-and-input">
 								<label>Minimizer method</label>
-								<tera-input disabled model-value="COBYLA" />
+								<tera-input-text disabled model-value="COBYLA" />
 							</div>
 							<div class="label-and-input">
 								<label>Maxiter</label>
-								<tera-input v-model="knobs.maxiter" />
+								<tera-input-number v-model="knobs.maxiter" />
 							</div>
 							<div class="label-and-input">
 								<label>Maxfeval</label>
-								<tera-input v-model="knobs.maxfeval" />
+								<tera-input-number v-model="knobs.maxfeval" />
 							</div>
 						</div>
 					</div>
@@ -311,11 +311,11 @@
 	<Dialog v-model:visible="showModelModal" modal header="Save as new model configuration" class="save-dialog w-4">
 		<div class="label-and-input">
 			<label> Model config name</label>
-			<tera-input v-model="modelConfigName" />
+			<tera-input-text v-model="modelConfigName" />
 		</div>
 		<div class="label-and-input">
 			<label> Model config description</label>
-			<tera-input v-model="modelConfigDesc" />
+			<tera-input-text v-model="modelConfigDesc" />
 		</div>
 		<Button
 			:disabled="modelConfigName === ''"
@@ -331,7 +331,7 @@ import _, { cloneDeep, Dictionary } from 'lodash';
 import { computed, onMounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
-import teraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import SelectButton from 'primevue/selectbutton';
 import Dialog from 'primevue/dialog';
 import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';
@@ -378,6 +378,7 @@ import { createSuccessCriteriaChart, createForecastChart, createInterventionChar
 import VegaChart from '@/components/widgets/VegaChart.vue';
 import MultiSelect from 'primevue/multiselect';
 import { mergeResults, renameFnGenerator } from '@/components/workflow/ops/calibrate-ciemss/calibrate-utils';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { CiemssPresetTypes, DrilldownTabs } from '@/types/common';
 import teraOptimizeCriterionGroupForm from './tera-optimize-criterion-group-form.vue';
 import TeraStaticInterventionPolicyGroup from './tera-static-intervention-policy-group.vue';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-criterion-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-criterion-group-form.vue
index f37b30fdb2..f7da3c39a4 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-criterion-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-criterion-group-form.vue
@@ -2,7 +2,7 @@
 	<div class="container">
 		<div class="form-header">
 			<div>
-				<tera-input
+				<tera-input-text
 					v-if="isEditing"
 					v-model="config.name"
 					placeholder="Criterion"
@@ -41,7 +41,7 @@
 				@update:model-value="emit('update-self', config)"
 			/>
 			a threshold of
-			<tera-input v-model="config.threshold" @update:model-value="emit('update-self', config)" />
+			<tera-input-number v-model="config.threshold" @update:model-value="emit('update-self', config)" />
 			at
 			<Dropdown
 				class="p-inputtext-sm"
@@ -55,8 +55,8 @@
 				@update:model-value="emit('update-self', config)"
 			/>
 			in
-			<tera-input v-model="config.riskTolerance" @update:model-value="emit('update-self', config)" />% of simulated
-			outcomes
+			<tera-input-number v-model="config.riskTolerance" @update:model-value="emit('update-self', config)" />% of
+			simulated outcomes
 		</div>
 		<div v-else class="section-row">
 			Ensure <b>{{ config.targetVariable }}</b> is <b>{{ config.isMinimized ? 'below' : 'above' }}</b> a threshold of
@@ -70,7 +70,8 @@
 import _ from 'lodash';
 import { ref } from 'vue';
 import Dropdown from 'primevue/dropdown';
-import teraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import InputSwitch from 'primevue/inputswitch';
 import { Criterion, ContextMethods } from './optimize-ciemss-operation';
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
index a04a13ae4a..a424dbe69a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
@@ -62,20 +62,17 @@
 				<section v-if="showNewValueOptions">
 					<h6 class="pt-4, pb-3">Intervention Value</h6>
 					<div class="input-row">
-						<tera-input
-							type="nist"
+						<tera-input-number
 							label="Lower bound"
 							v-model="knobs.lowerBoundValue"
 							@update:model-value="$emit('update-self', knobs)"
 						/>
-						<tera-input
-							type="nist"
+						<tera-input-number
 							label="Upper bound"
 							v-model="knobs.upperBoundValue"
 							@update:model-value="emit('update-self', knobs)"
 						/>
-						<tera-input
-							type="nist"
+						<tera-input-number
 							label="Initial guess"
 							v-model="knobs.initialGuessValue"
 							@update:model-value="emit('update-self', knobs)"
@@ -85,20 +82,17 @@
 				<section v-if="showStartTimeOptions">
 					<h6 class="pt-4, pb-3">Intervention Time</h6>
 					<div class="input-row">
-						<tera-input
-							type="nist"
+						<tera-input-number
 							label="Start time"
 							v-model="knobs.startTime"
 							@update:model-value="emit('update-self', knobs)"
 						/>
-						<tera-input
-							type="nist"
+						<tera-input-number
 							label="End time"
 							v-model="knobs.endTime"
 							@update:model-value="emit('update-self', knobs)"
 						/>
-						<tera-input
-							type="nist"
+						<tera-input-number
 							label="Initial guess"
 							v-model="knobs.startTimeGuess"
 							@update:model-value="emit('update-self', knobs)"
@@ -120,7 +114,7 @@
 
 <script setup lang="ts">
 import Dropdown from 'primevue/dropdown';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import InputSwitch from 'primevue/inputswitch';
 import { computed, ref } from 'vue';
 import { StaticIntervention } from '@/types/Types';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ensemble-ciemss/tera-simulate-ensemble-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ensemble-ciemss/tera-simulate-ensemble-ciemss.vue
index 73870675c2..9f1af4a25b 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ensemble-ciemss/tera-simulate-ensemble-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ensemble-ciemss/tera-simulate-ensemble-ciemss.vue
@@ -27,7 +27,7 @@
 											{{ id }}
 										</td>
 										<td>
-											<tera-input type="nist" v-model="ensembleConfigs[i].weight" />
+											<tera-input-number v-model="ensembleConfigs[i].weight" />
 										</td>
 									</tr>
 								</tbody>
@@ -192,7 +192,7 @@ import { ref, computed, watch, onMounted } from 'vue';
 import Button from 'primevue/button';
 import AccordionTab from 'primevue/accordiontab';
 import Accordion from 'primevue/accordion';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import InputText from 'primevue/inputtext';
 import Dropdown from 'primevue/dropdown';
 import InputNumber from 'primevue/inputnumber';
diff --git a/packages/client/hmi-client/src/temp/custom-input-test.vue b/packages/client/hmi-client/src/temp/custom-input-test.vue
index 4e3b86e455..504afd3b74 100644
--- a/packages/client/hmi-client/src/temp/custom-input-test.vue
+++ b/packages/client/hmi-client/src/temp/custom-input-test.vue
@@ -2,38 +2,44 @@
 	<div class="flex flex-column pl-8 gap-5">
 		<div class="w-2">
 			<label>normal input</label>
-			<tera-input v-model="teststring" label="Label" />
+			<tera-input-text v-model="teststring" label="Label" />
 		</div>
 
 		<div class="w-2">
 			<label>Error input</label>
-			<tera-input label="Label" :error-message="errormessage" v-model="errorstring" @update:model-value="onUpdate" />
+			<tera-input-text
+				label="Label"
+				:error-message="errormessage"
+				v-model="errorstring"
+				@update:model-value="onUpdate"
+			/>
 		</div>
 
 		<div class="w-2">
 			<label>Disabled input</label>
-			<tera-input label="Label" model-value="Disabled" disabled />
+			<tera-input-text label="Label" model-value="Disabled" disabled />
 		</div>
 
 		<div class="w-2">
 			<label>Number input</label>
-			<tera-input label="Label" v-model="numberstring" type="number" />
+			<tera-input-number label="Label" v-model="numberstring" />
 		</div>
 
 		<div class="w-2">
 			<label>sci input</label>
-			<tera-input v-model="scistring" label="Label" type="nist" @update:model-value="console.log(scistring)" />
+			<tera-input-number v-model="scistring" label="Label" @update:model-value="console.log(scistring)" />
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import teraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { ref } from 'vue';
 
 const teststring = ref<string>('');
-const numberstring = ref<string>('');
-const scistring = ref<string>('1234.12345');
+const numberstring = ref<number>();
+const scistring = ref<number>(1234.12345);
 const errorstring = ref<string>('Error message error message');
 const errormessage = ref<string>('Error message error message');