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 8040929a revert pull/#1314
8040929a is described below

commit 8040929ac65dace0c6fe8b81e88a66211b41f420
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Jun 13 18:06:44 2024 -0400

    revert pull/#1314
---
 .../src/main/webui/src/designer/karavan.css        |  42 +-
 .../property/property/DslPropertyField.tsx         |  35 +-
 .../property/property/KameletPropertyField.tsx     |  24 +-
 karavan-designer/src/designer/karavan.css          | 665 +++++++++++----------
 .../property/property/DslPropertyField.tsx         |  35 +-
 .../property/property/KameletPropertyField.tsx     |  24 +-
 6 files changed, 421 insertions(+), 404 deletions(-)

diff --git a/karavan-app/src/main/webui/src/designer/karavan.css 
b/karavan-app/src/main/webui/src/designer/karavan.css
index 0b2bf425..99a0392d 100644
--- a/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-app/src/main/webui/src/designer/karavan.css
@@ -146,7 +146,6 @@
     height: 160px;
 }
 
-
 .kamelets-page .kamelet-card .pf-v5-c-card__header {
     padding-top: var(--pf-v5-global--spacer--sm);
 }
@@ -189,12 +188,13 @@
     padding: 5px;
     display: flex;
     flex-direction: row;
-    justify-content:flex-end;
+    justify-content: flex-end;
 }
-.kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main{
+
+.kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main {
     display: flex;
     flex-direction: row;
-    justify-content:space-between;
+    justify-content: space-between;
 }
 
 .kamelets-page .kamelet-card .footer-labels {
@@ -320,7 +320,12 @@
     min-width: 0px;
 }
 
-.karavan .page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__link 
.pf-v5-c-tabs__item-icon {
+.karavan
+.page
+.main-tabs-wrapper
+.main-tabs
+.pf-v5-c-tabs__link
+.pf-v5-c-tabs__item-icon {
     height: 24px;
     margin-right: 0;
 }
@@ -416,8 +421,8 @@
 
 .karavan .dsl-page .graph .connections .path-incoming {
     stroke-dasharray: 5;
-    -webkit-animation: dashdraw .5s linear infinite;
-    animation: dashdraw .5s linear infinite;
+    -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;
@@ -442,15 +447,15 @@
 .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;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+    animation: dashdraw 0.5s linear infinite;
     stroke-width: 1;
     fill: transparent;
 }
 
 @keyframes dashdraw {
     0% {
-        stroke-dashoffset: 10
+        stroke-dashoffset: 10;
     }
 }
 
@@ -514,7 +519,6 @@
     margin: 0 auto 3px auto;
 }
 
-
 .element-builder:hover .add-button,
 .karavan .step-element:hover .add-element-button,
 .karavan .step-element:hover .add-button {
@@ -548,7 +552,6 @@
     overflow-wrap: anywhere;
 }
 
-
 /*Beans*/
 .karavan .rest-page .properties .bean-properties .pf-v5-c-form__group-control {
     display: flex;
@@ -616,7 +619,6 @@
     padding: 0;
 }
 
-
 .karavan .project-builder .card-header svg {
     margin-right: 6px;
 }
@@ -710,15 +712,15 @@
     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;
+    -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 32d2d269..db35ddb4 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,21 +361,22 @@ export function DslPropertyField(props: Props) {
                 <InputGroupItem isFill>
                     <TextInput ref={ref}
                                className="text-field" isRequired
-                               type={property.secret ? "password" : isNumber ? 
"number" : "text"}
+                               type={property.secret ? "password" : "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) {
-                                       propertyChanged(property.name, 
textValue ? Number(textValue):'')
+                                   if (isNumber && isNumeric((textValue))) {
+                                       propertyChanged(property.name, 
Number(textValue))
                                    } else if (!isNumber) {
                                        propertyChanged(property.name, 
textValue)
                                    }
                                }}
                                onFocus={_ => setCheckChanges(true)}
                                onChange={(_, v) => {
-                                   if (isNumber) {
+
+                                   if (isNumber && isNumeric(v)) {
                                        setTextValue(v);
                                        setCheckChanges(true);
                                    } else if (!isNumber) {
@@ -402,10 +403,10 @@ export function DslPropertyField(props: Props) {
                                        title={property.displayName}
                                        onClose={() => setShowEditor(false)}
                                        onSave={(fieldId, value1) => {
-                                 propertyChanged(property.name, value1)
-                                 setTextValue(value1);
-                                 setShowEditor(false);
-                             }}/>
+                                           propertyChanged(property.name, 
value1)
+                                           setTextValue(value1);
+                                           setShowEditor(false);
+                                       }}/>
             </InputGroupItem>}
         </InputGroup>
     }
@@ -456,10 +457,10 @@ export function DslPropertyField(props: Props) {
                                        title="Java Class"
                                        onClose={() => setShowEditor(false)}
                                        onSave={(fieldId, value1) => {
-                                 propertyChanged(fieldId, value);
-                                 InfrastructureAPI.onSaveCustomCode?.(value, 
value1);
-                                 setShowEditor(false)
-                             }}/>
+                                           propertyChanged(fieldId, value);
+                                           
InfrastructureAPI.onSaveCustomCode?.(value, value1);
+                                           setShowEditor(false)
+                                       }}/>
             </InputGroupItem>}
         </InputGroup>)
     }
