cronapp-framework-mobile-js 2.8.7 → 2.8.11

package/components/crn-ion-tab.components.json

@@ -2,6 +2,7 @@
   "name": "crn-ion-tab",
   "text_pt_BR": "Abas",
   "text_en_US": "Tabs",
+  "pallete": false,
   "image": "/node_modules/cronapp-framework-mobile-js/img/cron-icon/crn-tabs.svg",
   "description": "Diferentes painéis separados por abas",
   "description_en_US": "Different panels separated by tabs",

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

@@ -12,7 +12,7 @@
   "forcedGroup": true,
   "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/dist/components/templates/item.swipe.template.html",
   "properties": {
-    "onclick": {
+    "ng-click": {
       "type": "event"
     },
     "id":{
@@ -39,7 +39,7 @@
   ],
   "styles": [
     {
-      "selector": "div#{id} .item-content",
+      "selector": "div#{id} .item-content, div#{id} .item",
       "text_pt_BR": "Plano de fundo",
       "text_en_US": "Background"
     },

package/components/crn-list-item-icon.components.json

@@ -85,31 +85,18 @@
       "values": [
         {
           "key": "font-size:100%;",
-          "value": "100%"
+          "value_pt_BR": "Pequeno",
+          "value_en_US": "Small"
         },
         {
           "key": "font-size:200%;",
-          "value": "200%"
+          "value_pt_BR": "Médio",
+          "value_en_US": "Medium"
         },
         {
           "key": "font-size:300%;",
-          "value": "300%"
-        },
-        {
-          "key": "font-size:400%;",
-          "value": "400%"
-        },
-        {
-          "key": "font-size:500%;",
-          "value": "500%"
-        },
-        {
-          "key": "font-size:600%;",
-          "value": "600%"
-        },
-        {
-          "key": "font-size:700%;",
-          "value": "700%"
+          "value_pt_BR": "Grande",
+          "value_en_US": "Big"
         }
       ]
     },
@@ -257,4 +244,4 @@
       "text_en_US": "Title"
     }
   ]
-}
+}

package/components/crn-list-swipe.components.json

@@ -67,7 +67,7 @@
     "class": {
       "order": 9999
     },
-    "onclick": {
+    "ng-click": {
       "type": "event"
     }
   },
