@wavemaker/rn-codegen 11.15.1-rc.248 → 11.15.2-rc.249

package/src/templates/foundation-theme/wavemaker/components/input/calendar.less

@@ -51,6 +51,12 @@ To style the week day text of calendar widget.
 }
 
 
+.app-calendar-day-wrapper {
+    background-color: @calendarBgColor;
+    color: @calendarDateColor;
+}
+
+
 /**********************************************************************************
 To style the day text of calendar widget.
 ***********************************************************************************/

package/src/templates/foundation-theme/wavemaker/components/input/currency.less

@@ -27,17 +27,33 @@ To style the label of currency widget.
 }
 
 
+.app-currency-flotaing-label {
+}
+
+
+.app-currency-active-flotaing-label {
+}
+
+
+.app-currency-inactive-floating-label {
+}
+
+
 /**********************************************************************************
-To style the floating-label in number widget.
+To style the floating-label when input has value but is not focused.
 ***********************************************************************************/
-.app-currency-flotaing-label {
+.app-currency-with-label.app-currency-inactive-floating-label {
+}
+
+
+.app-currency-inactive-floating-label {
 }
 
 
 /**********************************************************************************
-To style the floating-label when it is floating at top of number widget.
+To style the floating-label when input has value but is not focused.
 ***********************************************************************************/
-.app-currency-active-flotaing-label {
+.app-currency-with-label.app-currency-inactive-floating-label {
 }
 
 

package/src/templates/foundation-theme/wavemaker/components/input/number.less

@@ -49,6 +49,20 @@ To style the skeleton of number widget.
 }
 
 
+.app-number-inactive-floating-label {
+}
+
+
+/**********************************************************************************
+To style the floating-label when input has value but is not focused.
+***********************************************************************************/
+.app-number-with-label.app-number-inactive-floating-label {
+}
+
+
+/**********************************************************************************
+To style the floating-label when input is focused.
+***********************************************************************************/
 .app-number-with-label.app-number-active-flotaing-label {
 }
 
@@ -61,7 +75,7 @@ To style the skeleton of number widget.
 
 
 /**********************************************************************************
-To style the skeleton of lable of number widget.
+To style the skeleton of label of number widget.
 ***********************************************************************************/
 .app-number-label-skeleton {
 }

package/src/templates/foundation-theme/wavemaker/components/input/text.less

@@ -41,24 +41,93 @@ To style the outermost wrapper element of text widget when it is disabled.
 }
 
 
+.app-text-flotaing-label {
+}
+
+
+.app-text-active-flotaing-label {
+}
+
+
 /**********************************************************************************
-To style the floating-label in text widget.
+To style the floating-label when input is focused.
 ***********************************************************************************/
