@wavemaker/rn-codegen 11.15.4-rc.250 → 11.15.5-rc.253

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/select.less

@@ -6,7 +6,7 @@
 }
 
 .native-template-arrow-container {
-    background-color: var(--wm-select-arrow-button-background-color);
+    background: var(--wm-select-arrow-button-background-color);
     padding: var(--wm-select-arrow-button-padding);
     border-width: var(--wm-select-arrow-button-border-width);
     border-style: var(--wm-select-arrow-button-border-style);
@@ -15,24 +15,38 @@
 }
 
 .native-template-dropdown-modal {
-    background-color: var(--wm-select-modal-content-background-color);
+    background: var(--wm-select-modal-content-background-color);
     border-color: var(--wm-select-modal-content-border-color);
     border-radius: var(--wm-select-modal-content-border-radius);
     border-style: var(--wm-select-modal-content-border-style);
     border-width: var(--wm-select-modal-content-border-width);
+    box-shadow: var(--wm-select-modal-content-box-shadow);
 }
 
 .native-template-option-tick {
     font-size: var(--wm-select-check-icon-font-size);
     color: var(--wm-select-check-icon-color);
+    padding: var(--wm-select-check-icon-padding);
 }
 
 .native-template-option {
+    border-width: var(--wm-select-item-border-width);
+    border-color: var(--wm-select-item-border-color);
+    border-style: var(--wm-select-item-border-style);
+    padding: var(--wm-select-item-padding);
     font-size: var(--wm-select-modal-text-font-size);
     color: var(--wm-select-modal-text-color);
     font-family: var(--wm-select-modal-text-font-family);
 }
 
+.native-template-option.option-selected {
+    font-size: var(--wm-select-modal-text-font-size);
+    color: var(--wm-select-modal-text-color);
+    font-family: var(--wm-select-modal-text-font-family);
+    line-height: var(--wm-select-item-text-line-height);
+    letter-spacing: var(--wm-select-item-text-letter-spacing);
+}
+
 .native-template-arrow {
     font-size: var(--wm-select-arrow-button-icon-font-size);
     color: var(--wm-select-arrow-button-icon-color);

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/slider.less

@@ -23,7 +23,7 @@
           (var(--wm-slider-track-height, 1em) - var(--wm-slider-thumb-height)) / 2
         );
         border-radius: var(--wm-slider-thumb-border-radius);
-        background-color: var(--wm-slider-thumb-background);
+        background: var(--wm-slider-thumb-background);
         position: relative;
         z-index: 2;
       }
@@ -45,5 +45,100 @@
   
 
     }
