@wavemaker/rn-codegen 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/panel.less

@@ -0,0 +1,46 @@
+.app-panel {
+    .panel-heading {
+        background-color: var(--wm-panel-heading-background);
+        .app-icon.panel-icon {
+            font-size: 32px;
+        }
+        .heading {
+            font-size: var(--wm-panel-heading-font-size);
+            font-weight: var(--wm-panel-heading-font-weight);
+        }
+        .description {
+            font-size: var(--wm-panel-heading-description-font-size);
+        }
+        .panel-title {
+            display: flex;
+            align-content: center;
+            a {
+                flex: 1;
+                display: block;
+            }
+            .app-badge {
+                width: 24px;
+                height: 24px;
+                display: inline-block;
+                padding: 6px 4px;
+                border-radius: 24px;
+            }
+            .panel-actions {
+                display: block;
+                align-self: center;
+            }
+        }
+    }
+    .panel-content {
+        .panel-body {
+            padding: 0px;
+        }
+    }
+    .app-panel-footer {
+        min-height: 64px; //TODO Add styling tokens
+        margin-top: 8px; //TODO Add styling tokens
+        border-radius: 6px; //TODO Add styling tokens
+    }
+}
+
+

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/styles.less

@@ -0,0 +1,6 @@
+@import url('./accordion.less');
+@import url('./grid.less');
+@import url('./panel.less');
+@import url('./tabs.less');
+@import url('./wizard.less');
+@import url('./container.less');

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/tabs.less