-.app-text-flotaing-label {
+.app-text-with-label.app-text-active-flotaing-label {
 }
 
 
 /**********************************************************************************
-To style the floating-label when it is floating at top of text widget.
+To style the floating-label when input has value but is not focused.
 ***********************************************************************************/
-.app-text-active-flotaing-label {
+.app-text-with-label.app-text-inactive-floating-label {
+}
+
+
+/**********************************************************************************
+To style the floating-label in text widget (base/empty state).
+***********************************************************************************/
+.app-text-with-label.app-text-flotaing-label {
 }
 
 
+.app-text-with-label.app-text {
+}
+
+
+/**********************************************************************************
+To style the skeleton of text widget.
+***********************************************************************************/
+.app-text-skeleton {
+}
+
+
+.app-input-invalid {
+    border-bottom-color: @inputInvalidBorderColor;
+}
+
+
+.app-invalid-focused {
+    border-color: @inputFocusBorderColor;
+}
+
+
+.app-input-disabled {
+}
+
+
+.app-input-flotaing-label {
+}
+
+
+.app-input-active-flotaing-label {
+}
+
+
+.app-input-with-label.app-input-active-flotaing-label {
+}
+
+
+.app-input-with-label.app-input-flotaing-label {
+}
+
+
+/**********************************************************************************
+To style the floating-label when input is focused.
+***********************************************************************************/
 .app-text-with-label.app-text-active-flotaing-label {
 }
 
 
+/**********************************************************************************
+To style the floating-label when input has value but is not focused.
+***********************************************************************************/
+.app-text-with-label.app-text-inactive-floating-label {
+}
+
+
+/**********************************************************************************
+To style the floating-label in text widget (base/empty state).
+***********************************************************************************/
 .app-text-with-label.app-text-flotaing-label {
 }
 

package/src/templates/foundation-theme/wavemaker/components/input/textarea.less

@@ -30,24 +30,35 @@ To style the focused state of textarea widget.
 }
 
 
-/**********************************************************************************
-To style the floating-label in text area widget.
-***********************************************************************************/
 .app-textarea-flotaing-label {
 }
 
 
+.app-textarea-active-flotaing-label {
+}
+
+
+.app-textarea-inactive-floating-label {
+}
+
+
 /**********************************************************************************
-To style the floating-label when it is floating at top of text area widget.
+To style the floating-label when input has value but is not focused.
 ***********************************************************************************/
-.app-textarea-active-flotaing-label {
+.app-textarea-with-label.app-textarea-inactive-floating-label {
 }
 
 
+/**********************************************************************************
+To style the floating-label when input is focused.
+***********************************************************************************/
 .app-textarea-with-label.app-textarea-active-flotaing-label {
 }
 
 
+/**********************************************************************************
+To style the floating-label in textarea widget (base/empty state).
+***********************************************************************************/
 .app-textarea-with-label.app-textarea-flotaing-label {
 }
 

package/src/templates/foundation-theme/wavemaker/design-tokens/advanced/carousel.less

@@ -5,9 +5,7 @@
 
 .app-carousel-slide{
     width: var(--wm-carousel-slide-width);
-    padding-left: var(--wm-carousel-slide-padding-horizontal);
-    padding-right: var(--wm-carousel-slide-padding-horizontal);
-    padding-horizontal:var(--wm-carousel-slide-padding-horizontal);
+    padding: var(--wm-carousel-slide-padding);
 }
 
 .app-carousel-first-slide {
@@ -17,8 +15,7 @@
 }
 
 .app-carousel-active-slide {
-    padding-left: var(--wm-carousel-slide-padding-horizontal);
-    padding-right: var(--wm-carousel-slide-padding-horizontal);
+    padding: var(--wm-carousel-slide-padding);
 }
 .app-carousel-prev-btn {
 }
@@ -78,8 +75,7 @@
 .app-carousel-dot-wrapper { 
     opacity: var(--wm-carousel-dots-wrapper-opacity);
     background-color: var(--wm-carousel-dots-wrapper-background-color);
-    padding-top: var(--wm-carousel-dots-wrapper-padding-top);
-    padding-bottom: var(--wm-carousel-dots-wrapper-padding-bottom);
+    padding: var(--wm-carousel-dots-wrapper-padding);
 }
 
 .app-carousel-dot { 
@@ -88,8 +84,7 @@
     height: var(--wm-carousel-dots-height);
     border-radius: var(--wm-carousel-dots-border-radius);
     border-color: var(--wm-carousel-dots-border-color);
-    margin-left: var(--wm-carousel-dots-margin-left);
-    margin-right: var(--wm-carousel-dots-margin-right);
+    margin: var(--wm-carousel-dots-margin);
     background-color: var(--wm-carousel-dots-background);
     border-width: var(--wm-carousel-dots-border-width);
 }
@@ -105,14 +100,13 @@
     height: var(--wm-carousel-dots-height);
     border-radius: var(--wm-carousel-dots-border-radius);
     border-color: var(--wm-carousel-dots-border-color);
-    margin-left: var(--wm-carousel-dots-margin-left);
-    margin-right: var(--wm-carousel-dots-margin-right);
+    margin: var(--wm-carousel-dots-margin);
     background-color: var(--wm-carousel-dots-background);
     border-width: var(--wm-carousel-dots-border-width);
 }
 
 .app-carousel-skeleton {
-    width: var(--wm-carousel-skeleton-width);
+
 }
 
 .app-carousel-dot-skeleton {

package/src/templates/foundation-theme/wavemaker/design-tokens/advanced/login.less

@@ -7,8 +7,5 @@
 }
 
 .app-login-form-container {
-    padding-top: var(--wm-login-form-padding-top);
-    padding-right: var(--wm-login-form-padding-right);
-    padding-bottom: var(--wm-login-form-padding-bottom);
-    padding-left: var(--wm-login-form-padding-left);
+    padding: var(--wm-login-form-padding);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/advanced/webview.less

@@ -1,7 +1,4 @@
 .app-webview {
   background-color: var(--wm-webview-background-color);
-  padding-right: var(--wm-webview-padding-right);
-  padding-left: var(--wm-webview-padding-left);
-  padding-bottom: var(--wm-webview-padding-bottom);
-  padding-top: var(--wm-webview-padding-top);
+  padding: var(--wm-webview-padding);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/anchor.less

@@ -5,8 +5,7 @@
 
 .app-anchor-text {
     color: var(--wm-anchor-color);
-    padding-left: var(--wm-anchor-text-padding-left);
-    padding-right: var(--wm-anchor-text-padding-right);
+    padding: var(--wm-anchor-text-padding);
     font-size: var(--wm-anchor-font-size);
     font-family: var(--wm-anchor-font-family);
     font-weight: var(--wm-anchor-font-weight);
@@ -14,6 +13,7 @@
     letter-spacing: var(--wm-anchor-letter-spacing);
     text-transform: var(--wm-anchor-text-transform);
     text-decoration: var(--wm-anchor-text-decoration);
+    text-decoration-line: var(--wm-anchor-text-decoration);
 }
 
 .app-anchor-icon-image {

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/bottomsheet.less

@@ -3,22 +3,18 @@
 }
 
 .app-bottomsheet-container {
+    width: var(--wm-bottomsheet-width);
     background-color: var(--wm-bottomsheet-background); 
     border-top-right-radius: var(--wm-bottomsheet-border-radius); 
     border-top-left-radius: var(--wm-bottomsheet-border-radius); 
-    margin-left: var(--wm-bottomsheet-margin-left); 
-    margin-right: var(--wm-bottomsheet-margin-right); 
-    border-top-width: var(--wm-bottomsheet-border-width-top); 
-    border-bottom-width: var(--wm-bottomsheet-border-width-bottom); 
-    border-left-width: var(--wm-bottomsheet-border-width-left); 
-    border-right-width: var(--wm-bottomsheet-border-width-right); 
+    margin: var(--wm-bottomsheet-margin); 
+    border-width: var(--wm-bottomsheet-border-width); 
     border-color: var(--wm-bottomsheet-border-color);
     border-style: var(--wm-bottomsheet-border-style);
 }
 
 .app-bottomsheet-draghandle-container {
-    padding-top: var(--wm-bottomsheet-handle-padding-top); 
-    padding-bottom: var(--wm-bottomsheet-handle-padding-bottom); 
+    padding: var(--wm-bottomsheet-handle-padding); 
     border-bottom-width: var(--wm-bottomsheet-handle-border-width); 
     border-bottom-color: var(--wm-bottomsheet-handle-border-color); 
     background-color: var(--wm-bottomsheet-handle-background); 
@@ -32,8 +28,5 @@
 
 .app-bottomsheet-content {
     background-color: var(--wm-bottomsheet-background); 
-    padding-left: var(--wm-bottomsheet-content-padding-left); 
-    padding-right: var(--wm-bottomsheet-content-padding-right); 
-    padding-top: var(--wm-bottomsheet-content-padding-top); 
-    padding-bottom: var(--wm-bottomsheet-content-padding-bottom); 
+    padding: var(--wm-bottomsheet-content-padding); 
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/button.less

@@ -1,7 +1,4 @@
 .app-button {
-    position: var(--wm-btn-position);
-    bottom: var(--wm-btn-position-bottom);
-    right: var(--wm-btn-position-right);
     background-color: var(--wm-btn-background);
     border-width: var(--wm-btn-border-width);
     border-style: var(--wm-btn-border-style);
@@ -13,10 +10,7 @@
     overflow: hidden;
     min-width: var(--wm-btn-min-width);
     min-height: var(--wm-btn-height);
-    padding-left: var(--wm-btn-padding-left);
-    padding-right: var(--wm-btn-padding-right);
-    padding-bottom: var(--wm-btn-padding-bottom);
-    padding-top: var(--wm-btn-padding-top);
+    padding: var(--wm-btn-padding);
     cursor: var(--wm-btn-cursor);
     color: var(--wm-btn-color);
     opacity: var(--wm-btn-opacity);
@@ -46,14 +40,11 @@
 
 
 .app-button-icon {
-    padding-left: var(--wm-space-0);
-    padding-right: var(--wm-space-0);
-    padding-top: var(--wm-space-0);
-    padding-bottom: var(--wm-space-0);
+    padding: var(--wm-btn-icon-padding);
 }
 
 .app-button-icon .app-icon{
-    color: var(--wm-btn-color);
+    color: var(--wm-btn-icon-color);
 }
 
 .app-button-icon .app-icon-shape {

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/buttongroup.less

@@ -17,19 +17,13 @@
 
 .btn-group-child {
   background-color: var(--wm-btn-background);
-  border-top-width: var(--wm-btn-border-width);
-  border-bottom-width: var(--wm-btn-border-width);
-  border-left-width: var(--wm-btn-border-width);
-  border-right-width: var(--wm-btn-border-width);
+  border-width: var(--wm-btn-border-width);
   border-color: var(--wm-btn-border-color);
 }
 
 .btn-group-first-child {
   background-color: var(--wm-btn-background);
-  border-top-width: var(--wm-btn-border-width);
-  border-bottom-width: var(--wm-btn-border-width);
-  border-left-width: var(--wm-btn-border-width);
-  border-right-width: var(--wm-btn-border-width);
+  border-width: var(--wm-btn-border-width);
   border-color: var(--wm-btn-border-color);
   border-top-left-radius: var(--wm-btn-radius);
   border-bottom-left-radius: var(--wm-btn-radius);
@@ -37,10 +31,7 @@
 
 .btn-group-last-child {
   background-color: var(--wm-btn-background);
-  border-top-width: var(--wm-btn-border-width);
-  border-bottom-width: var(--wm-btn-border-width);
-  border-left-width: var(--wm-btn-border-width);
-  border-right-width: var(--wm-btn-border-width);
+  border-width: var(--wm-btn-border-width);
   border-color: var(--wm-btn-border-color);
   border-top-right-radius: var(--wm-btn-radius);
   border-bottom-right-radius: var(--wm-btn-radius);

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/label.less

@@ -1,8 +1,5 @@
 .app-label {
-    margin-top: var(--wm-label-margin-top);
-    margin-bottom: var(--wm-label-margin-bottom);
-    margin-left: var(--wm-label-margin-left);
-    margin-right: var(--wm-label-margin-right);
+    margin: var(--wm-space-0);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
     padding-left: var(--wm-label-padding-left);
@@ -48,6 +45,7 @@
     color: var(--wm-label-color);
     line-height: var(--wm-label-line-height);
     letter-spacing: var(--wm-label-letter-spacing);
+    margin: var(--wm-space-0);
 }
 
 .h2.app-label-text {
@@ -57,6 +55,7 @@
     color: var(--wm-label-color);
     line-height: var(--wm-label-line-height);
     letter-spacing: var(--wm-label-letter-spacing);
+    margin: var(--wm-space-0);
 }
 
 .h3.app-label-text {
@@ -66,6 +65,7 @@
     color: var(--wm-label-color);
     line-height: var(--wm-label-line-height);
     letter-spacing: var(--wm-label-letter-spacing);
+    margin: var(--wm-space-0);
 }
 
 .h4.app-label-text {
@@ -75,6 +75,7 @@
     color: var(--wm-label-color);
     line-height: var(--wm-label-line-height);
     letter-spacing: var(--wm-label-letter-spacing);
+    margin: var(--wm-space-0);
 }
 
 .h5.app-label-text {
@@ -84,6 +85,7 @@
     color: var(--wm-label-color);
     line-height: var(--wm-label-line-height);
     letter-spacing: var(--wm-label-letter-spacing);
+    margin: var(--wm-space-0);
 }
 
 .h6.app-label-text {
@@ -93,6 +95,7 @@
     color: var(--wm-label-color);
     line-height: var(--wm-label-line-height);
     letter-spacing: var(--wm-label-letter-spacing);
+    margin: var(--wm-space-0);
 }
 
 .text-primary .app-label {

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/lottie.less

@@ -1,7 +1,10 @@
 .app-lottie {
     background-color: var(--wm-lottie-background-color);
-    padding-right: var(--wm-lottie-padding-right);
-    padding-left: var(--wm-lottie-padding-left);
-    padding-bottom: var(--wm-lottie-padding-bottom);
-    padding-top: var(--wm-lottie-padding-top);
+    padding: var(--wm-lottie-padding);
+}
+
+.app-lottie-content {
+    height: var(--wm-lottie-content-height);
+    width: var(--wm-lottie-content-width);
+    background-color: var(--wm-lottie-content-background-color);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/message.less

@@ -5,26 +5,23 @@
     background-color:var(--wm-message-container-background);
     border-color:var(--wm-message-container-border-color);
     border-width: var(--wm-message-container-border-width);
-    padding-top: var(--wm-message-container-padding-top);
-    padding-left: var(--wm-message-container-padding-left);
-    padding-right: var(--wm-message-container-padding-right);
-    padding-bottom: var(--wm-message-container-padding-bottom);
+    padding: var(--wm-message-container-padding);
 }
 
 .app-message-text {
     font-size: var(--wm-message-text-size);
-    color:var(--wm-message-color);
+    color:var(--wm-message-text-color);
 }
 
 .app-message-title {
-    color:var(--wm-message-color);
-    padding-bottom: var(--wm-message-title-padding-bottom);
+    color:var(--wm-message-title-color);
+    padding: var(--wm-message-title-padding);
     font-size: var(--wm-message-title-font-size);
     font-weight: var(--wm-message-title-font-weight);
 }
 
 .app-message-text-wrapper {
-    padding-left: var(--wm-message-text-wrapper-padding-left);
+    padding: var(--wm-message-text-wrapper-padding);
 }
 
 .app-message-icon .app-icon{
@@ -47,8 +44,7 @@
 }
 
 .app-message-closebtn .app-button{
-    padding-left: var(--wm-message-close-btn-padding-left);
-    padding-right: var(--wm-message-close-btn-padding-right);
+    padding: var(--wm-message-close-btn-padding);
     border-radius: var(--wm-message-close-btn-border-radius);
     border-color: var(--wm-message-close-btn-border-color);
     background-color: var(--wm-message-close-btn-background-color);

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/picture.less

@@ -5,10 +5,7 @@
         max-width: 100%;
         max-height: 100%;
         border-radius: var(--wm-picture-radius);
-        padding-top: var(--wm-picture-padding-top);
-        padding-bottom: var(--wm-picture-padding-bottom);
-        padding-left: var(--wm-picture-padding-left);
-        padding-right: var(--wm-picture-padding-right);
+        padding: var(--wm-picture-padding);
         background-color: var(--wm-picture-background);
         border-width: var(--wm-picture-border-width);
         border-style:  var(--wm-picture-border-style);
@@ -16,10 +13,7 @@
 }
 .thumbnail-image.app-picture {
         border-radius: var(--wm-picture-radius);
-        padding-top: var(--wm-picture-padding-top);
-        padding-bottom: var(--wm-picture-padding-bottom);
-        padding-left: var(--wm-picture-padding-left);
-        padding-right: var(--wm-picture-padding-right);
+        padding: var(--wm-picture-padding);
         background-color: var(--wm-picture-background);
         border-width: var(--wm-picture-border-width);
         border-style:  var(--wm-picture-border-style);
@@ -30,10 +24,7 @@
 }
 .rounded-image.app-picture {
         border-radius: var(--wm-picture-radius);
-        padding-top: var(--wm-picture-padding-top);
-        padding-bottom: var(--wm-picture-padding-bottom);
-        padding-left: var(--wm-picture-padding-left);
-        padding-right: var(--wm-picture-padding-right);
+        padding: var(--wm-picture-padding);
         background-color: var(--wm-picture-background);
         border-width: var(--wm-picture-border-width);
         border-style:  var(--wm-picture-border-style);
@@ -44,10 +35,7 @@
 }
 .circle-image.app-picture {
         border-radius: var(--wm-picture-radius);
-        padding-top: var(--wm-picture-padding-top);
-        padding-bottom: var(--wm-picture-padding-bottom);
-        padding-left: var(--wm-picture-padding-left);
-        padding-right: var(--wm-picture-padding-right);
+        padding: var(--wm-picture-padding);
         background-color: var(--wm-picture-background);
         border-width: var(--wm-picture-border-width);
         border-style:  var(--wm-picture-border-style);

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/progress-bar.less

@@ -13,7 +13,6 @@
     border-top-right-radius: var(--wm-progress-bar-radius);
     border-bottom-right-radius: var(--wm-progress-bar-radius);
     height: var(--wm-progress-bar-height);
-    margin: var(--wm-progress-bar-margin);
 }
 
 .app-progress-bar-value {

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/search.less

@@ -14,10 +14,7 @@
     font-weight: var(--wm-search-text-font-weight);
     border-top-left-radius: var(--wm-search-border-radius);
     border-bottom-left-radius: var(--wm-search-border-radius);
-    padding-left: var(--wm-search-text-padding-left);
-    padding-right: var(--wm-search-text-padding-right);
-    padding-top: var(--wm-search-text-padding-top);
-    padding-bottom: var(--wm-search-text-padding-bottom);
+    padding: var(--wm-search-text-padding);
     border-width: var(--wm-search-border-width);
     border-right-width: 0;
 }
@@ -30,10 +27,7 @@
 .app-search-clear-btn .app-button {
     border-color: transparent;
     ripple-color: transparent;
-    padding-left: var(--wm-search-clear-btn-padding-left);
-    padding-right: var(--wm-search-clear-btn-padding-right);
-    padding-top: var(--wm-search-clear-btn-padding-top);
-    padding-bottom: var(--wm-search-clear-btn-padding-bottom);
+    padding: var(--wm-search-clear-btn-padding);
     border-radius: var(--wm-search-clear-btn-border-radius);
     background-color: var(--wm-search-clear-btn-background-color);
     width: var(--wm-search-clear-btn-width);
@@ -52,10 +46,7 @@
 }
 
 .app-search-complete-item {
-    padding-right: var(--wm-search-data-complete-padding-right);
-    padding-left: var(--wm-search-data-complete-padding-left);
-    padding-top: var(--wm-search-data-complete-padding-top);
-    padding-bottom: var(--wm-search-data-complete-padding-bottom);
+    padding: var(--wm-search-data-complete-padding);
     background-color: var(--wm-search-data-complete-background);
 }
 
@@ -67,10 +58,7 @@
 }
 
 .app-search-item{
-    padding-right: var(--wm-search-item-padding-right);
-    padding-left: var(--wm-search-item-padding-left);
-    padding-top: var(--wm-search-item-padding-top);
-    padding-bottom: var(--wm-search-item-padding-bottom);
+    padding: var(--wm-search-item-padding);
     margin-bottom: var(--wm-search-item-margin-bottom);
     border-bottom-color: var(--wm-search-item-separator-color);
     border-bottom-width: var(--wm-search-item-separator-width);
@@ -110,10 +98,7 @@
     border-width: var(--wm-search-border-width);
     border-style: solid;
     border-left-width: 0;
-    padding-left: var(--wm-search-btn-padding-left);
-    padding-right: var(--wm-search-btn-padding-right);
-    padding-top: var(--wm-search-btn-padding-top);
-    padding-bottom: var(--wm-search-btn-padding-bottom);
+    padding: var(--wm-search-btn-padding);
     width: var(--wm-search-btn-width);
 
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/basic/spinner.less

@@ -11,7 +11,7 @@
 
 .app-spinner-text {
     font-size: var(--wm-spinner-text-font-size);
-    padding-left: var(--wm-spinner-text-padding-left);
+    padding: var(--wm-spinner-text-padding);
     color: var(--wm-spinner-text-color);
 }