cronapp-framework-mobile-js 2.9.2-SP.9 → 2.9.3

package/components/crn-checkbox.components.json

@@ -270,6 +270,8 @@
       "displayName_pt_BR": "Valor Inicial",
       "displayName_en_US": "Initial Value",
       "type": "logic",
+      "onSave": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
+      "onDisplay": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
       "order": 4
     },
     {

package/components/crn-component.components.json

@@ -13,13 +13,13 @@
   ],
   "designTimeHTML": "<img src=\"node_modules/cronapp-framework-mobile-js/img/web.png\" style=\"height: 80px; width: 80px; margin: auto; display: table-cell; vertical-align: middle; text-align: center;\">",
   "designTimeSelector": "crn-component",
-  "template": "<crn-component origin=\"\"></crn-component>",
+  "template": "<crn-component origin=\"\" params=\"\"></crn-component>",
   "properties": {
     "class": {
       "order": 9999
     },
     "id": {
-      "order": 3
+      "order": 1
     }
   },
   "childrenProperties": [
@@ -30,7 +30,14 @@
       "displayName_en_US": "Component",
       "resourceType": "text/html",
       "extraOptions": {
-        "underComponentsFolder": true
+        "underComponentsFolder": true,
+        "returnAction" : [ 
+          { 
+            "regExp" : "screen-params=\"(.*?)\"",
+            "selector" : "crn-component[params]",
+            "property" : "params"
+          }
+        ]
       },
       "selector": "crn-component[origin]",
       "mandatory": true,
@@ -38,6 +45,14 @@
       "underViewsFolder" : true,
       "webPath" : true,
       "order": 1
+    },
+    {
+      "name": "params",
+      "displayName_pt_BR": "Parametros",
+      "displayName_en_US": "Parameters",
+      "selector": "crn-component[params]",
+      "removable": false,
+      "order": 3
     }
   ]
 }

package/components/crn-item-select.components.json

@@ -31,6 +31,9 @@
     "id": {
       "order": 1
     },
+    "value" : {
+      "order": 2
+    },
     "class": {
       "order": 9999
     },
@@ -62,7 +65,7 @@
   "childrenProperties": [
     {
       "name": "content",
-      "selector": "self",
+      "selector": ":self",
       "type": "content"
     }
   ]

package/components/crn-toggle.components.json