@@ -499,10 +500,10 @@ export function DslPropertyField(props: Props) {
                                            title={`Expression 
(${dslLanguage?.[0]})`}
                                            onClose={() => setShowEditor(false)}
                                            onSave={(fieldId, value1) => {
-                                     propertyChanged(fieldId, value1);
-                                     setTextValue(value1);
-                                     setShowEditor(false);
-                                 }}/>
+                                               propertyChanged(fieldId, 
value1);
+                                               setTextValue(value1);
+                                               setShowEditor(false);
+                                           }}/>
                 </InputGroupItem>}
             </InputGroup>
         )
@@ -1015,4 +1016,4 @@ export function DslPropertyField(props: Props) {
             {getInfrastructureSelectorModal()}
         </div>
     )
-}
+}
\ No newline at end of file
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 f8cfd07c..c17a6e05 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,16 +218,22 @@ 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={(_) => {
-                           parametersChanged(property.id, Number(textValue))
+                       onBlur={_ => {
+                           if (isNumeric((textValue))) {
+                               parametersChanged(property.id, 
Number(textValue))
+                           }
                        }}
                        onChange={(_, v) => {
-                        setTextValue(v);
-                        setCheckChanges(true);
-                      }}
+                           if (isNumeric(v)) {
+                               setTextValue(v);
+                               setCheckChanges(true);
+                           } else {
+                               setTextValue(textValue);
+                           }
+                       }}
             />
         )
     }
diff --git a/karavan-designer/src/designer/karavan.css 
b/karavan-designer/src/designer/karavan.css
index d1e8dd1c..99a0392d 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -15,563 +15,564 @@
  * 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;
+    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;
+.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 0.5s linear infinite;
-  animation: dashdraw 0.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 0.5s linear infinite;
-  animation: dashdraw 0.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*/
@@ -581,145 +582,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;
+    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;
+    -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 32d2d269..db35ddb4 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -361,21 +361,22 @@ export function DslPropertyField(props: Props) {
                 <InputGroupItem isFill>
                     <TextInput ref={ref}
                                className="text-field" isRequired
-                               type={property.secret ? "password" : isNumber ? 
"number" : "text"}
+                               type={property.secret ? "password" : "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) {
-                                       propertyChanged(property.name, 
textValue ? Number(textValue):'')
+                                   if (isNumber && isNumeric((textValue))) {
+                                       propertyChanged(property.name, 
Number(textValue))
                                    } else if (!isNumber) {
                                        propertyChanged(property.name, 
textValue)
                                    }
                                }}
                                onFocus={_ => setCheckChanges(true)}
                                onChange={(_, v) => {
-                                   if (isNumber) {
+
+                                   if (isNumber && isNumeric(v)) {
                                        setTextValue(v);
                                        setCheckChanges(true);
                                    } else if (!isNumber) {
@@ -402,10 +403,10 @@ export function DslPropertyField(props: Props) {
                                        title={property.displayName}
                                        onClose={() => setShowEditor(false)}
                                        onSave={(fieldId, value1) => {
-                                 propertyChanged(property.name, value1)
-                                 setTextValue(value1);
-                                 setShowEditor(false);
-                             }}/>
+                                           propertyChanged(property.name, 
value1)
+                                           setTextValue(value1);
+                                           setShowEditor(false);
+                                       }}/>
             </InputGroupItem>}
         </InputGroup>
     }
@@ -456,10 +457,10 @@ export function DslPropertyField(props: Props) {
                                        title="Java Class"
                                        onClose={() => setShowEditor(false)}
                                        onSave={(fieldId, value1) => {
-                                 propertyChanged(fieldId, value);
-                                 InfrastructureAPI.onSaveCustomCode?.(value, 
value1);
-                                 setShowEditor(false)
-                             }}/>
+                                           propertyChanged(fieldId, value);
+                                           
InfrastructureAPI.onSaveCustomCode?.(value, value1);
+                                           setShowEditor(false)
+                                       }}/>
             </InputGroupItem>}
         </InputGroup>)
     }
@@ -499,10 +500,10 @@ export function DslPropertyField(props: Props) {
                                            title={`Expression 
(${dslLanguage?.[0]})`}
                                            onClose={() => setShowEditor(false)}
                                            onSave={(fieldId, value1) => {
-                                     propertyChanged(fieldId, value1);
-                                     setTextValue(value1);
-                                     setShowEditor(false);
-                                 }}/>
+                                               propertyChanged(fieldId, 
value1);
+                                               setTextValue(value1);
+                                               setShowEditor(false);
+                                           }}/>
                 </InputGroupItem>}
             </InputGroup>
         )
@@ -1015,4 +1016,4 @@ export function DslPropertyField(props: Props) {
             {getInfrastructureSelectorModal()}
         </div>
     )
-}
+}
\ No newline at end of file
diff --git 
a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx 
b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
index f8cfd07c..c17a6e05 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,16 +218,22 @@ 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={(_) => {
-                           parametersChanged(property.id, Number(textValue))
+                       onBlur={_ => {
+                           if (isNumeric((textValue))) {
+                               parametersChanged(property.id, 
Number(textValue))
+                           }
                        }}
                        onChange={(_, v) => {
-                        setTextValue(v);
-                        setCheckChanges(true);
-                      }}
+                           if (isNumeric(v)) {
+                               setTextValue(v);
+                               setCheckChanges(true);
+                           } else {
+                               setTextValue(textValue);
+                           }
+                       }}
             />
         )
     }


Reply via email to