@wavemaker/rn-codegen 11.14.2-rc.6311 → 11.15.0-1.246

package/src/templates/foundation-theme/dist/ios/variables.js

@@ -362,4 +362,6 @@ export default {
   audioPlayerFgColor: "#333333",
   tooltipBgColor: "rgba(255, 255, 255, 0.4)",
   tooltipBorderColor: "#404040",
+  overlayColor: "#7f7f7f",
+  leftPanelOverlayColor: "#7f7f7f",
 }

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

@@ -15,19 +15,11 @@ To style the skeleton of picture widget.
 }
 
 
-.app-picture.picture {
-}
-
-
 .thumbnail-image.app-picture {
     background-color: @pictureThumbBgColor;
     border-color: @pictureThumbBorderColor;
 }
 
-
-.rounded-image.app-picture {
-}
-
 @import (optional) url('../../../wavemaker/design-tokens/basic/picture.less');
 @import (optional) url('../../../custom/components/basic/picture.less');
 @import (optional) url('../../../custom/os/components/basic/picture.less');

package/src/templates/foundation-theme/wavemaker/components/container/accordion.less

@@ -108,6 +108,13 @@ To style the skeleton of accordion widget.
 }
 
 
+/**********************************************************************************
+To style the wrapper containing the title icon and title text of accordion widget.
+***********************************************************************************/
+.app-accordion-title-wrapper {
+}
+
+
 /**********************************************************************************
 To style the title icon of accordion widget.
 ***********************************************************************************/

package/src/templates/foundation-theme/wavemaker/components/dialogs/confirmdialog.less

@@ -22,10 +22,6 @@ To style the actions of confirm dialog.
 }
 
 
-.app-confirmdialog-dialogActions.root {
-}
-
-
 /**********************************************************************************
 To style the ok button of confirm dialog.
 ***********************************************************************************/
@@ -37,7 +33,7 @@ To style the ok button of confirm dialog.
 }
 
 
-.app-confirmdialog-cancelButton.root {
+.app-confirmdialog-cancelButton {
 }
 
 

package/src/templates/foundation-theme/wavemaker/components/dialogs/dialog.less

@@ -23,14 +23,6 @@ To style the content of dialog.
 }
 
 
-.btn-only-label.root {
-}
-
-
-.btn-only-label.text {
-}
-
-
 /**********************************************************************************
 To style the header of dialog.
 ***********************************************************************************/
@@ -57,22 +49,6 @@ To style the icon of dialog.
 }
 
 
-.btn-default.icon.root {
-}
-
-
-.app-dialog-icon.icon {
-}
-
-
-.app-dialog-close-btn.icon.icon {
-}
-
-
-.btn-primary.root {
-}
-
-
 /**********************************************************************************
 To style the close button of dialog.
 ***********************************************************************************/

package/src/templates/foundation-theme/wavemaker/components/navigation/navitem.less

@@ -16,18 +16,6 @@ To style the anchor of navitem.
 }
 
 
-.app-navitem-anchor .app-navitem {
-}
-
-
-.app-navitem-anchor .app-anchor-text {
-}
-
-
-.app-navitem-anchor .app-anchor-icon .app-anchor-text {
-}
-
-
 /**********************************************************************************
 To style the caret icon of navitem.
 ***********************************************************************************/
@@ -40,10 +28,6 @@ To style the caret icon of navitem.
 }
 
 
-.app-navitem-caret .app-navitem {
-}
-
-
 .app-navitem-active.app-navitem {
     background-color: @navitemActiveBackgroundColor;
 }

package/src/templates/foundation-theme/wavemaker/components/navigation/popover.less

@@ -9,6 +9,10 @@ To style the container of popover widget.
 }
 
 
+.app-popover-wrapper {
+}
+
+
 /**********************************************************************************
 To style the title of popover widget.
 ***********************************************************************************/

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