@@ -33,6 +33,8 @@
     {
       "name": "ng-initial-value",
       "selector": "input",
+      "onSave": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
+      "onDisplay": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
       "order": 3
     },
     {

package/components/templates/list.thumbnail.template.html

@@ -1,7 +1,7 @@
 <div crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-avatar${RANDOM}">
-    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" href="" xattr-text-position="text-left">
+    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" xattr-text-position="text-left">
         <img alt="Thumbnail" src="https://picsum.photos/id/875/100/100" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
         <h2 class="default" xattr-theme="default">List Title</h2>
         <h3 class="dark" xattr-theme="dark">List Subtitle</h3>
     </a>
-</div>
+</div>

package/css/themes/custom/slate/custom-slate.css

@@ -259,17 +259,40 @@
     --colorNeutral220: #000000;
 
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #7a8288);
-    --btnDefault: var(--colorDefault40, #3a3f44);
-    --btnPrimary: var(--colorPrimary40, #7a8288);
-    --btnSuccess: var(--colorSuccess40, #62c462);
-    --btnCalm: var(--colorCalm40, #5bc0de);
-    --btnWarning: var(--colorWarning40, #f89406);
-    --btnDanger: var(--colorDanger40, #ee5f5b);
-    --btnLight: var(--colorLight40, #e9ecef);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #272b30);
+    --btnLink: var(--textColorDefault40, #ffffff);
+    --btnDefault: linear-gradient(var(--colorDefault40, #3a3f44), var(--colorDefault40, #3a3f44) 60%, var(--colorDefault50, #33373c));
+    --btnPrimary: linear-gradient(var(--colorPrimary60, #595f64), var(--colorPrimary60, #595f64) 40%, var(--colorPrimary50, #6b7277));
+    --btnSuccess: linear-gradient(var(--colorSuccess40, #62c462), var(--colorSuccess40, #62c462) 60%, var(--colorSuccess50, #56ac56));
+    --btnCalm: linear-gradient(var(--colorCalm40, #5bc0de), var(--colorCalm40, #5bc0de) 60%, var(--colorCalm50, #50a8c2));
+    --btnWarning: linear-gradient(var(--colorWarning40, #f89406), var(--colorWarning40, #f89406) 60%, var(--colorWarning50, #d98205));
+    --btnDanger: linear-gradient(var(--colorDanger40, #ee5f5b), var(--colorDanger40, #ee5f5b) 60%, var(--colorDanger50, #d05350));
+    --btnLight: linear-gradient(var(--colorLight40, #e9ecef), var(--colorLight40, #e9ecef) 60%, var(--colorLight50, #cccfd1));
+    --btnStable: linear-gradient(var(--colorStable40, #f8f8f8), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal40, #886aea), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark40, #272b30), var(--colorDark40, #272b30) 60%, var(--colorDark50, #22262a));
+
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault70, #202325);
+    --borderBtnPrimary: var(--colorPrimary70, #43474a);
+    --borderBtnSuccess: var(--colorSuccess70, #366b36);
+    --borderBtnCalm: var(--colorCalm70, #32697a);
+    --borderBtnWarning: var(--colorWarning70, #885103);
+    --borderBtnDanger: var(--colorDanger70, #823432);
+    --borderBtnLight: var(--colorLight70, #808183);
+    --borderBtnStable: var(--colorStable70, #888888);
+    --borderBtnRoyal: var(--colorRoyal70, #4a3a80);
+    --borderBtnDark: var(--colorDark70, #15181a);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #858789);
@@ -295,6 +318,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #808182);
 
+    --borderCheckboxDefault: var(--colorDefault40, #858789);
+    --borderCheckboxPrimary: var(--colorPrimary40, #7a8288);
+    --borderCheckboxSuccess: var(--colorSuccess40, #62c462);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #f89406);
+    --borderCheckboxDanger: var(--colorDanger40, #ee5f5b);
+    --borderCheckboxLight: var(--colorLight40, #e9ecef);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark30, #808182);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault50, #F1F1F1);
     --togglePrimary: var(--colorPrimary40, #7a8288);
@@ -306,6 +340,17 @@
     --toggleStable: var(--colorStable50, #d9d9d9);
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark30, #808182);
+    
+    --borderToggleDefault: var(--colorDefault50, #F1F1F1);
+    --borderTogglePrimary: var(--colorPrimary40, #7a8288);
+    --borderToggleSuccess: var(--colorSuccess40, #62c462);
+    --borderToggleCalm: var(--colorCalm40, #5bc0de);
+    --borderToggleWarning: var(--colorWarning40, #f89406);
+    --borderToggleDanger: var(--colorDanger40, #ee5f5b);
+    --borderToggleLight: var(--colorLight50, #cccfd1);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark30, #808182);
 
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #3e3f3a);

package/css/themes/custom/spacelab/custom-spacelab.css

@@ -260,17 +260,40 @@
     --colorNeutral220: #000000;
 
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #446e9b);
-    --btnDefault: var(--colorDefault40, #474949);
-    --btnPrimary: var(--colorPrimary40, #446e9b);
-    --btnSuccess: var(--colorSuccess40, #3cb521);
-    --btnCalm: var(--colorCalm40, #3399f3);
-    --btnWarning: var(--colorWarning40, #d47500);
-    --btnDanger: var(--colorDanger40, #cd0200);
-    --btnLight: var(--colorLight40, #eeeeee);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #333333);
+    --btnLink: var(--colorCalm40, #3399f3);
+    --btnDefault: linear-gradient(var(--colorDefault30, #8a8b8b), var(--colorDefault40, #474949) 50%, var(--colorDefault50, #3e4040));
+    --btnPrimary: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b) 50%, var(--colorPrimary50, #3c6088));
+    --btnSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --btnCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --btnWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --btnDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --btnLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --btnStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
+
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault40, #474949);
+    --borderBtnPrimary: var(--colorPrimary40, #446e9b);
+    --borderBtnSuccess: var(--colorSuccess40, #3cb521);
+    --borderBtnCalm: var(--colorCalm40, #3399f3);
+    --borderBtnWarning: var(--colorWarning40, #d47500);
+    --borderBtnDanger: var(--colorDanger40, #cd0200);
+    --borderBtnLight: var(--colorLight40, #eeeeee);
+    --borderBtnStable: var(--colorStable40, #f8f8f8);
+    --borderBtnRoyal: var(--colorRoyal40, #886aea);
+    --borderBtnDark: var(--colorDark40, #333333);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #474949);
@@ -292,10 +315,21 @@
     --checkboxWarning: var(--colorWarning40, #d47500);
     --checkboxDanger: var(--colorDanger40, #cd0200);
     --checkboxLight: var(--colorLight50, #d0d0d0);
-    --checkboxStable: var(--colorStable40, #f8f8f8);
+    --checkboxStable: var(--colorStable50, #d9d9d9);
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #838383);
 
+    --borderCheckboxDefault: var(--colorDefault40, #474949);
+    --borderCheckboxPrimary: var(--colorPrimary40, #446e9b);
+    --borderCheckboxSuccess: var(--colorSuccess40, #3cb521);
+    --borderCheckboxCalm: var(--colorCalm40, #3399f3);
+    --borderCheckboxWarning: var(--colorWarning40, #d47500);
+    --borderCheckboxDanger: var(--colorDanger40, #cd0200);
+    --borderCheckboxLight: var(--colorLight50, #d0d0d0);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark30, #838383);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #474949);
     --togglePrimary: var(--colorPrimary40, #446e9b);
@@ -308,6 +342,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark30, #838383);
 
+    --borderToggleDefault: var(--colorDefault40, #474949);
+    --borderTogglePrimary: var(--colorPrimary40, #446e9b);
+    --borderToggleSuccess: var(--colorSuccess40, #3cb521);
+    --borderToggleCalm: var(--colorCalm40, #3399f3);
+    --borderToggleWarning: var(--colorWarning40, #d47500);
+    --borderToggleDanger: var(--colorDanger40, #cd0200);
+    --borderToggleLight: var(--colorLight50, #d0d0d0);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark30, #838383);
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #474949);
     --bgPrimary: var(--colorPrimary40, #446e9b);
@@ -366,28 +411,28 @@
     --tabsDark: var(--colorDark40, #333333);
 
     /* Components - Header */
-    --barDefault: var(--colorDefault40, #474949);
-    --barPrimary: var(--colorPrimary40, #446e9b);
-    --barSuccess: var(--colorSuccess40, #3cb521);
-    --barCalm: var(--colorCalm40, #3399f3);
-    --barWarning: var(--colorWarning40, #d47500);
-    --barDanger: var(--colorDanger40, #cd0200);
-    --barLight: var(--colorLight40, #eeeeee);
-    --barStable: var(--colorStable40, #f8f8f8);
-    --barRoyal: var(--colorRoyal40, #886aea);
-    --barDark: var(--colorDark40, #333333);
+    --barDefault: linear-gradient(var(--colorLight10, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight40, #aeaeae));
+    --barPrimary: linear-gradient(var(--colorPrimary30, #b6b6b6), var(--colorPrimary40, #999999), var(--colorPrimary50, #868686));
+    --barSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --barCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --barWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --barDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --barLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --barStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --barRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --barDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
 
     /* Componentes - Footer with icon */
-    --backgroundDefault: var(--colorDefault40, #474949);
-    --backgroundPrimary: var(--colorPrimary40, #446e9b);
-    --backgroundSuccess: var(--colorSuccess40, #3cb521);
-    --backgroundCalm: var(--colorCalm40, #3399f3);
-    --backgroundWarning: var(--colorWarning40, #d47500);
-    --backgroundDanger: var(--colorDanger40, #cd0200);
-    --backgroundLight: var(--colorLight40, #eeeeee);
-    --backgroundStable: var(--colorStable40, #f8f8f8);
-    --backgroundRoyal: var(--colorRoyal40, #886aea);
-    --backgroundDark: var(--colorDark40, #333333);
+    --backgroundDefault: linear-gradient(var(--colorDefault30, #8a8b8b), var(--colorDefault40, #474949) 50%, var(--colorDefault50, #3e4040));
+    --backgroundPrimary: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b) 50%, var(--colorPrimary50, #3c6088));
+    --backgroundSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --backgroundCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --backgroundWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --backgroundDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --backgroundLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --backgroundStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --backgroundRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --backgroundDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
 
     --tabsIconDefault: var(--textColorDefault40, #ffffff);
     --tabsIconPrimary: var(--textColorPrimary40, #ffffff);

package/css/themes/custom/superhero/custom-superhero.css

@@ -268,6 +268,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #20374c);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #8d949b);
     --colorPrimary: var(--colorPrimary40, #df691a);
@@ -292,6 +315,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #20374c);
 
+    --borderCheckboxDefault: var(--colorDefault20, #b7babf);
+    --borderCheckboxPrimary: var(--colorPrimary40, #df691a);
+    --borderCheckboxSuccess: var(--colorSuccess40, #5cb85c);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #f0ad4e);
+    --borderCheckboxDanger: var(--colorDanger40, #d9534f);
+    --borderCheckboxLight: var(--colorLight50, #969faa);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #20374c);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #4e5d6c);
     --togglePrimary: var(--colorPrimary40, #df691a);
@@ -304,6 +338,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark30, #7e848c);
 
+    --borderToggleDefault: var(--colorDefault40, #4e5d6c);
+    --borderTogglePrimary: var(--colorPrimary40, #df691a);
+    --borderToggleSuccess: var(--colorSuccess40, #5cb85c);
+    --borderToggleCalm: var(--colorCalm40, #5bc0de);
+    --borderToggleWarning: var(--colorWarning40, #f0ad4e);
+    --borderToggleDanger: var(--colorDanger40, #d9534f);
+    --borderToggleLight: var(--colorLight50, #969faa);
+    --borderToggleStable: var(--colorStable40, #f8f8f8);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark30, #7e848c);
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #4e5d6c);
     --bgPrimary: var(--colorPrimary40, #df691a);

package/css/themes/custom/theme-general/theme-general.css

@@ -127,7 +127,7 @@ a:hover {
 }
 
 .has-header .scroll {
-    background: var(--backgroundColor40, #ffffff);
+    background: transparent;
 }
 
 /* Colors */

package/css/themes/custom/united/custom-united.css

@@ -268,6 +268,29 @@
     --btnRoyal: var(--colorRoyal40, #772953);
     --btnDark: var(--colorDark40, #444444);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #aea79f);
     --colorPrimary: var(--colorPrimary40, #e95420);
@@ -292,6 +315,17 @@
     --checkboxRoyal: var(--colorRoyal40, #772953);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: var(--colorDefault40, #aea79f);
+    --borderCheckboxPrimary: var(--colorPrimary40, #e95420);
+    --borderCheckboxSuccess: var(--colorSuccess40, #38b44a);
+    --borderCheckboxCalm: var(--colorCalm40, #17a2b8);
+    --borderCheckboxWarning: var(--colorWarning40, #efb73e);
+    --borderCheckboxDanger: var(--colorDanger40, #df382c);
+    --borderCheckboxLight: var(--colorLight50, #cccfd1);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #772953);
+    --borderCheckboxDark: var(--colorDark40, #444444);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #aea79f);
     --togglePrimary: var(--colorPrimary40, #e95420);
@@ -304,6 +338,17 @@
     --toggleRoyal: var(--colorRoyal40, #772953);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: var(--colorDefault40, #aea79f);
+    --borderTogglePrimary: var(--colorPrimary40, #e95420);
+    --borderToggleSuccess: var(--colorSuccess40, #38b44a);
+    --borderToggleCalm: var(--colorCalm40, #17a2b8);
+    --borderToggleWarning: var(--colorWarning40, #efb73e);
+    --borderToggleDanger: var(--colorDanger40, #df382c);
+    --borderToggleLight: var(--colorLight50, #cccfd1);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #772953);
+    --borderToggleDark: var(--colorDark40, #444444);
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #aea79f);
     --bgPrimary: var(--colorPrimary40, #e95420);
@@ -504,6 +549,7 @@ a#button-signup,
 }
 
 /* Cabeçalho */
+.bar.bar-default.bar-footer,
 .bar.bar-default {
     border-color: var(--colorPrimary40, #e95420);
     background: var(--colorPrimary40, #e95420);
@@ -517,16 +563,17 @@ a#button-signup,
     color: var(--textColorPrimary40, #ffffff);
 }
 
-.bar.bar-primary {
+.bar.bar-positive.bar-footer,
+.bar.bar-positive {
     border-color: var(--colorDefault40, #e95420);
     background: var(--colorDefault40, #e95420);
     color: var(--textColorDefault40, #ffffff);
 }
 
-.bar.bar-primary .button .icon,
-.bar.bar-primary .button i,
-.bar.bar-primary .button span,
-.bar.bar-primary .title {
+.bar.bar-positive .button .icon,
+.bar.bar-positive .button i,
+.bar.bar-positive .button span,
+.bar.bar-positive .title {
     color: var(--textColorDefault40, #ffffff);
 }
 

package/css/themes/custom/yeti/custom-yeti.css

@@ -270,6 +270,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #222222);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault50, #cacaca);
+    --borderBtnPrimary: var(--colorPrimary50, #007ba3);
+    --borderBtnSuccess: var(--colorSuccess50, #3b975d);
+    --borderBtnCalm: var(--colorCalm50, #50a8c2);
+    --borderBtnWarning: var(--colorWarning50, #cc7e02);
+    --borderBtnDanger: var(--colorDanger50, #d23920);
+    --borderBtnLight: var(--colorLight50, #d0d0d0);
+    --borderBtnStable: var(--colorStable50, #d9d9d9);
+    --borderBtnRoyal: var(--colorRoyal50, #775dcd);
+    --borderBtnDark: var(--colorDark50, #1e1e1e);
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault50, #cacaca);
     --colorPrimary: var(--colorPrimary40, #008cba);
@@ -294,6 +317,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #222222);
 
+    --borderCheckboxDefault: var(--colorDefault50, #cacaca);
+    --borderCheckboxPrimary: var(--colorPrimary40, #008cba);
+    --borderCheckboxSuccess: var(--colorSuccess40, #43ac6a);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #e99002);
+    --borderCheckboxDanger: var(--colorDanger40, #f04124);
+    --borderCheckboxLight: var(--colorLight50, #d0d0d0);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #222222);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #e7e7e7);
     --togglePrimary: var(--colorPrimary40, #008cba);
@@ -306,6 +340,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #222222);
 
+    --borderToggleDefault: var(--colorDefault40, #e7e7e7);
+    --borderTogglePrimary: var(--colorPrimary40, #008cba);
+    --borderToggleSuccess: var(--colorSuccess40, #43ac6a);
+    --borderToggleCalm: var(--colorCalm40, #5bc0de);
+    --borderToggleWarning: var(--colorWarning40, #e99002);
+    --borderToggleDanger: var(--colorDanger40, #f04124);
+    --borderToggleLight: var(--colorLight50, #d0d0d0);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark40, #222222);
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #e7e7e7);
     --bgPrimary: var(--colorPrimary40, #008cba);

package/deprecated/components/crn-QRCode.components.json

@@ -0,0 +1,54 @@
+{
+  "name": "crn-QRCode",
+  "text_pt_BR": "Código QR",
+  "text_en_US": "QR Code",
+  "image": "/node_modules/cronapp-framework-mobile-js/img/cron-icon/crn-QRCode.svg",
+  "description": "Código de barras bidimensional lido por câmera",
+  "description_en_US": "Two-dimensional barcode read by camera",
+  "category": [
+    "LAYOUTS"
+  ],
+  "wrapper": true,
+  "template": "<qr ng-model=\"vars.QR${RANDOM}\" ><div> </div> </qr>",
+  "designTimeHTML": "<img alt=\"qr-code\" style=\"height: 100%;width:100%;min-height:100%; min-width:100%;\"  src=\"node_modules/cronapp-framework-mobile-js/img/qr-code.png\"/>",
+  "designTimeSelector": "div",
+  "properties": {
+    "id": {
+      "order": 3
+    },
+    "class": {
+      "order": 9999
+    },
+    "on-hold": {
+      "removable": false,
+      "type": "event"
+    },
+    "on-double-tap": {
+      "removable": false,
+      "type": "event"
+    },
+    "on-tap": {
+      "removable": false,
+      "type": "event"
+    },
+    "on-swipe": {
+      "removable": false,
+      "type": "event"
+    },
+    "on-drag": {
+      "removable": false,
+      "type": "event"
+    }
+  },
+  "childrenProperties": [
+    {
+      "name": "ng-model",
+      "selector": "qr",
+      "displayName_pt_BR": "Valor",
+      "displayName_en_US": "Value",
+      "type": "text",
+      "order": 1,
+      "mandatory": true
+    }
+  ]
+}