This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git


The following commit(s) were added to refs/heads/main by this push:
     new 8d7e6f0e Fix numeric field bug: Backspace not removing last value 
(#1314)
8d7e6f0e is described below

commit 8d7e6f0e74aeb200c56bf4588ef83c1ea366eb73
Author: Praval jindal <94207665+praval...@users.noreply.github.com>
AuthorDate: Fri Jun 14 03:27:24 2024 +0530

    Fix numeric field bug: Backspace not removing last value (#1314)
    
    Resolved an issue where the backspace key was not functioning correctly
    in the numeric input field, preventing users from clearing the field.
    
    Co-authored-by: praval-jindal <praval.jin...@hpe.com>
---
 .../src/main/webui/src/designer/karavan.css        |   9 +
 .../property/property/DslPropertyField.tsx         |   9 +-
 .../property/property/KameletPropertyField.tsx     |  24 +-
 karavan-designer/src/designer/karavan.css          | 668 +++++++++++----------
 .../property/property/DslPropertyField.tsx         |   9 +-
 .../property/property/KameletPropertyField.tsx     |  24 +-
 6 files changed, 374 insertions(+), 369 deletions(-)

diff --git a/karavan-app/src/main/webui/src/designer/karavan.css 
b/karavan-app/src/main/webui/src/designer/karavan.css
index 9e5826a8..0b2bf425 100644
--- a/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-app/src/main/webui/src/designer/karavan.css
@@ -713,3 +713,12 @@
 .karavan .knowledbase-eip-section .pf-v5-c-toggle-group{
     margin:16px;
 }
+
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
\ No newline at end of file
diff --git 
a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
 
b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
index 24d22a24..32d2d269 100644
--- 
a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
+++ 
b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
@@ -361,22 +361,21 @@ export function DslPropertyField(props: Props) {
                 <InputGroupItem isFill>
                     <TextInput ref={ref}
                                className="text-field" isRequired
-                               type={property.secret ? "password" : "text"}
+                               type={property.secret ? "password" : isNumber ? 
"number" : "text"}
                                id={property.name} name={property.name}
                                value={textValue?.toString()}
                                customIcon={property.type !== 'string' ?
                                    <Text 
component={TextVariants.p}>{property.type}</Text> : undefined}
                                onBlur={_ => {
-                                   if (isNumber && isNumeric((textValue))) {
-                                       propertyChanged(property.name, 
Number(textValue))
+                                   if (isNumber) {
+                                       propertyChanged(property.name, 
textValue ? Number(textValue):'')
                                    } else if (!isNumber) {
                                        propertyChanged(property.name, 
textValue)
                                    }
                                }}
                                onFocus={_ => setCheckChanges(true)}
                                onChange={(_, v) => {
-
-                                   if (isNumber && isNumeric(v)) {
+                                   if (isNumber) {
                                        setTextValue(v);
                                        setCheckChanges(true);
                                    } else if (!isNumber) {
diff --git 
a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
 
b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
index 43c4860d..f8cfd07c 100644
--- 
a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
+++ 
b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
@@ -208,9 +208,9 @@ export function KameletPropertyField(props: Props) {
         </InputGroup>
     }
 
-    function isNumeric (num: any) {
-        return (typeof(num) === 'number' || (typeof(num) === "string" && 
num.trim() !== '')) && !isNaN(num as number);
-    }
+    // function isNumeric (num: any) {
+    //     return (typeof(num) === 'number' || (typeof(num) === "string" && 
num.trim() !== '')) && !isNaN(num as number);
+    // }
 
     function getNumberInput() {
         return (
@@ -218,22 +218,16 @@ export function KameletPropertyField(props: Props) {
                        name={id}
                        className="text-field"
                        isRequired
-                       // type='number'
+                       type='number'
                        value={textValue?.toString()}
                        customIcon={<Text 
component={TextVariants.p}>{property.type}</Text>}
-                       onBlur={_ => {
-                           if (isNumeric((textValue))) {
-                               parametersChanged(property.id, 
Number(textValue))
-                           }
+                       onBlur={(_) => {
+                           parametersChanged(property.id, Number(textValue))
                        }}
                        onChange={(_, v) => {
-                           if (isNumeric(v)) {
-                               setTextValue(v);
-                               setCheckChanges(true);
-                           } else {
-                               setTextValue(textValue);
-                           }
-                       }}
+                        setTextValue(v);
+                        setCheckChanges(true);
+                      }}
             />
         )
     }
diff --git a/karavan-designer/src/designer/karavan.css 
b/karavan-designer/src/designer/karavan.css
index 9e5826a8..d1e8dd1c 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -15,561 +15,563 @@
  * limitations under the License.
  */
 :root {
-    --pf-v5-global--FontSize--md: 14px;
+  --pf-v5-global--FontSize--md: 14px;
 }
 
 .karavan .tools-section {
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-right: 0;
-    border-bottom: 1px solid #eee;
-    background-color: white;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-right: 0;
+  border-bottom: 1px solid #eee;
+  background-color: white;
 }
 
 .karavan .tools-section .dsl-title {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .karavan .tools-section .dsl-title .title {
-    margin-right: 16px;
+  margin-right: 16px;
 }
 
 .karavan .tools-section .tools .header {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .karavan .tools-section .tools .header .labels {
-    height: fit-content;
-    margin-left: 3px;
+  height: fit-content;
+  margin-left: 3px;
 }
 
 .karavan .brand {
-    height: 36px;
+  height: 36px;
 }
 
 .karavan .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle,
 .pf-v5-c-modal-box .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
-    outline: transparent;
-    outline-offset: 0;
+  outline: transparent;
+  outline-offset: 0;
 }
 
 .karavan .header-button {
-    margin-left: var(--pf-v5-c-page__header-tools--MarginRight);
+  margin-left: var(--pf-v5-c-page__header-tools--MarginRight);
 }
 
 .karavan .page-header {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .karavan .page-header .top-toolbar .pf-v5-c-page__header-tools {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .karavan .page-header .top-toolbar {
-    width: 100%;
+  width: 100%;
 }
 
 .karavan .page-header .pf-v5-c-page__header-brand {
-    padding-right: 16px;
+  padding-right: 16px;
 }
 
 .filler {
-    width: 100%;
+  width: 100%;
 }
 
 .modal-footer {
-    width: 100%;
+  width: 100%;
 }
 
 .modal-footer .deploy-buttons .pf-v5-c-form__actions {
-    justify-content: flex-end;
-    margin-top: 16px;
+  justify-content: flex-end;
+  margin-top: 16px;
 }
 
 .modal-footer .deploy-buttons .pf-v5-c-button {
-    margin-left: 16px;
+  margin-left: 16px;
 }
 
 .action-buttons .pf-v5-c-form__actions {
-    justify-content: flex-end;
-    margin-top: 16px;
+  justify-content: flex-end;
+  margin-top: 16px;
 }
 
 .action-buttons .pf-v5-c-button {
-    margin-left: 16px;
+  margin-left: 16px;
 }
 
 .pf-v5-c-modal-box__footer .hidden {
-    display: none;
+  display: none;
 }
 
 .upload-buttons .pf-v5-c-form__actions {
-    margin-top: 20px;
-    justify-content: flex-end;
+  margin-top: 20px;
+  justify-content: flex-end;
 }
 
 /*integration page*/
 .integration-page .integration-card {
-    cursor: pointer;
-    height: 160px;
+  cursor: pointer;
+  height: 160px;
 }
 
 .integration-page .integration-card .pf-v5-c-card__header {
-    padding-right: 6px;
+  padding-right: 6px;
 }
 
 .integration-page .integration-card .icon {
-    height: 24px;
+  height: 24px;
 }
 
 .integration-page .integration-card .delete-button {
-    font-size: 17px;
-    line-height: 1;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    color: #b1b1b7;
-    visibility: hidden;
+  font-size: 17px;
+  line-height: 1;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: #b1b1b7;
+  visibility: hidden;
 }
 
 .integration-page .integration-card:hover .delete-button {
-    visibility: visible;
+  visibility: visible;
 }
 
 /*kamelets*/
 .kamelets-page .kamelet-card {
-    cursor: pointer;
-    height: 160px;
+  cursor: pointer;
+  height: 160px;
 }
 
-
 .kamelets-page .kamelet-card .pf-v5-c-card__header {
-    padding-top: var(--pf-v5-global--spacer--sm);
+  padding-top: var(--pf-v5-global--spacer--sm);
 }
 
 .kamelets-page .kamelet-card .pf-v5-c-card__header .custom {
-    margin-left: auto;
+  margin-left: auto;
 }
 
 .kamelets-page .kamelet-card .pf-v5-c-card__header .pf-v5-c-card__header-main {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .kamelets-page .kamelet-card .pf-v5-c-card__title {
-    font-size: 15px;
-    font-weight: 400;
+  font-size: 15px;
+  font-weight: 400;
 }
 
 .kamelets-page .kamelet-card .pf-v5-c-card__body {
-    overflow: hidden;
-    position: relative;
-    line-height: 1.6em;
+  overflow: hidden;
+  position: relative;
+  line-height: 1.6em;
 }
 
 .kamelets-page .kamelet-card .icon {
-    height: 24px;
-    max-width: 24px;
-    margin-top: auto;
-    margin-bottom: auto;
-    margin-right: 5px;
-    border: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+  height: 24px;
+  max-width: 24px;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 5px;
+  border: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
 .kamelets-page .kamelet-card .header-labels {
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content:flex-end;
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }
-.kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main{
-    display: flex;
-    flex-direction: row;
-    justify-content:space-between;
+.kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .kamelets-page .kamelet-card .footer-labels {
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .kamelets-page .kamelet-card .version,
 .kamelets-page .kamelet-card .support-type,
 .kamelets-page .kamelet-card .support-level {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .kamelets-page .kamelet-card .labels {
-    opacity: 0.5;
-    font-weight: 200;
+  opacity: 0.5;
+  font-weight: 200;
 }
 
 .kamelets-page .kamelet-card:hover .labels {
-    opacity: 1;
+  opacity: 1;
 }
 
 /*kamelet modal*/
 .kamelet-modal-card .pf-v5-c-card__header {
-    padding-right: 6px;
-    display: flex;
-    justify-content: space-between;
+  padding-right: 6px;
+  display: flex;
+  justify-content: space-between;
 }
 
 .kamelet-modal-card .pf-v5-c-card__title {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .kamelet-modal-card .description {
-    overflow: hidden;
-    position: relative;
-    max-width: 600px;
+  overflow: hidden;
+  position: relative;
+  max-width: 600px;
 }
 
 .kamelet-modal-card .icon {
-    height: 36px;
-    width: 36px;
-    margin-top: auto;
-    margin-bottom: auto;
-    border: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+  height: 36px;
+  width: 36px;
+  margin-top: auto;
+  margin-bottom: auto;
+  border: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
 .karavan .page {
-    height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .karavan main {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 /*DSL*/
 .karavan .dsl-page {
-    height: 100%;
+  height: 100%;
 }
 
 .karavan .dsl-page .dsl-page-columns {
-    display: block;
-    height: 100%;
-    background: #fafafa;
-    padding-bottom: 66px;
+  display: block;
+  height: 100%;
+  background: #fafafa;
+  padding-bottom: 66px;
 }
 
 .karavan .top-icon {
-    height: 24px;
+  height: 24px;
 }
 
 .karavan .designer-page {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .karavan .designer-page .project-page-section {
-    background-color: white;
+  background-color: white;
 }
 
 .karavan .page .main-tabs-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
 }
 
 .karavan .page .main-tabs-wrapper::before {
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border: solid;
-    border-width: 0 0 var(--pf-v5-global--BorderWidth--sm) 0;
-    border-bottom-color: var(--pf-v5-global--BorderColor--100);
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: solid;
+  border-width: 0 0 var(--pf-v5-global--BorderWidth--sm) 0;
+  border-bottom-color: var(--pf-v5-global--BorderColor--100);
 }
 
 .karavan .page .main-tabs-wrapper .main-tabs .top-menu-item {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .karavan .page .main-tabs-wrapper .main-tabs .top-menu-item .count {
-    background: var(--pf-v5-global--active-color--100);
-    color: white;
-    height: fit-content;
-    margin-top: auto;
-    margin-bottom: auto;
-    min-width: 0px;
+  background: var(--pf-v5-global--active-color--100);
+  color: white;
+  height: fit-content;
+  margin-top: auto;
+  margin-bottom: auto;
+  min-width: 0px;
 }
 
-.karavan .page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__link 
.pf-v5-c-tabs__item-icon {
-    height: 24px;
-    margin-right: 0;
+.karavan
+  .page
+  .main-tabs-wrapper
+  .main-tabs
+  .pf-v5-c-tabs__link
+  .pf-v5-c-tabs__item-icon {
+  height: 24px;
+  margin-right: 0;
 }
 
 .karavan .page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__item-text {
-    font-weight: bold;
-    margin-top: auto;
-    margin-bottom: auto;
-    margin-right: 6px;
+  font-weight: bold;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 6px;
 }
 
 .karavan .designer-page .page .main-tabs-wrapper .hide-log {
-    white-space: nowrap;
-    margin-right: 16px;
+  white-space: nowrap;
+  margin-right: 16px;
 }
 
 /*Properties*/
 .karavan .dsl-page .properties {
-    padding: 10px 10px 10px 10px;
-    background: transparent;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-bottom: 20px;
-    padding-bottom: 30px;
+  padding: 10px 10px 10px 10px;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding-bottom: 30px;
 }
 
 .karavan .pf-v5-c-drawer__splitter {
-    width: 2px;
-    background-color: #fcfcfc;
+  width: 2px;
+  background-color: #fcfcfc;
 }
 
 .karavan .pf-v5-c-drawer__splitter-handle {
-    display: none;
+  display: none;
 }
 
 /*Graph*/
 .karavan .dsl-page .graph {
-    display: block;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    overflow-y: auto;
+  display: block;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow-y: auto;
 }
 
 .karavan .dsl-page .flows {
-    width: 100%;
-    position: absolute;
-    padding-bottom: 66px;
+  width: 100%;
+  position: absolute;
+  padding-bottom: 66px;
 }
 
 .karavan .dsl-page .flows .add-flow {
-    margin-top: 16px;
-    display: flex;
-    justify-content: center;
-    gap: 6px;
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  gap: 6px;
 }
 
 /*connections*/
 .karavan .dsl-page .graph .connections {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: transparent;
 }
 
 .karavan .dsl-page .graph .connections .icon {
-    height: 20px;
-    width: 20px;
+  height: 20px;
+  width: 20px;
 }
 
 .karavan .dsl-page .graph .connections .arrow {
-    stroke: var(--pf-v5-global--Color--200);
-    fill: var(--pf-v5-global--Color--200);
+  stroke: var(--pf-v5-global--Color--200);
+  fill: var(--pf-v5-global--Color--200);
 }
 
 .karavan .dsl-page .graph .connections .path {
-    stroke: var(--pf-v5-global--Color--200);
-    stroke-width: 1;
-    fill: transparent;
+  stroke: var(--pf-v5-global--Color--200);
+  stroke-width: 1;
+  fill: transparent;
 }
 
 .karavan .dsl-page .graph .connections .circle-outgoing,
 .karavan .dsl-page .graph .connections .circle-incoming {
-    stroke: var(--pf-v5-global--Color--200);
-    stroke-width: 1;
-    fill: white;
+  stroke: var(--pf-v5-global--Color--200);
+  stroke-width: 1;
+  fill: white;
 }
 
 .karavan .dsl-page .graph .connections .path-incoming {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw .5s linear infinite;
-    animation: dashdraw .5s linear infinite;
-    stroke: var(--pf-v5-global--Color--200);
-    stroke-width: 1;
-    fill: transparent;
+  stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
+  animation: dashdraw 0.5s linear infinite;
+  stroke: var(--pf-v5-global--Color--200);
+  stroke-width: 1;
+  fill: transparent;
 }
 
 .karavan .dsl-page .graph .connections .path-direct {
-    stroke-dasharray: 0;
-    stroke: var(--pf-v5-global--Color--200);
-    stroke-width: 0.7;
-    stroke-opacity: 0.7;
-    fill: transparent;
+  stroke-dasharray: 0;
+  stroke: var(--pf-v5-global--Color--200);
+  stroke-width: 0.7;
+  stroke-opacity: 0.7;
+  fill: transparent;
 }
 
 .karavan .dsl-page .graph .connections .path-direct-selected {
-    stroke-dasharray: 0;
-    stroke: var(--pf-v5-global--active-color--100);
-    stroke-width: 1;
-    stroke-opacity: 1;
-    fill: transparent;
+  stroke-dasharray: 0;
+  stroke: var(--pf-v5-global--active-color--100);
+  stroke-width: 1;
+  stroke-opacity: 1;
+  fill: transparent;
 }
 
 .karavan .dsl-page .graph .connections .path-seda {
-    stroke-dasharray: 2;
-    stroke: var(--pf-v5-global--Color--200);
-    -webkit-animation: dashdraw .5s linear infinite;
-    animation: dashdraw .5s linear infinite;
-    stroke-width: 1;
-    fill: transparent;
+  stroke-dasharray: 2;
+  stroke: var(--pf-v5-global--Color--200);
+  -webkit-animation: dashdraw 0.5s linear infinite;
+  animation: dashdraw 0.5s linear infinite;
+  stroke-width: 1;
+  fill: transparent;
 }
 
 @keyframes dashdraw {
-    0% {
-        stroke-dashoffset: 10
-    }
+  0% {
+    stroke-dashoffset: 10;
+  }
 }
 
 .karavan .dsl-page .flows .step-element {
-    align-items: center;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    border-color: var(--pf-v5-global--Color--200);
-    border-radius: 42px;
-    border-width: 1px;
-    min-width: 120px;
-    padding: 3px 4px 4px 4px;
-    margin: 3px auto 0 auto;
-    position: relative;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  border-color: var(--pf-v5-global--Color--200);
+  border-radius: 42px;
+  border-width: 1px;
+  min-width: 120px;
+  padding: 3px 4px 4px 4px;
+  margin: 3px auto 0 auto;
+  position: relative;
 }
 
 .karavan {
-    --step-border-color: var(--pf-v5-global--Color--200);
-    --step-border-color-selected: var(--pf-v5-global--active-color--100);
+  --step-border-color: var(--pf-v5-global--Color--200);
+  --step-border-color-selected: var(--pf-v5-global--active-color--100);
 }
 
 .karavan .dsl-page .flows .children {
-    display: flex;
-    flex-wrap: wrap;
-    flex-wrap: nowrap;
-    gap: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  gap: 6px;
 }
 
 .karavan .dsl-page .flows .has-child {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    gap: 6px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 6px;
 }
 
 .karavan .dsl-page .flows .hidden-step {
-    display: none;
+  display: none;
 }
 
 .element-builder .add-button {
-    top: 0;
-    right: 5px;
-    font-size: 15px;
-    line-height: 1;
-    border: 0;
-    padding: 0;
-    margin: 3px auto 0 auto;
-    background: transparent;
-    color: var(--pf-v5-global--primary-color--100);
-    visibility: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    width: 16px;
+  top: 0;
+  right: 5px;
+  font-size: 15px;
+  line-height: 1;
+  border: 0;
+  padding: 0;
+  margin: 3px auto 0 auto;
+  background: transparent;
+  color: var(--pf-v5-global--primary-color--100);
+  visibility: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 16px;
 }
 
 .element-builder .add-button svg {
-    margin: 0 auto 3px auto;
+  margin: 0 auto 3px auto;
 }
 
-
 .element-builder:hover .add-button,
 .karavan .step-element:hover .add-element-button,
 .karavan .step-element:hover .add-button {
-    visibility: visible;
+  visibility: visible;
 }
 
 .dsl-gallery {
-    margin-top: 16px;
+  margin-top: 16px;
 }
 
 .move-modal {
-    width: 270px !important;
+  width: 270px !important;
 }
 
 .move-modal .pf-v5-c-modal-box__body {
-    margin-right: 0 !important;
+  margin-right: 0 !important;
 }
 
 .move-modal .pf-v5-m-plain {
-    display: none;
+  display: none;
 }
 
 .yaml-code {
-    overflow: auto;
-    height: 100%;
-    width: 100%;
-    padding-bottom: 100px;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  padding-bottom: 100px;
 }
 
 .pf-v5-c-popover__footer {
-    overflow-wrap: anywhere;
+  overflow-wrap: anywhere;
 }
 
-
 /*Beans*/
 .karavan .rest-page .properties .bean-properties .pf-v5-c-form__group-control {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .karavan .rest-page .properties .bean-property {
-    display: flex;
-    flex-direction: row;
-    gap: 3px;
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
 }
 
 .karavan .rest-page .properties .bean-property .delete-button {
-    padding: 3px;
-    color: #b1b1b7;
+  padding: 3px;
+  color: #b1b1b7;
 }
 
 /*YAML*/
 .karavan .yaml-page {
-    height: 100px;
+  height: 100px;
 }
 
 /*Exception*/
@@ -579,137 +581,145 @@
 .karavan .templates-page,
 .karavan .exception-page,
 .karavan .error-page {
-    flex: 1;
-    overflow: auto;
+  flex: 1;
+  overflow: auto;
 }
 
 .karavan .templates-page-columns,
 .karavan .exception-page-columns,
 .karavan .error-page-columns {
-    height: 100%;
-    background: #fafafa;
+  height: 100%;
+  background: #fafafa;
 }
 
 .karavan .templates-page-columns .pf-v5-c-empty-state,
 .karavan .exception-page-columns .pf-v5-c-empty-state,
 .karavan .error-page-columns .pf-v5-c-empty-state {
-    margin: auto;
-    height: 100%;
+  margin: auto;
+  height: 100%;
 }
 
 /* Help */
 .dont-show {
-    margin-right: auto;
+  margin-right: auto;
 }
 
 /* Project Tools */
 .karavan .project-builder {
-    height: 100%;
+  height: 100%;
 }
 
 .karavan .project-builder .tools-section {
-    padding-left: 10px;
-    padding-right: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .karavan .project-builder .pf-v5-c-toolbar__content {
-    padding: 0;
+  padding: 0;
 }
 
-
 .karavan .project-builder .card-header svg {
-    margin-right: 6px;
+  margin-right: 6px;
 }
 
 .karavan .project-builder .card-disabled {
-    opacity: 0.4;
+  opacity: 0.4;
 }
 
 .karavan .project-builder .pf-v5-c-form {
-    --pf-v5-c-form--GridGap: 1em;
+  --pf-v5-c-form--GridGap: 1em;
 }
 
 .karavan .project-builder .pf-v5-c-card__body {
-    --pf-v5-c-card--child--PaddingRight: 0.5em;
-    --pf-v5-c-card--child--PaddingBottom: 1em;
-    --pf-v5-c-card--child--PaddingLeft: 1em;
+  --pf-v5-c-card--child--PaddingRight: 0.5em;
+  --pf-v5-c-card--child--PaddingBottom: 1em;
+  --pf-v5-c-card--child--PaddingLeft: 1em;
 }
 
 .karavan .project-builder .pf-v5-c-card__header {
-    --pf-v5-c-card--first-child--PaddingTop: 0.5em;
+  --pf-v5-c-card--first-child--PaddingTop: 0.5em;
 }
 
 .karavan .project-builder .center {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    padding: 10px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding: 10px;
 }
 
 .karavan .project-builder .center-column {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .karavan .project-builder .footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px;
 }
 
 .karavan .project-builder .footer .progress {
-    flex-grow: 4;
+  flex-grow: 4;
 }
 
 .karavan .project-builder .footer .buttons {
-    height: 60px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 .karavan .project-builder .project-properties td {
-    padding: 0;
-    margin: 0;
+  padding: 0;
+  margin: 0;
 }
 
 .karavan .project-builder .project-properties td,
 .karavan .project-builder .project-properties tr {
-    border: none;
+  border: none;
 }
 
 .karavan .project-builder .project-properties .delete-button {
-    padding: 0 0 0 6px;
-    margin: 0;
+  padding: 0 0 0 6px;
+  margin: 0;
 }
 
 .karavan .project-builder .add-button {
-    width: fit-content;
-    margin-top: 6px;
+  width: fit-content;
+  margin-top: 6px;
 }
 
 .root .tooltip-required-field .pf-v5-c-tooltip__content {
-    text-align: start;
+  text-align: start;
 }
 
 .karavan .kamelet-section {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .karavan .kamelets-page {
-    overflow: auto;
-    flex-shrink: unset;
-    flex-grow: 1;
-    background-color: var(--pf-v5-global--BackgroundColor--light-300);
-    margin-bottom: 100px;
+  overflow: auto;
+  flex-shrink: unset;
+  flex-grow: 1;
+  background-color: var(--pf-v5-global--BackgroundColor--light-300);
+  margin-bottom: 100px;
 }
-.karavan .knowledbase-eip-section .pf-v5-c-toggle-group{
-    margin:16px;
+.karavan .knowledbase-eip-section .pf-v5-c-toggle-group {
+  margin: 16px;
 }
+
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
\ No newline at end of file
diff --git 
a/karavan-designer/src/designer/property/property/DslPropertyField.tsx 
b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
index 24d22a24..32d2d269 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -361,22 +361,21 @@ export function DslPropertyField(props: Props) {
                 <InputGroupItem isFill>
                     <TextInput ref={ref}
                                className="text-field" isRequired
-                               type={property.secret ? "password" : "text"}
+                               type={property.secret ? "password" : isNumber ? 
"number" : "text"}
                                id={property.name} name={property.name}
                                value={textValue?.toString()}
                                customIcon={property.type !== 'string' ?
                                    <Text 
component={TextVariants.p}>{property.type}</Text> : undefined}
                                onBlur={_ => {
-                                   if (isNumber && isNumeric((textValue))) {
-                                       propertyChanged(property.name, 
Number(textValue))
+                                   if (isNumber) {
+                                       propertyChanged(property.name, 
textValue ? Number(textValue):'')
                                    } else if (!isNumber) {
                                        propertyChanged(property.name, 
textValue)
                                    }
                                }}
                                onFocus={_ => setCheckChanges(true)}
                                onChange={(_, v) => {
-
-                                   if (isNumber && isNumeric(v)) {
+                                   if (isNumber) {
                                        setTextValue(v);
                                        setCheckChanges(true);
                                    } else if (!isNumber) {
diff --git 
a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx 
b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
index 43c4860d..f8cfd07c 100644
--- a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
@@ -208,9 +208,9 @@ export function KameletPropertyField(props: Props) {
         </InputGroup>
     }
 
-    function isNumeric (num: any) {
-        return (typeof(num) === 'number' || (typeof(num) === "string" && 
num.trim() !== '')) && !isNaN(num as number);
-    }
+    // function isNumeric (num: any) {
+    //     return (typeof(num) === 'number' || (typeof(num) === "string" && 
num.trim() !== '')) && !isNaN(num as number);
+    // }
 
     function getNumberInput() {
         return (
@@ -218,22 +218,16 @@ export function KameletPropertyField(props: Props) {
                        name={id}
                        className="text-field"
                        isRequired
-                       // type='number'
+                       type='number'
                        value={textValue?.toString()}
                        customIcon={<Text 
component={TextVariants.p}>{property.type}</Text>}
-                       onBlur={_ => {
-                           if (isNumeric((textValue))) {
-                               parametersChanged(property.id, 
Number(textValue))
-                           }
+                       onBlur={(_) => {
+                           parametersChanged(property.id, Number(textValue))
                        }}
                        onChange={(_, v) => {
-                           if (isNumeric(v)) {
-                               setTextValue(v);
-                               setCheckChanges(true);
-                           } else {
-                               setTextValue(textValue);
-                           }
-                       }}
+                        setTextValue(v);
+                        setCheckChanges(true);
+                      }}
             />
         )
     }

Reply via email to