@@ -17,6 +17,8 @@
 }
 
 .app-carousel-active-slide {
+    padding-left: var(--wm-carousel-slide-padding-horizontal);
+    padding-right: var(--wm-carousel-slide-padding-horizontal);
 }
 .app-carousel-prev-btn {
 }
@@ -99,6 +101,14 @@
 .app-carousel-active-dot {
     opacity: var(--wm-carousel-dots-opacity);
     background-color: var(--wm-carousel-dots-background);
+    width: var(--wm-carousel-dots-width);
+    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);
+    background-color: var(--wm-carousel-dots-background);
+    border-width: var(--wm-carousel-dots-border-width);
 }
 
 .app-carousel-skeleton {

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

@@ -1,3 +1,7 @@
-.app-webview-container {
-    min-height: var(--wm-webview-container-min-height);
+.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);
 }

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

@@ -5,8 +5,8 @@
 
 .app-anchor-text {
     color: var(--wm-anchor-color);
-    padding-left: var(--wm-space-2);
-    padding-right: var(--wm-space-2);
+    padding-left: var(--wm-anchor-text-padding-left);
+    padding-right: var(--wm-anchor-text-padding-right);
     font-size: var(--wm-anchor-font-size);
     font-family: var(--wm-anchor-font-family);
     font-weight: var(--wm-anchor-font-weight);

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

@@ -8,6 +8,12 @@
     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); 
+    border-color: var(--wm-bottomsheet-border-color);
+    border-style: var(--wm-bottomsheet-border-style);
 }
 
 .app-bottomsheet-draghandle-container {

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

@@ -9,7 +9,6 @@
     border-radius: var(--wm-btn-radius);
     ripple-color: var(--wm-btn-ripple-color);
     box-shadow: var(--wm-btn-shadow);
-    align-self: flex-start;
     flex-direction: column;
     overflow: hidden;
     min-width: var(--wm-btn-min-width);
@@ -51,16 +50,20 @@
     padding-right: var(--wm-space-0);
     padding-top: var(--wm-space-0);
     padding-bottom: var(--wm-space-0);
-    min-width: var(--wm-btn-icon-size);
-    width: var(--wm-btn-icon-size);
-    height: var(--wm-btn-icon-size);
-    font-size: var(--wm-btn-icon-size);
 }
 
 .app-button-icon .app-icon{
     color: var(--wm-btn-color);
 }
 
+.app-button-icon .app-icon-shape {
+    min-width: var(--wm-btn-icon-size);
+    width: var(--wm-btn-icon-size);
+    height: var(--wm-btn-icon-size);
+    font-size: var(--wm-btn-icon-size);
+    line-height: var(--wm-btn-icon-size);
+}
+
 .app-button-skeleton {
     width: var(--wm-btn-skeleton-width);
     height: var(--wm-btn-skeleton-height);
@@ -70,4 +73,13 @@
     width: 100%;
 }
 
+.app-button-disabled .app-button {
+    color: var(--wm-btn-color);
+    background-color: var(--wm-btn-background);
+    border-color: var(--wm-btn-border-color);
+    opacity: var(--wm-btn-opacity);
+    cursor: var(--wm-btn-cursor);
+    box-shadow: var(--wm-btn-shadow);
+}
+
 @import (optional) url('../variables/button.variant.less');

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