@@ -0,0 +1,113 @@
+.app-tabs {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: var(--wm-tabs-background);
+
+    >.tabs-list {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 121;
+        font-size: 0;
+        color: var(--wm-tabs-item-heading-text, #000);
+        background-color: var(--wm-tabs-background);
+        padding: var(--wm-tabs-border-width, 4px) 0;
+    }
+
+    >.nav-tabs {
+        display: flex;
+        align-items: stretch;
+        border-bottom: var(--wm-tabs-border-width) var(--wm-tabs-border-style) var(--wm-tabs-border-color);
+
+        >.tab-header {
+            display: inline-flex;
+            align-items: center;
+            margin: 0px;
+            background-color: var(--wm-tabs-item-heading-background);
+
+            .tab-heading {
+
+
+                background-color: transparent;
+                color: var(--wm-tabs-item-heading-text);
+
+                .app-icon {
+                    color: var(--wm-tabs-item-heading-icon);
+                }
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                min-height: var(--wm-tabs-item-heading-line-height);
+                padding: var(--wm-tabs-item-heading-padding, 8px);
+                font-size: var(--wm-tabs-item-heading-font-size);
+                font-weight: var(--wm-tabs-item-heading-font-weight);
+                line-height: var(--wm-tabs-item-heading-line-height);
+
+                &:after {
+                    content: "";
+                    position: absolute;
+                    bottom: 0;
+                    height: var(--wm-tabs-item-heading-indicator-height);
+                    width: 100%;
+                    background: var(--wm-tabs-item-heading-indicator-background);
+                    transform: scale(0);
+                    transition: all 0.2s ease-in-out;
+                }
+            }
+
+            &.active {
+
+
+                background-color: var(--wm-tabs-item-heading-background);
+                color: var(--wm-tabs-item-heading-text);
+
+                .app-icon {
+                    color: var(--wm-tabs-item-heading-icon);
+                }
+
+                .tab-heading {
+
+
+
+                    &:after {
+                        background: var(--wm-tabs-item-heading-indicator-background);
+                        transform: scale(1);
+                        transition: all 0.2s ease-in-out;
+                    }
+                }
+            }
+
+            &.disabled {
+                .tab-heading {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    >.tab-content {
+        background: var(--wm-tabs-background);
+        padding: var(--wm-tabs-item-heading-padding, 8px);
+    }
+
+    .tab-pane {
+        .tab-body {
+            border-color: transparent;
+        }
+    }
+
+}
+
+.nav-tabs>li.active>a {
+    background-color: transparent;
+    border-color: transparent;
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/tile.less

@@ -0,0 +1,7 @@
+.app-tile {
+
+}
+
+.h1.app-label.tile-template-text {
+    color: var(--wm-tile-color);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/wizard.less

@@ -0,0 +1,33 @@
+/* wizard component styles and tokens */
+@import (optional) url('../../../../components/container/wizard.less');
+@import (optional) url('../../../../generated/variables/mobile/components/wizard.variant.less');
+.app-wizard {
+    display: flex;
+    flex-direction: column;
+  .app-wizard-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    .btn {
+      --wm-btn-min-width: 112px;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+    .app-wizard-actions-right {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+}
+
+.app-wizard.number {
+  > .app-wizard-heading {
+    .app-wizard-steps {
+      .app-wizard-step.app-wizard-step::before {
+        border-top: var(--wm-wizard-step-connector-width) var(--wm-wizard-step-connector-style) var(--wm-wizard-step-connector-color);
+      }
+    }
+  }
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/data/card.less

@@ -0,0 +1,25 @@
+    .app-card {
+        &-header {
+            padding: var(--wm-card-heading-padding);
+            background-color: var(--wm-card-header-background-color);
+            width: var(--wm-card-heading-width);
+        }
+
+        &-avatar {
+            padding-top: var(--wm-card-icon-margin-top);
+            padding-right: var(--wm-card-icon-margin-right);
+        }
+        .panel-heading {
+            background-color: var(--wm-card-header-background-color);
+    }
+}
+    .card-default,
+    .card-elevated,
+    .card-filled {
+        border-width: var(--wm-card-border-width);
+        border-style: var(--wm-card-border-style);
+        border-color: var(--wm-card-border-color);
+        border-radius: var(--wm-card-border-radius);
+        background-color: var(--wm-card-background);
+        padding: var(--wm-card-padding);
+    }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/data/form.less

@@ -0,0 +1,22 @@
+.app-form {
+    &.app-panel .panel-heading {
+        background-color: transparent;
+        .description{
+            white-space: nowrap;
+        }
+    }
+    .formfield-label {
+        width: 100%;
+    }
+    .live-field {
+        >div {
+            width: 100%;
+            .form-control {
+                width: 100%;
+            }
+        }
+    }
+    .form-action .app-button {
+        padding: 12px;
+    }
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/data/list.less

@@ -0,0 +1,3 @@
+.app-list {
+
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/data/styles.less

@@ -0,0 +1,3 @@
+@import url('./card.less');
+@import url('./list.less');
+@import url('./form.less');

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/device/barcode.less

@@ -0,0 +1,23 @@
+.app-page-content .app-ng-transclude .app-barcode {
+    width: auto;
+    padding-top: var(--wm-barcodescanner-padding-top);
+    padding-left: var(--wm-barcodescanner-padding-left);
+    padding-bottom: var(--wm-barcodescanner-padding-bottom);
+    padding-right: var(--wm-barcodescanner-padding-right);
+    gap: var(--wm-space-0) !important;
+    display: grid !important;
+    justify-content: none;
+    align-items: none;
+}
+
+ .app-barcode{
+    width: auto;
+    padding-top: var(--wm-barcodescanner-padding-top);
+    padding-left: var(--wm-barcodescanner-padding-left);
+    padding-bottom: var(--wm-barcodescanner-padding-bottom);
+    padding-right: var(--wm-barcodescanner-padding-right);
+    gap: var(--wm-space-0) !important;
+    display: grid !important;
+    justify-content: none;
+    align-items: none;
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/device/camera.less

@@ -0,0 +1,4 @@
+.app-page-content .app-ng-transclude .app-camera {
+    width: auto;
+    padding: 12px;
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/device/styles.less

@@ -0,0 +1,2 @@
+@import url('./camera.less');
+@import url('./barcode.less');

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/dialogs/alert-dialog.less

@@ -0,0 +1,10 @@
+.app-alert-dialog {
+    .ok-action.app-button {
+        width: 100%;
+    }
+    .app-dialog-message {
+        font-size: var(--wm-alert-modal-message-text-font-size);
+        font-weight: var(--wm-alert-modal-message-text-font-weight);
+        font-family: var(--wm-alert-modal-message-text-font-family);
+    }
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/dialogs/base-dialog.less

@@ -0,0 +1,31 @@
+.app-dialog {
+    border-radius: 8px;
+    background-color: transparent;
+    .app-dialog-title {
+        text-align: left;
+
+        i {
+            font-size: 24px;
+        }
+
+        // span {
+        //    font-size: 24px;
+        // }
+    }
+
+    .app-dialog-close {
+        font-size: 24px;
+    }
+
+    .app-dialog-body {
+        padding: 16px;
+    }
+
+    .modal-content {
+        background-color: var(--wm-dialog-background-color);
+        padding: 24px;
+        .app-dialog-header {
+            border-color: transparent;
+        }
+    }
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/dialogs/confirm-dialog.less

@@ -0,0 +1,26 @@
+.app-confirm-dialog {
+    .app-dialog-footer {
+        display: flex;
+        flex-direction: row;
+        padding: 0;
+        .app-button {
+            flex: 1;
+            padding: 12px;
+            border-radius: 0;
+            border-width: 0;
+            border-right-width: 1px;
+            background-color: inherit;
+            margin: 0;
+        }
+        .app-button:first-child {
+            border-bottom-left-radius: 8px;
+        }
+        .app-button:last-child {
+            border-right-width: 0;
+            border-bottom-right-radius: 8px;
+        }
+        .ok-action .btn-caption {
+            color: #000;
+        }
+    }
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/dialogs/styles.less

@@ -0,0 +1,3 @@
+@import url('./base-dialog.less');
+@import url('./alert-dialog.less');
+@import url('./confirm-dialog.less');

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

@@ -0,0 +1,8 @@
+
+.app-calendar .fc .fc-day-today {
+    border-width: 2px;
+    border-style: solid;
+    background-color: #fff;
+    border-radius: 99px;
+  }
+  

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

@@ -0,0 +1,78 @@
+.app-checkbox {
+
+    input[type="checkbox"] {
+        appearance: none;
+        margin: 0 8px 0 0;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        // root box
+        & {
+            width: var(--wm-checkbox-width);
+            height: var(--wm-checkbox-height);
+            background-color: var(--wm-checkbox-background-color);
+            border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
+            border-radius: var(--wm-checkbox-border-radius);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        // checked state
+        &:checked {
+            background-color: var(--wm-checkbox-background-color);
+            border-color: var(--wm-checkbox-border-color);
+
+            &::after {
+                content: "";
+                display: block;
+                width: calc(var(--wm-checkbox-icon-size)/3);
+                height: calc(var(--wm-checkbox-icon-size)/1.5);
+                border-right: 3px solid var(--wm-checkbox-icon-color);
+                border-bottom: 3px solid var(--wm-checkbox-icon-color);
+                transform: rotate(45deg);
+                top: 3px;
+                left: 6px;
+            }
+        }
+
+        // disabled state
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+    }
+
+    &.checkbox {
+
+        >label {
+            padding: 0;
+            display: inline-flex;
+            width: auto;
+            min-height: var(--wm-checkbox-width);
+            margin-left: var(--wm-checkbox-label-margin-left);
+            font-size: var(--wm-checkbox-label-font-size);
+            font-family: var(--wm-checkbox-label-font-family);
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: normal;
+            cursor: pointer;
+
+
+            .caption {
+                display: inline-block;
+                padding-left: 20px;
+                padding-top: 0;
+                margin-left: var(--wm-checkbox-label-margin-left);
+
+                &:before,
+                &:after {
+                    content: "";
+                    display: inline-block;
+                    position: absolute;
+                }
+
+            }
+        }
+    }
+}

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

@@ -0,0 +1,67 @@
+.app-checkboxset {
+    .app-checkbox {
+        position: relative;
+
+        input[type="checkbox"] {
+            appearance: none;
+            margin: 0 8px 0 0;
+            cursor: pointer;
+            transition: all 0.2s ease;
+    
+            // root box
+            & {
+                width: var(--wm-checkboxset-width);
+                height: var(--wm-checkboxset-height);
+                background-color: var(--wm-checkboxset-background-color);
+                border: var(--wm-checkboxset-border-width) solid var(--wm-checkboxset-border-color);
+                border-radius: var(--wm-checkboxset-border-radius);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+    
+            // checked state
+            &:checked {
+                background-color: var(--wm-checkboxset-background-color);
+                border-color: var(--wm-checkboxset-border-color);
+    
+                &::after {
+                    content: "";
+                    display: block;
+                    width: calc(var(--wm-checkboxset-icon-size) / 2);
+                    height: var(--wm-checkboxset-icon-size);
+                    border-right: 2px solid var(--wm-checkboxset-icon-color);
+                    border-bottom: 2px solid var(--wm-checkboxset-icon-color);
+                    transform: rotate(45deg);
+                    top: 3px;
+                    left: 6px;
+                }
+            }
+    
+            // disabled state
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+        }
+
+        &.checkbox {
+            display: inline-block;
+
+            >label {
+                padding: 0;
+                display: inline-flex;
+                width: auto;
+                margin-left: var(--wm-checkboxset-label-margin-left);
+                min-height: var(--wm-checkboxset-height);
+                font-size: var(--wm-checkboxset-label-font-size);
+                font-family: var(--wm-checkboxset-label-font-family);
+                font-weight: normal;
+                line-height: normal;
+                letter-spacing: normal;
+                cursor: pointer;
+                
+            }
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+.app-chips {
+    margin-left: 0;
+    .app-chip-search {
+        width: 100%;
+        input {
+            height: var(--wm-chips-list-height);
+            border-radius: var(--wm-chips-list-border-radius);
+            font-size: var(--wm-chips-item-font-size);
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+.app-currency {
+    span,
+    .app-textbox {
+        padding: 12px;
+        font-size: 16px;
+        height: auto;
+    }
+    span {
+        padding: 12px 16px;
+    }
+    .app-textbox {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+    border-radius: 6px;
+}

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

@@ -0,0 +1,7 @@
+.app-dateinput,
+input[widgettype="wm-time"] {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+    height: auto;
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/epoch/datetime-picker-modal.less

@@ -0,0 +1,49 @@
+.date-picker  {
+    background-color: var(--wm-datetime-background);
+}
+
+.date-picker__title {
+    color:var(--wm-datetime-header-text-color);
+    font-size: var(--wm-datetime-header-text-font-size);
+    font-weight: var(--wm-datetime-header-text-font-weight);
+}
+
+.date-picker__content  {
+    background-color: var(--wm-datetime-background);
+}
+
+.btn-cancel {
+    border-color: var(--wm-datetime-button-border-color);
+    border-width: var(--wm-datetime-button-border-width);
+    border-style: var(--wm-datetime-button-border-style);
+    border-radius: var(--wm-datetime-button-border-radius);
+    ripple-color:var(--wm-datetime-button-ripple-color);
+    background-color: var(--wm-datetime-cancel-button-background);
+    font-size: var(--wm-datetime-cancel-button-text-size);
+    font-weight: var(--wm-datetime-cancel-button-text-weight);
+    color: var(--wm-datetime-cancel-button-text-color);
+}
+
+.btn-select {
+    background-color: var(--wm-datetime-selected-button-background);
+    border-color: var(--wm-datetime-button-border-color);
+    border-width: var(--wm-datetime-button-border-width);
+    border-style: var(--wm-datetime-button-border-style);
+    border-radius: var(--wm-datetime-button-border-radius);
+    ripple-color:var(--wm-datetime-button-ripple-color);
+    font-size: var(--wm-datetime-selected-button-text-size);
+    font-weight: var(--wm-datetime-selected-button-text-weight);
+    color: var(--wm-datetime-selected-button-text-color);
+}
+
+.wheel-item {
+    color:var(--wm-datetime-text-color);
+    font-size: var(--wm-datetime-text-font-size);
+    font-weight: var(--wm-datetime-text-font-weight);
+}
+
+.wheel-item.selected{
+    color:var(--wm-datetime-selected-text-color);
+    font-size: var(--wm-datetime-selected-text-font-size);
+    font-weight: var(--wm-datetime-selected-text-font-weight);
+}