@@ -82,7 +82,7 @@
   },
   "styles": [
     {
-      "selector": "div#{id} .item-content",
+      "selector": "div#{id} .item-content, div#{id} .item",
       "text_pt_BR": "Plano de fundo",
       "text_en_US": "Background"
     },

package/components/crn-list.components.json

@@ -59,7 +59,7 @@
     "class": {
       "order": 9999
     },
-    "onclick": {
+    "ng-click": {
       "type": "event"
     }
   },

package/components/crn-mobile-menu.components.json

@@ -1,5 +1,7 @@
 {
   "name": "crn-mobile-menu",
+  "onDoubleClick": "openEditor",
+  "onDrop": "openEditor",
   "text_pt_BR": "Menu Dinâmico",
   "text_en_US": "Dynamic Menu",
   "class": "adjust-icon mdi mdi-menu",

package/components/crn-navbar.components.json

@@ -7,6 +7,7 @@
   "class": "adjust-icon mdi mdi-navigation",
   "template": "",
   "pallete": false,
+  "forcedGroup": true,
   "properties": {
     "xattr-theme": {
       "displayName": "Theme"

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

@@ -6,6 +6,7 @@
   "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/dist/components/templates/item.slider.template.html",
   "wrapper": false,
   "pallete": false,
+  "forcedGroup": true,
   "properties": {
     "id": {
       "order": 2
@@ -30,11 +31,6 @@
       "type": "options",
       "target": "class",
       "values": [
-        {
-          "key": "",
-          "value_pt_BR": "Padrão",
-          "value_en_US": "Default"
-        },
         {
           "key": "assertive-bg",
           "value_pt_BR": "Assertivo",
@@ -90,9 +86,112 @@
           "color": "#444"
         }
       ]
+    },
+    {
+      "name": "object-fit",
+      "target": "style",
+      "type": "options",
+      "values": [
+        {
+          "key": "object-fit: cover;",
+          "value_pt_BR": "Proporcional",
+          "value_en_US": "Proportional"
+        },
+        {
+          "key": "object-fit: contain;",
+          "value_pt_BR": "Ajustado",
+          "value_en_US": "Adjusted"
+        },
+        {
+          "key": "object-fit: fill;",
+          "value_pt_BR": "Preencher (padrão)",
+          "value_en_US": "Fill (default)"
+        },
+        {
+          "key": "object-fit: none;",
+          "value_pt_BR": "Nenhum",
+          "value_en_US": "None"
+        }
+      ]
+    },
+    {
+      "name": "vertical-text-position",
+      "type": "btngroup",
+      "target": "class",
+      "values": [
+        {
+          "key": "top-13",
+          "value_pt_BR": "Topo",
+          "value_en_US": "Top",
+          "icon": "mdi mdi-arrow-up-bold"
+        },
+        {
+          "key": "top-50",
+          "value_pt_BR": "Centro",
+          "value_en_US": "Center",
+          "icon": "mdi mdi-ray-vertex"
+        },
+        {
+          "key": "top-78",
+          "value_pt_BR": "Abaixo",
+          "value_en_US": "Bottom",
+          "icon": "mdi mdi-arrow-down-bold"
+        }
+      ]
+    },
+    {
+      "name": "horizontal-text-position",
+      "type": "btngroup",
+      "target": "class",
+      "values": [
+        {
+          "key": "text-left",
+          "value_pt_BR": "Esquerda",
+          "value_en_US": "Left",
+          "icon": "mdi mdi-ray-start"
+        },
+        {
+          "key": "text-center",
+          "value_pt_BR": "Centro",
+          "value_en_US": "Center",
+          "icon": "mdi mdi-ray-vertex"
+        },
+        {
+          "key": "text-right",
+          "value_pt_BR": "Direita",
+          "value_en_US": "Right",
+          "icon": "mdi mdi-ray-end"
+        }
+      ]
     }
   ],
   "childrenProperties": [
+    {
+      "name": "src",
+      "type": "projectResource",
+      "resourceType": "image/jpeg,image/gif,image/png,image/svg+xml",
+      "displayName_pt_BR": "Imagem",
+      "displayName_en_US": "Image",
+      "selector": "img"
+    },
+    {
+      "name": "object-fit",
+      "displayName_pt_BR": "Preenchimento da imagem",
+      "displayName_en_US": "Image filling",
+      "selector": "img"
+    },
+    {
+      "name": "horizontal-text-position",
+      "selector": "h2",
+      "displayName_pt_BR": "Posição horizontal do texto",
+      "displayName_en_US": "Horizontal text position"
+    },
+    {
+      "name": "vertical-text-position",
+      "selector": "h2",
+      "displayName_pt_BR": "Posição vertical do texto",
+      "displayName_en_US": "Vertical text position"
+    },
     {
       "name": "ng-click",
       "selector": "div",

package/components/crn-slider.components.json

@@ -8,7 +8,7 @@
   "category": [
     "LAYOUTS"
   ],
-  "forcedGroup": true,
+  "wrapper": false,
   "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/dist/components/templates/slider.template.html",
   "properties": {
     "id": {
@@ -23,7 +23,7 @@
     "rules": [
       {
         "activeClass": "active",
-        "sourceHTML": "<ion-slide xattr-theme=\"dark-bg\" id=\"crn-slider-item-${RANDOM}-1\" data-component=\"crn-slider-item\" class=\"dark-bg\" style=\"width: 100%; height: 200px; position: relative\" data-container=\"true\" data-replace=\"true\"> <h2 data-component=\"crn-label\" style=\"color: white; font-weight: bold; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute;\" data-container=\"true\" data-replace=\"true\">SLIDE TITLE</h2> </ion-slide>",
+        "sourceHTML": "<ion-slide xattr-theme=\"positive-bg\" id=\"crn-slider-item-${RANDOM}\" data-component=\"crn-slider-item\" class=\"positive-bg crn-slider-item\" data-container=\"true\" data-replace=\"true\"> <img alt=\"Placehold\" src=\"node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png\" class=\"component-holder\" style=\"object-fit: cover;\" xattr-position=\"\" width=\"100%\" height=\"100%\" object-fit=\"object-fit: cover;\" data-component=\"crn-image\" id=\"crn-image-${RANDOM}\"> <h2 class=\"text-center top-50\" data-component=\"crn-label\" data-container=\"true\" data-replace=\"true\" horizontal-text-position=\"text-center\" vertical-text-position=\"top-50\">NEW SLIDE</h2> </ion-slide>",
         "targetSelector": "ion-slide-box"
       }
     ]
@@ -31,20 +31,20 @@
   "childrenProperties": [
     {
       "name": "auto-play",
-      "selector": "ion-slide-box[auto-play]",
+      "selector": "ion-slide-box",
       "displayName_pt_BR": "Início automático",
       "displayName_en_US": "Auto play",
       "type": "logic"
     },
     {
       "name": "slide-interval",
-      "selector": "ion-slide-box[slide-interval]",
+      "selector": "ion-slide-box",
       "displayName_pt_BR": "Intervalo de transição (segundos)",
       "displayName_en_US": "Slide interval (seconds)"
     },
     {
       "name": "does-continue",
-      "selector": "ion-slide-box[does-continue]",
+      "selector": "ion-slide-box",
       "displayName_pt_BR": "Reprodução contínua?",
       "displayName_en_US": "Does continue?",
       "type": "logic"
@@ -89,7 +89,7 @@
       "selector": "div",
       "type": "event"
     }
-  ],  
+  ],
   "styles": [
     {
       "selector": "div#{id} .slider-pager .slider-pager-page.active ",

package/components/crn-tabs-icon-only-item.components.json

@@ -6,7 +6,7 @@
   "wrapper": false,
   "autoWrapper": true,
   "pallete": false,
-  "template": "<a class=\"tab-item\" title=\"New tabs\" data-component=\"crn-tabs-icon-only-item\" href=\"\"><i class=\"icon ion-gear-a\"></i></a>",
+  "template": "<a class=\"tab-item\" title=\"New tabs\" data-component=\"crn-tabs-icon-only-item\" contenttitle=\"\" href=\"\"><i class=\"icon ion-gear-a\"></i><span>New tabs</span></a>",
   "controls": {
     "ungroup": false,
     "resizable": false,
@@ -33,9 +33,6 @@
     "id": {
       "order": 4
     },
-    "class": {
-      "order": 9999
-    },
     "ng-click": {
       "removable": false,
       "type": "event"
@@ -64,16 +61,25 @@
   "childrenProperties": [
     {
       "name": "class",
-      "selector": "i",
       "displayName_pt_BR": "Ícone",
       "displayName_en_US": "Icon",
+      "selector": "i",
       "type": "icon",
       "order": 1
     },
     {
-      "name": "title",
+      "name": "title",      
       "selector": "a",
-      "type": "text"
+      "type": "text",
+      "order": 2
+    },
+    {
+      "name": "content",
+      "displayName_pt_BR": "Título",
+      "displayName_en_US": "Title",
+      "selector": "span",
+      "type": "text",
+      "order": 3
     }
   ]
 }

package/components/crn-tabs-icon-only.components.json

@@ -1,13 +1,17 @@
 {
     "name": "crn-tabs-icon-only",
-    "text_pt_BR": "Abas com ícone",
-    "text_en_US": "Tabs with icon",
+    "text_pt_BR": "Rodapé com ícone",
+    "text_en_US": "Footer with icon",
     "image": "/node_modules/cronapp-framework-mobile-js/img/cron-icon/crn-tabs-icon-only.svg",
-    "description": "Diferentes painéis separados por abas com ícone",
-    "description_en_US": "Different panels separated by tabs with icon",
+    "description": "Rodapé com ícone e título",
+    "description_en_US": "Footer with icon and title",
     "category": [
         "LAYOUTS"
     ],
+    "wrapper": false,
+    "autoWrapper": true,
+    "forcedGroup": true,
+    "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/components/templates/tabs-icon-only.template.html",
     "controls": {
         "ungroup": true,
         "resizable": false,
@@ -16,10 +20,13 @@
         "pluggable": false,
         "removable": true
     },
-    "wrapper": false,
-    "autoWrapper": true,
-    "forcedGroup": true,
-    "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/components/templates/tabs-icon-only.template.html",
+    "droppableArea": {
+        "onmiddle": true,
+        "ontop": false,
+        "onbottom": false,
+        "onleft": false,
+        "onright": false
+    },
     "properties": {
         "class": {
             "order": 9999
@@ -45,13 +52,13 @@
         "tabs-color": {
             "displayName_pt_BR": "Cor dos ícones",
             "displayName_en_US": "Icon color",
-            "selector": "i",
+            "selector": "tab-item",
             "order": 2
         },
         "tabs-size": {
             "displayName_pt_BR": "Tamanho dos ícones",
             "displayName_en_US": "Icon size",
-            "selector": "i",
+            "selector": "tab-item",
             "order": 3
         }
     },
@@ -60,7 +67,7 @@
         "rules": [
             {
                 "activeClass": "active",
-                "sourceHTML": "<a class=\"tab-item\" title=\"New tabs\" data-component=\"crn-tabs-icon-only-item\" href=\"\"><i class=\"icon ion-gear-a\"></i></a>",
+                "sourceHTML": "<a class=\"tab-item\" title=\"New tabs\" data-component=\"crn-tabs-icon-only-item\" contenttitle=\"\" href=\"\"><i class=\"icon ion-gear-a\"></i><span>New tabs</span></a>",
                 "targetSelector": "div.tabs"
             }
         ]

package/components/crn-textarea.components.json

@@ -9,7 +9,7 @@
     "INPUTS", "FORMS"
   ],
   "wrapper": false,
-  "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/dist/compnents/templates/textarea.template.html",
+  "templateURL": "src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/dist/components/templates/textarea.template.html",
   "properties": {
     "class": {
       "order": 9999

package/components/css/app.css

@@ -0,0 +1,78 @@
+@import "tabs-color.css";
+@import 'background-color.css';
+@import 'icon-size.css';
+@import 'crn-ion-segment.css';
+
+:root {
+    --assertive: #ef473a;
+    --balanced: #33cd5f;
+    --energized: #ffc900;
+    --light: #ffffff;
+    --stable: #f8f8f8;
+    --calm: #11c1f3;
+    --positive: #387ef5;
+    --royal: #886aea;
+    --dark: #444444;
+
+    --white: #ffffff;
+    --gray: #333333;
+    --black: #000000;
+    --blue: #0247FE;
+    --light-blue: #85A5FF;
+    --dark-blue: #00217A;
+    --purple: #3D01A4;
+    --light-purple: #B285FF;
+    --dark-purple: #2D007A;
+    --red: #FE2712;
+    --light-red: #FE8F84;
+    --dark-red: #7A0B00;
+    --orange: #FB9B02;
+    --light-orange: #FFD085;
+    --dark-orange: #7A4B00;
+    --yellow: #FFFF33;
+    --light-yellow: #FFFF85;
+    --dark-yellow: #7A7A00;
+    --green: #66B032;
+    --light-green: #B7FF85;
+    --dark-green: #337A00;
+}
+
+.font-size-100 {
+    font-size: 100%;
+}
+
+.font-size-200 {
+    font-size: 200%;
+}
+
+.font-size-300 {
+    font-size: 300%;
+}
+
+.font-size-400 {
+    font-size: 400%;
+}
+
+.font-size-500 {
+    font-size: 500%;
+}
+
+.font-size-600 {
+    font-size: 600%;
+}
+
+.font-size-700 {
+    font-size: 700%;
+}
+
+.top-13 {
+    top: 13%;
+}
+
+.top-50 {
+    top: 50%;
+}
+
+.top-78 {
+    top: 78%;
+}

package/components/css/background-color.css

@@ -80,4 +80,42 @@
 
 .tabs-striped.background-dark-green .tabs {
     background-color: var(--dark-green);
-}
+}
+
+/* Cores primárias */
+
+.tabs-striped.background-assertive .tabs {
+    background-color: var(--assertive);
+}
+
+.tabs-striped.background-balanced .tabs {
+    background-color: var(--balanced);
+}
+
+.tabs-striped.background-energized .tabs {
+    background-color: var(--energized);
+}
+
+.tabs-striped.background-light .tabs {
+    background-color: var(--light);
+}
+
+.tabs-striped.background-stable .tabs {
+    background-color: var(--stable);
+}
+
+.tabs-striped.background-calm .tabs {
+    background-color: var(--calm);
+}
+
+.tabs-striped.background-positive .tabs {
+    background-color: var(--positive);
+}
+
+.tabs-striped.background-royal .tabs {
+    background-color: var(--royal);
+}
+
+.tabs-striped.background-dark .tabs {
+    background-color: var(--dark);
+}

package/components/css/color-default.css

@@ -1,31 +1,3 @@
-@import "tabs-color.css";
-@import 'background-color.css';
-@import 'icon-size.css';
-
-:root {
-    --white: #ffffff;
-    --gray: #333333;
-    --black: #000000;
-    --blue: #0247FE;
-    --light-blue: #85A5FF;
-    --dark-blue: #00217A;
-    --purple: #3D01A4;
-    --light-purple: #B285FF;
-    --dark-purple: #2D007A;
-    --red: #FE2712;
-    --light-red: #FE8F84;
-    --dark-red: #7A0B00;
-    --orange: #FB9B02;
-    --light-orange: #FFD085;
-    --dark-orange: #7A4B00;
-    --yellow: #FFFF33;
-    --light-yellow: #FFFF85;
-    --dark-yellow: #7A7A00;
-    --green: #66B032;
-    --light-green: #B7FF85;
-    --dark-green: #337A00;
-}
-
 .color-white {
     color: var(--white);
 }