+
+    .slider-mobile-root {
+      position: relative;
+      margin: 70px 30px 0px 30px;
+    }
+
+    .slider-mobile-track {
+      display: flex;
+      position: relative;
+      align-items: center;
+      width: 100%;
+      height: var(--wm-slider-track-height, 16px);
+      border-radius: var(--wm-slider-track-border-radius, 8px);
+      overflow: visible;
+    }
+
+    .slider-mobile-min-track {
+      height: var(--wm-slider-track-height, 16px);
+      border-radius: var(--wm-slider-track-border-radius, 8px);
+      background-color: var(--wm-slider-min-track-background, #65558F);
+    }
+
+    .slider-mobile-max-track {
+      height: var(--wm-slider-track-height, 16px);
+      border-radius: var(--wm-slider-track-border-radius, 8px);
+      background-color: var(--wm-slider-max-track-background, #E7E0EC);
+    }
+
+    .slider-mobile-disabled-active {
+      background-color: #a9a8aa;
+    }
+
+    .slider-mobile-disabled-inactive {
+      background-color: #e4e4e4;
+    }
+
+    .slider-mobile-disabled-range {
+      background-color: #a9a8aa;
+    }
+
+    .slider-mobile-thumb-wrapper {
+      position: absolute;
+      width: calc(var(--wm-slider-thumb-width, 4px) + 10px);
+      height: calc(var(--wm-slider-thumb-height, 44px) + 10px);
+      border-radius: var(--wm-slider-thumb-border-radius, 2px);
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .slider-mobile-thumb {
+      width: var(--wm-slider-thumb-width, 4px);
+      height: var(--wm-slider-thumb-height, 44px);
+      border-radius: var(--wm-slider-thumb-border-radius, 2px);
+      background-color: var(--wm-slider-thumb-background, #65558F);
+    }
+    .slider-mobile-thumb-disabled {
+      background-color: #a9a8aa;
+    }
+
+    .slider-mobile-tooltip {
+      position: absolute;
+      top: -62px;
+      width: 58px;
+      height: 44px;
+      border-radius: 100px;
+      background-color: var(--wm-slider-tooltip-background, #322F35);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transform: translateX(-50%);
+    }
+
+    .slider-mobile-tooltip-label {
+      width: 58px;
+      text-align: center;
+      font-size: 16px;
+      color: var(--wm-slider-tooltip-color, #F5EFF7);
+    }
   }
-  
+
+  
+
+  .slider-circle-thumb {
+      .slider-mobile-thumb-wrapper {
+        width: var(--wm-slider-thumb-wrapper-width);
+        height: var(--wm-slider-thumb-wrapper-height);
+        border-radius: var(--wm-slider-thumb-wrapper-border-radius);
+        background-color: var(--wm-slider-thumb-wrapper-background);
+     }
+     .slider-mobile-thumb{
+      background-color: var(--wm-slider-thumb-background);
+     }
+  }

package/src/templates/foundation-theme/wavemaker/design-tokens/tokens.light.css

@@ -112,6 +112,7 @@
   --wm-dropdown-menu-text-decoration: none;
   --wm-dropdown-menu-content-width: 220px;
   --wm-dropdown-menu-content-background: #fff;
+  --wm-dropdown-menu-item-background-color: transparent;
   --wm-dropdown-menu-border-width: 0;
   --wm-fileupload-text-align: center;
   --wm-fileupload-ripple-color: transparent;
@@ -177,8 +178,8 @@
   --wm-popover-link-width: auto;
   --wm-popover-link-min-height: auto;
   --wm-progress-bar-height: 16px;
-  --wm-progress-circle-width: 150px;
-  --wm-progress-circle-height: 150px;
+  --wm-progress-circle-progress-value-width: 16px;
+  --wm-progress-circle-progress-value-height: 16px;
   --wm-radiobutton-size: 20px;
   --wm-radiobutton-indicator-size: 16px;
   --wm-radiobutton-color: transparent;
@@ -200,6 +201,15 @@
   --wm-search-data-complete-background: transparent;
   --wm-search-item-separator-width: 0;
   --wm-select-arrow-button-icon-height: 24px;
+  --wm-select-check-icon-background-color: transparent;
+  --wm-select-check-icon-height: 24px;
+  --wm-select-check-icon-width: 24px;
+  --wm-select-check-icon-border-radius: 1px;
+  --wm-select-check-icon-border-color: transparent;
+  --wm-slider-thumb-wrapper-width: 14px;
+  --wm-slider-thumb-wrapper-height: 54px;
+  --wm-slider-thumb-wrapper-border-radius: 2px;
+  --wm-slider-thumb-wrapper-background: #fff;
   --wm-slider-tooltip-background: #000;
   --wm-spinner-background: transparent;
   --wm-spinner-width: 100%;
@@ -645,8 +655,12 @@
   --wm-dropdown-menu-padding: var(--wm-space-2) var(--wm-space-0);
   --wm-dropdown-menu-color: var(--wm-color-on-surface-variant);
   --wm-dropdown-menu-text-font-weight: var(--wm-font-weight-700);
+  --wm-dropdown-menu-text-font-size: var(--wm-body-large-font-size);
   --wm-dropdown-menu-text-padding: var(--wm-space-0) var(--wm-space-3) var(--wm-space-0) var(--wm-space-2);
   --wm-dropdown-menu-content-border-radius: var(--wm-radius-xs);
+  --wm-dropdown-menu-content-border-width: var(--wm-border-width-0);
+  --wm-dropdown-menu-content-border-style: var(--wm-border-style-solid);
+  --wm-dropdown-menu-content-border-color: var(--wm-color-on-surface-variant);
   --wm-dropdown-menu-caret-color: var(--wm-color-on-surface-variant);
   --wm-dropdown-menu-caret-size: var(--wm-icon-size-sm);
   --wm-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
@@ -654,6 +668,9 @@
   --wm-dropdown-menu-item-color: var(--wm-color-on-surface);
   --wm-dropdown-menu-item-border-style: var(--wm-border-style-solid);
   --wm-dropdown-menu-item-padding: var(--wm-space-3) var(--wm-space-4);
+  --wm-dropdown-menu-item-icon-color: var(--wm-color-on-surface-variant);
+  --wm-dropdown-menu-item-icon-padding: var(--wm-space-0);
+  --wm-dropdown-menu-item-icon-font-size: var(--wm-body-large-font-size);
   --wm-dropdown-menu-border-radius: var(--wm-radius-none);
   --wm-dropdown-menu-border-color: var(--wm-color-on-surface-variant);
   --wm-fileupload-border-color: var(--wm-color-black);
@@ -667,6 +684,8 @@
   --wm-fileupload-icon-font-size: var(--wm-body-large-font-size);
   --wm-fileupload-icon-color: var(--wm-color-primary);
   --wm-form-controls-opacity: var(--wm-border-width-1);
+  --wm-form-controls-field-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-form-controls-field-radius: var(--wm-radius-none);
   --wm-form-controls-font-size: var(--wm-body-large-font-size);
   --wm-form-controls-padding: var(--wm-space-2);
   --wm-form-controls-border-color: var(--wm-color-outline);
@@ -690,6 +709,7 @@
   --wm-form-border-radius: var(--wm-radius-sm);
   --wm-form-border-width: var(--wm-border-width-base);
   --wm-form-border-color: var(--wm-color-transparent);
+  --wm-form-box-shadow: var(--wm-elevation-shadow-none);
   --wm-form-header-padding-vertical: var(--wm-space-2);
   --wm-form-header-padding-horizontal: var(--wm-space-2);
   --wm-form-header-border-color: var(--wm-color-transparent);
@@ -1008,10 +1028,18 @@
   --wm-select-modal-content-border-radius: var(--wm-radius-base);
   --wm-select-modal-content-border-width: var(--wm-border-width-0);
   --wm-select-modal-content-border-color: var(--wm-color-outline);
+  --wm-select-modal-content-box-shadow: var(--wm-elevation-shadow-none);
   --wm-select-modal-text-font-size: var(--wm-body-large-font-size);
   --wm-select-modal-text-color: var(--wm-color-on-surface-variant);
+  --wm-select-modal-text-line-height: var(--wm-body-large-line-height);
+  --wm-select-modal-text-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-select-item-border-width: var(--wm-border-width-1);
+  --wm-select-item-border-color: var(--wm-color-shadow);
+  --wm-select-item-padding: var(--wm-space-2) var(--wm-space-4);
+  --wm-select-check-icon-border-width: var(--wm-border-width-1);
   --wm-select-check-icon-color: var(--wm-color-on-background);
   --wm-select-check-icon-font-size: var(--wm-icon-size-md);
+  --wm-select-check-icon-padding: var(--wm-space-0);
   --wm-slider-track-height: var(--wm-space-4);
   --wm-slider-track-margin-vertical: var(--wm-space-4);
   --wm-slider-track-border-radius: var(--wm-radius-lg);
@@ -1297,6 +1325,8 @@
   --wm-select-arrow-button-border-style: var(--wm-border-style-base);
   --wm-select-modal-content-border-style: var(--wm-border-style-base);
   --wm-select-modal-text-font-family: var(--wm-body-medium-font-family);
+  --wm-select-item-border-style: var(--wm-border-style-base);
+  --wm-select-check-icon-border-style: var(--wm-border-style-base);
   --wm-tabbar-box-shadow: var(--wm-elevation-shadow-1);
   --wm-tabbar-more-menu-box-shadow: var(--wm-elevation-shadow-1);
   --wm-tabbar-text-font-family: var(--wm-label-large-font-family);

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/form-controls.variant.less

@@ -18,4 +18,88 @@
   --wm-form-controls-background: var(--wm-color-surface-dim);
   --wm-form-controls-color: var(--wm-color-scrim);
   --wm-form-controls-opacity: 0.67;
+}
+
+.form-controls-filled {
+  --wm-form-controls-opacity: var(--wm-border-width-1);
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-padding: var(--wm-space-4) var(--wm-space-4) 0 var(--wm-space-4);
+  --wm-form-controls-border-color: var(--wm-color-outline);
+  --wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
+  --wm-form-controls-border-style: var(--wm-border-style-base);
+  --wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
+  --wm-form-controls-placeholder-color: var(--wm-color-on-surface-variant);
+  --wm-form-controls-background: var(--wm-color-surface-dim);
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-floating-color: var(--wm-color-on-surface-variant);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-3);
+  --wm-form-controls-label-color: var(--wm-color-on-surface-variant);
+  --wm-form-controls-label-background: var(--wm-color-transparent);
+  --wm-form-controls-label-font-size: var(--wm-label-large-font-size);
+  --wm-form-controls-label-font-weight: var(--wm-label-large-font-weight);
+  --wm-form-controls-label-font-family: var(--wm-label-large-font-family);
+  --wm-form-controls-label-margin-vertical: var(--wm-space-0);
+  --wm-form-controls-label-margin-horizontal: var(--wm-space-0);
+}
+
+.form-controls-filled.app-input-focused {
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-border-width: 0 0 var(--wm-border-width-2) 0;
+  --wm-form-controls-border-style: var(--wm-border-style-base);
+  --wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
+  --wm-form-controls-floating-color: var(--wm-color-outline);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-3);
+  --wm-form-controls-label-color: var(--wm-color-outline);
+  --wm-form-controls-padding: var(--wm-space-4) var(--wm-space-4) 0 var(--wm-space-4);
+}
+
+.form-controls-filled.app-input-disabled {
+  --wm-form-controls-border-color: var(--wm-color-shadow);
+  --wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
+  --wm-form-controls-background: var(--wm-color-surface-dim);
+  --wm-form-controls-color: var(--wm-color-scrim);
+  --wm-form-controls-opacity: 0.67;
+}
+
+.form-controls-outlined {
+  --wm-form-controls-opacity: 1;
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-font-size: var(--wm-body-large-font-size);
+  --wm-form-controls-font-weight: var(--wm-body-large-font-weight);
+  --wm-form-controls-font-family: var(--wm-body-large-font-family);
+  --wm-form-controls-padding: var(--wm-space-4);
+  --wm-form-controls-border: var(--wm-border-width-1);
+  --wm-form-controls-placeholder-color: var(--wm-color-on-surface);
+  --wm-form-controls-background: var(--wm-color-white);
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-label-color: var(--wm-color-on-surface);
+  --wm-form-controls-label-background: var(--wm-color-transparent);
+  --wm-form-controls-floating-color: var(--wm-color-surface-dim);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-4);
+}
+
+.form-controls-outlined.app-input-focused {
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-border-color: var(--wm-color-secondary);
+  --wm-form-controls-border-width: var(--wm-border-width-1);
+  --wm-form-controls-padding: var(--wm-space-4);
+  --wm-form-controls-background: var(--wm-color-white);
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-floating-color: var(--wm-color-primary);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-4);
+}
+
+.form-controls-outlined.app-input-disabled {
+  --wm-form-controls-border: 1px solid var(--wm-color-shadow);
+  --wm-form-controls-background: var(--wm-color-white);
+  --wm-form-controls-color: var(--wm-color-scrim);
+  --wm-form-controls-opacity: 0.67;
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/select.variant.less

@@ -0,0 +1,8 @@
+.app-select-active-item,
+.app-select-active-item-text {
+  --wm-select-modal-text-color: var(--wm-color-primary);
+  --wm-select-modal-text-font-size: var(--wm-body-large-font-size);
+  --wm-select-modal-text-font-family: var(--wm-body-medium-font-family);
+  --wm-select-modal-text-line-height: var(--wm-body-large-line-height);
+  --wm-select-modal-text-letter-spacing: var(--wm-body-large-letter-spacing);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/slider.variant.less

@@ -0,0 +1,18 @@
+.app-slider {
+  --wm-slider-thumb-background: var(--wm-color-surface-tint);
+  --wm-slider-thumb-height: var(--wm-space-8);
+  --wm-slider-thumb-width: var(--wm-space-1);
+  --wm-slider-thumb-border-radius: var(--wm-radius-xs);
+  --wm-slider-thumb-wrapper-width: 14px;
+  --wm-slider-thumb-wrapper-height: 54px;
+  --wm-slider-thumb-wrapper-border-radius: 2px;
+  --wm-slider-thumb-wrapper-background: #fff;
+}
+
+.slider-circle-thumb {
+  --wm-slider-thumb-background: var(--wm-color-transparent);
+  --wm-slider-thumb-wrapper-background: var(--wm-color-surface-tint);
+  --wm-slider-thumb-wrapper-height: 20px;
+  --wm-slider-thumb-wrapper-width: 20px;
+  --wm-slider-thumb-wrapper-border-radius: 100px;
+}

package/src/templates/package.web.json

@@ -11,9 +11,9 @@
         "postinstall": ""
     },
     "dependencies": {
-        "@wavemaker/app-rn-runtime": "11.15.4-rc.250",
-        "@wavemaker/variables": "11.15.4-rc.250",
-        "@wavemaker/rn-codegen": "11.15.4-rc.250",
+        "@wavemaker/app-rn-runtime": "11.15.5-rc.253",
+        "@wavemaker/variables": "11.15.5-rc.253",
+        "@wavemaker/rn-codegen": "11.15.5-rc.253",
         "@wavemaker/wavepulse-agent": "1.0.11",
         "expo": "54.0.12",
         "expo-build-properties": "1.0.9",

package/src/templates/project/esbuild/esbuild.script.js

@@ -446,9 +446,48 @@ class EsBuilder {
             'react-native-reanimated/plugin',
           ]
         }
-      }), resolve({
+      }), babel({
+        // Strip Flow types from React Native packages that ship Flow source
+        // (e.g. @react-native/assets-registry/registry.js).
+        filter: /node_modules\/@react-native\/.*\.(js|jsx)$/,
+        config: {
+          babelrc: false,
+          configFile: false,
+          plugins: [require.resolve('@babel/plugin-transform-flow-strip-types')]
+        }
+      }),babel({
+        filter: /node_modules\/@wavemaker\/.*\.(js|jsx)$/,
+        config: {
+          plugins: ['react-native-worklets/plugin']
+        }
+      }),resolve({
         'victory-native': 'victory'
-      })]
+      }), {
+        // Fallback resolver: if a bare specifier like `expo-asset` or
+        // `@expo/<x>` isn't installed at top-level node_modules (because
+        // npm hoisting put it under expo/node_modules/), look for it
+        // inside `node_modules/expo/node_modules/` instead.
+        name: 'expo-nested-resolver',
+        setup(build) {
+          const projectModules = path.resolve(__dirname, '../node_modules');
+          const expoNested = path.join(projectModules, 'expo/node_modules');
+          build.onResolve({ filter: /^(@expo\/|expo-)/ }, (args) => {
+            const pkg = args.path.startsWith('@')
+              ? args.path.split('/').slice(0, 2).join('/')
+              : args.path.split('/')[0];
+            // Top-level present → let esbuild resolve normally.
+            if (fs.existsSync(path.join(projectModules, pkg, 'package.json'))) {
+              return null;
+            }
+            // Top-level missing → try the nested copy under expo/.
+            try {
+              return { path: require.resolve(args.path, { paths: [expoNested] }) };
+            } catch (e) {
+              return null;
+            }
+          });
+        }
+      }]
     })
   }
 