@@ -1,12 +1,13 @@
-
 .app-buttongroup {
   flex-direction: row;
   border-radius: var(--wm-button-group-radius);
+  border-width:  var(--wm-button-group-border-width);
+  border-style: var(--wm-button-group-border-style);
+  border-color: var(--wm-button-group-border-color);
 }
 
 .btn-group-child-vertical {
   align-self: stretch;
-  flex-grow: 0;
 }
 
 .btn-group-vertical.app-buttongroup {
@@ -16,18 +17,33 @@
 
 .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-color: var(--wm-btn-border-color);
 }
 
 .btn-group-first-child {
   background-color: var(--wm-btn-background);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  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-color: var(--wm-btn-border-color);
+  border-top-left-radius: var(--wm-btn-radius);
+  border-bottom-left-radius: var(--wm-btn-radius);
 }
 
 .btn-group-last-child {
   background-color: var(--wm-btn-background);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  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-color: var(--wm-btn-border-color);
+  border-top-right-radius: var(--wm-btn-radius);
+  border-bottom-right-radius: var(--wm-btn-radius);
 }
 
 .app-buttongroup-skeleton {

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

@@ -1,6 +1,21 @@
 .app-label {
-    margin: var(--wm-label-margin);
-    padding: var(--wm-label-padding);
+    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);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .app-label-text {
@@ -16,13 +31,13 @@
 
 .p.app-label-text {
     font-size: var(--wm-label-font-size);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
     color: var(--wm-label-color);
 }
 
 .media-heading.app-label-text {
     font-size: var(--wm-label-font-size);
-    margin: var(--wm-label-margin);
     color: var(--wm-label-color);
 }
 
@@ -31,7 +46,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h2.app-label-text {
@@ -39,7 +55,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h3.app-label-text {
@@ -47,7 +64,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h4.app-label-text {
@@ -55,7 +73,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h5.app-label-text {
@@ -63,7 +82,8 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .h6.app-label-text {
@@ -71,37 +91,137 @@
     font-weight: var(--wm-label-font-weight);
     font-family: var(--wm-label-font-family);
     color: var(--wm-label-color);
-    margin: var(--wm-label-margin);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-primary .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-primary .app-label-text {
-    color: var(--wm-label-color);    
+    color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-secondary .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-secondary .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-success .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-success .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-warning .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-warning .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-danger .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-danger .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-info .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-info .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
+}
+
+.text-muted .app-label {
+    background-color: var(--wm-label-background-color);
+    border-radius: var(--wm-label-border-radius);
+    border-width: var(--wm-label-border-width);
+    border-style: var(--wm-label-border-style);
+    border-color: var(--wm-label-border-color);
+    padding-top: var(--wm-label-padding-top);
+    padding-bottom: var(--wm-label-padding-bottom);
+    padding-left: var(--wm-label-padding-left);
+    padding-right: var(--wm-label-padding-right);
 }
 
 .text-muted .app-label-text {
     color: var(--wm-label-color);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
+//no problem
 .label-primary .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
@@ -114,6 +234,8 @@
 .label-primary .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .label-secondary .app-label {
@@ -128,23 +250,28 @@
 .label-secondary .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-success .app-label{
+.label-success .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
     padding-left: var(--wm-label-padding-left);
     padding-right: var(--wm-label-padding-right);
     border-radius: var(--wm-label-border-radius);
+
 }
 
 .label-success .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-warning .app-label{
+.label-warning .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -156,9 +283,11 @@
 .label-warning .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-danger .app-label{
+.label-danger .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -170,9 +299,11 @@
 .label-danger .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
-.label-info .app-label{
+.label-info .app-label {
     background-color: var(--wm-label-background-color);
     padding-top: var(--wm-label-padding-top);
     padding-bottom: var(--wm-label-padding-bottom);
@@ -184,6 +315,8 @@
 .label-info .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 .label-muted .app-label {
@@ -198,6 +331,8 @@
 .label-muted .app-label-text {
     color: var(--wm-label-color);
     font-weight: var(--wm-label-font-weight);
+    line-height: var(--wm-label-line-height);
+    letter-spacing: var(--wm-label-letter-spacing);
 }
 
 @import (optional) url('../variables/label.variant.less');

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

@@ -1,4 +1,7 @@
-.app-lottie-content {
-    height: var(--wm-lottie-content-height);
-    width: var(--wm-lottie-content-width);
+.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);
 }

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

@@ -4,6 +4,15 @@
         align-items: center;
         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);
+        background-color: var(--wm-picture-background);
+        border-width: var(--wm-picture-border-width);
+        border-style:  var(--wm-picture-border-style);
+        border-color: var(--wm-picture-border-color);
 }
 .thumbnail-image.app-picture {
         border-radius: var(--wm-picture-radius);