package/src/templates/project/package.json

@@ -11,9 +11,9 @@
         "postinstall": "node ./scripts/post-build.js"
     },
     "dependencies": {
-        "@wavemaker/app-rn-runtime": "11.15.4-rc.250",
-        "@wavemaker/variables": "11.15.4-rc.250",
-        "@wavemaker/rn-codegen": "11.15.4-rc.250",
+        "@wavemaker/app-rn-runtime": "11.15.5-rc.253",
+        "@wavemaker/variables": "11.15.5-rc.253",
+        "@wavemaker/rn-codegen": "11.15.5-rc.253",
         "@wavemaker/wavepulse-agent": "1.0.11",
         "expo": "54.0.12",
         "expo-build-properties": "1.0.9",

package/src/transpile/components/data/form/form-field.transformer.js

@@ -23,9 +23,9 @@ const getStyleProps = (element) => {
 const extractField = (element, context, formElement) => {
     const widgetType = getAttribute(element, 'widget') || 'text';
     const widgetName = getAttribute(element, 'key') || getAttribute(element, 'name') || 'text' + '_formWidget';
-    return getFormWidgetTemplate(widgetType, widgetName, element, getAttribute(formElement, 'formdata'));
+    return getFormWidgetTemplate(widgetType, widgetName, element, getAttribute(formElement, 'formdata'), context);
 };
-const getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable) => {
+const getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable, context) => {
     var _a;
     widgetName = widgetName.replace('.', '_');
     // Check for horizontal layout using better naming convention
@@ -79,6 +79,27 @@ const getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable
     if (placeholder) {
         element.removeAttribute('placeholder');
     }
+    const leadingIconClass = getAttribute(element, 'leadingiconclass');
+    if (leadingIconClass !== undefined) {
+        element.removeAttribute('leadingiconclass');
+    }
+    const trailingIconClass = getAttribute(element, 'trailingiconclass');
+    if (trailingIconClass !== undefined) {
+        element.removeAttribute('trailingiconclass');
+    }
+    const variant = getAttribute(element, 'variant');
+    if (variant !== undefined) {
+        element.removeAttribute('variant');
+    }
+    const hint = getAttribute(element, 'hint');
+    if (hint !== undefined) {
+        element.removeAttribute('hint');
+    }
+    const designproperties = [
+        hint !== undefined ? `hint="${hint}"` : '',
+        leadingIconClass !== undefined ? `leadingiconclass="${leadingIconClass}"` : '',
+        trailingIconClass !== undefined ? `trailingiconclass="${trailingIconClass}"` : '',
+    ].filter(Boolean).join('\n                      ');
     const formfieldName = getAttribute(element, 'name');
     const skipscripteventtrigger = (_a = getAttribute(element, 'skipscripteventtrigger')) !== null && _a !== void 0 ? _a : false;
     // Add horizontal class to form inputs when in horizontal layout
@@ -104,18 +125,19 @@ const getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable
                       ${onKeyPress ? 'on-keypress=' + onKeyPress : ''}
                       ${onSubmitEditing ? 'on-submitediting=' + onSubmitEditing : ''}
                       skipscripteventtrigger=${skipscripteventtrigger}`;
-    var widgetMarkup = getWidgetMarkup(widgetType, widgetName, commonFields, element);
+    var widgetMarkup = getWidgetMarkup(widgetType, widgetName, commonFields, element, designproperties, context, variant);
     const formFieldTags = ['text', 'password', 'number', 'currency', 'textarea', 'date', 'time', 'datetime', 'timestamp', 'chips', 'select'];
     // * not showing label for a floating input
     if (formFieldTags.includes(widgetType) && isFloatingForm)
         return { label: null, field: (0, node_html_parser_1.parse)(widgetMarkup).firstChild };
     return { label: labelMarkup ? (0, node_html_parser_1.parse)(labelMarkup).firstChild : null, field: (0, node_html_parser_1.parse)(widgetMarkup).firstChild };
 };
-const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
+const getWidgetMarkup = (widgetType, widgetName, commonFields, element, designproperties, context, variant) => {
     let tmpl = '';
+    const variantAttr = variant !== undefined ? `variant="${variant}"` : '';
     const getDisplayExpr = element.getAttribute('displayexpression') || element.getAttribute('displaylabel');
     const displayExp = getDisplayExpr ? `displayexpression='${getDisplayExpr}'` : '';
-    const formFieldTags = ['text', 'password', 'number', 'currency', 'textarea'];
+    const formFieldTags = ['text', 'password', 'number', 'currency', 'textarea', 'date', 'time', 'datetime', 'timestamp'];
     let currentNode = element.parentNode;
     while (currentNode) {
         if (currentNode.rawTagName === 'wm-form' || currentNode.rawTagName === 'wm-liveform' || currentNode.getAttribute('type') === "dynamic") {
@@ -154,12 +176,17 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
         case 'password':
             let inputtype = widgetType === 'password' ? 'password' : getAttribute(element, 'inputtype');
             inputtype = inputtype ? `type=${inputtype}` : '';
+            const textDesignProperties = (widgetType === 'text' || widgetType === 'password') && designproperties
+                ? `${designproperties}\n                `
+                : '';
             tmpl = `<wm-text ${inputtype} ${commonFields} 
                 updateon="bind:$formField.updateon || 'blur'"
                 maxchars="bind:$formField.maxchars"
                 ${getStyleProps(element)}
                 showskeleton=${getAttribute(element, 'showtextskeleton') === 'false' ? "false" : "undefined"}
                 ${floatinglabel}
+                ${variantAttr}
+                ${textDesignProperties}
                 ></wm-text>`;
             break;
         case 'textarea':
@@ -174,7 +201,8 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 maxchars="bind:$formField.maxchars"
                 ${helpTextAttr}
                 ${floatinglabel}
-                ${getStyleProps(element)} 
+                ${variantAttr}
+                ${getStyleProps(element)}
               ></wm-textarea>`;
             break;
         case 'number':
@@ -183,7 +211,8 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 minvalue="bind:$formField.minvalue"
                 maxvalue="bind:$formField.maxvalue"
                 displayValue="bind:$formField.displayValue"
-                ${floatinglabel}>
+                ${floatinglabel}
+                ${variantAttr}>
                 ${getStyleProps(element)}
               </wm-number>`;
             break;
@@ -192,7 +221,8 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                   updateon="bind:$formField.updateon || 'blur'"
                   minvalue="bind:$formField.minvalue"
                   maxvalue="bind:$formField.maxvalue"
-                  ${floatinglabel}>
+                  ${floatinglabel}
+                  ${variantAttr}>
                   ${getStyleProps(element)}
                 </wm-currency>`;
             break;
@@ -201,8 +231,9 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 dataset="bind:$formField.dataset"
                 displayfield="bind:$formField.displayfield"
                 datafield="bind:$formField.datafield"
+                ${floatinglabel}
+                ${variantAttr}
                 ${getStyleProps(element)}
-                 ${floatinglabel}
               ></wm-select>`;
             break;
         case 'autocomplete':
@@ -216,6 +247,7 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 displayfield="bind:$formField.displaylabel"
                 datafield="bind:$formField.datafield"
                 ${getStyleProps(element)}
+                ${variantAttr}
                 ></wm-search>`;
             break;
         case 'chips':
@@ -228,6 +260,7 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 displayfield="bind:$formField.displayfield"
                 datafield="bind:$formField.datafield"
                 ${floatinglabel}
+                ${variantAttr}
                 ></wm-chips>`;
             break;
         case 'checkbox':
@@ -275,6 +308,7 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ${dateconfirmationtitle}
                 ${datecanceltitle}
                 ${floatinglabel}
+                ${variantAttr}
                 ></wm-date>`;
             break;
         case 'datetime':
@@ -291,6 +325,7 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ${timeconfirmationtitle}
                 ${timecanceltitle}
                 ${floatinglabel}
+                ${variantAttr}
                 ></wm-datetime>`;
             break;
         case 'time':
@@ -301,6 +336,7 @@ const getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ${timeconfirmationtitle}
                 ${timecanceltitle}
                 ${floatinglabel}
+                ${variantAttr}
                 ></wm-time>`;
             break;
         case 'slider':