cronapp-framework-js 2.8.20 → 2.8.24

package/components/crn-icon.components.json

@@ -9,8 +9,8 @@
     "LAYOUTS"
   ],
   "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/icon.template.html",
-  "wrapper": false,
-  "autoWrapper": false,
+  "wrapper": true,
+  "forcedGroup": true,
   "properties": {
     "ng-init": {
       "removable": true,
@@ -49,19 +49,22 @@
       "selector": "i",
       "displayName_pt_BR": "Ícone",
       "displayName_en_US": "Icon",
-      "type": "icon"
+      "type": "icon",
+      "order": 1
     },
     {
       "name": "icon-theme",
       "displayName_pt_BR": "Cor do ícone",
       "displayName_en_US": "Icon color",
-      "selector": "i"
+      "selector": "i",
+      "order": 2
     },
     {
       "name": "icon-size",
       "displayName_pt_BR": "Tamanho do ícone",
       "displayName_en_US": "Icon size",
-      "selector": "i"
+      "selector": "i",
+      "order": 3
     }
   ],
   "attributesForPreview": [
@@ -70,6 +73,11 @@
       "type": "options",
       "target": "class",
       "values": [
+        {
+          "key": "color-theme",
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Theme pattern"
+        },
         {
           "key": "color-white",
           "value_pt_BR": "Branco",
@@ -201,25 +209,25 @@
     {
       "name": "icon-size",
       "type": "options",
-      "target": "style",
+      "target": "class",
       "values": [
         {
-          "key": "",
-          "value_pt_BR": "Padrão",
-          "value_en_US": "Default"
+          "key": "font-size-theme",
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Theme pattern"
         },
         {
-          "key": "font-size: 47px;",
+          "key": "font-size-47",
           "value_pt_BR": "Grande",
           "value_en_US": "Big"
         },
         {
-          "key": "font-size: 30px;",
+          "key": "font-size-30",
           "value_pt_BR": "Médio",
           "value_en_US": "Medium"
         },
         {
-          "key": "font-size: 25px;",
+          "key": "font-size-25",
           "value_pt_BR": "Pequeno",
           "value_en_US": "Small"
         }

package/components/crn-image.components.json

@@ -124,22 +124,22 @@
       "type": "options",
       "values": [
         {
-          "key": "object-fit: cover;",
+          "key": "object-fit-cover",
           "value_pt_BR": "Proporcional",
           "value_en_US": "Proportional"
         },
         {
-          "key": "object-fit: contain;",
+          "key": "object-fit-contain",
           "value_pt_BR": "Ajustado (padrão)",
           "value_en_US": "Adjusted (default)"
         },
         {
-          "key": "object-fit: fill;",
+          "key": "object-fit-fill",
           "value_pt_BR": "Preencher",
           "value_en_US": "Fill"
         },
         {
-          "key": "object-fit: none;",
+          "key": "object-fit-none",
           "value_pt_BR": "Nenhum",
           "value_en_US": "None"
         }

package/components/crn-label.components.json

@@ -2,6 +2,7 @@
   "name": "crn-span",
   "text_pt_BR": "Texto Simples",
   "text_en_US": "Simple Text",
+  "pallete": false,
   "wrapper": false,
   "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-simple-text.svg",
   "order": 10,

package/components/crn-one-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-one-container",
+    "text_pt_BR": "1 Coluna",
+    "text_en_US": "1 Column",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-one-container.svg",
+    "description": "Um recipiente para inserir componentes",
+    "description_en_US": "A container for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-one-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-rating.components.json

@@ -9,8 +9,11 @@
     "BUTTONS"
   ],
   "wrapper": false,
-  "autoWrapper": false,
-  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/rating.template.html",
+  "forcedGroup": true,
+  "designTimeHTMLURL": "src/main/webapp/node_modules/cronapp-framework-js/components/templates/rating.designtime.html",
+  "designTimeSelector": "cronapp-rating",
+  "designTimeDynamic": true,
+  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/components/templates/rating.template.html",
   "properties": {
     "id": {
       "order": 1
@@ -21,10 +24,6 @@
     },
     "class": {
       "order": 9999
-    },
-    "icon-theme": {
-      "displayName_pt_BR": "Cor do ícone",
-      "displayName_en_US": "Icon color"
     }
   },
   "styles": [
@@ -56,6 +55,11 @@
       "type": "options",
       "target": "class",
       "values": [
+        {
+          "key": "color-theme",
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Theme pattern"
+        },
         {
           "key": "color-white",
           "value_pt_BR": "Branco",
@@ -187,27 +191,27 @@
     {
       "name": "icon-size",
       "type": "options",
-      "target": "style",
+      "target": "class",
       "values": [
         {
-          "key": "font-size: 20px;",
-          "value_pt_BR": "Padrão",
-          "value_en_US": "Default"
+          "key": "font-size-theme",
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Theme pattern"
         },
         {
-          "key": "font-size: 47px;",
-          "value_pt_BR": "Grande",
-          "value_en_US": "Big"
+          "key": "font-size-20",
+          "value_pt_BR": "Pequeno",
+          "value_en_US": "Small"
         },
         {
-          "key": "font-size: 30px;",
+          "key": "font-size-30",
           "value_pt_BR": "Médio",
           "value_en_US": "Medium"
         },
         {
-          "key": "font-size: 25px;",
-          "value_pt_BR": "Pequeno",
-          "value_en_US": "Small"
+          "key": "font-size-47",
+          "value_pt_BR": "Grande",
+          "value_en_US": "Big"
         }
       ]
     }
@@ -230,16 +234,6 @@
       "type": "icon",
       "order": 2
     },
-    {
-      "name": "icon-theme",
-      "selector": "i"
-    },
-    {
-      "name": "icon-size",
-      "displayName_pt_BR": "Tamanho do ícone",
-      "displayName_en_US": "Icon size",
-      "selector": "i"
-    },
     {
       "name": "icon-off",
       "selector": "cronapp-rating",
@@ -249,10 +243,16 @@
       "order": 2
     },
     {
-      "name": "xattr-theme",
-      "selector": "div",
-      "type": "text",
-      "order": 3
+      "name": "data-theme",
+      "selector": "i",
+      "displayName_pt_BR": "Cor do ícone",
+      "displayName_en_US": "Icon color"
+    },
+    {
+      "name": "data-size",
+      "displayName_pt_BR": "Tamanho do ícone",
+      "displayName_en_US": "Icon size",
+      "selector": "i"
     },
     {
       "name": "xattr-default-value",

package/components/crn-table.components.json

@@ -50,8 +50,7 @@
     {
       "name": "crn-datasource",
       "selector": "div[crn-datasource]",
-      "displayName_pt_BR": "Configurações",
-      "displayName_en_US": "Configuration",
+      "global": true,
       "type": "pageDatasource"
     },
     {

package/components/crn-textarea.components.json

@@ -59,6 +59,15 @@
       "type": "text",
       "order": 5
     },
+    {
+      "name": "validationMessage",
+      "selector": "textarea",
+      "displayName_pt_BR": "Texto quando requerido",
+      "displayName_en_US": "Text when required",
+      "type": "text",
+      "mandatory": false,
+      "order": 6
+    },
     {
       "name": "placeholder",
       "displayName_pt_BR": "Sugestão",

package/components/crn-textinput.components.json

@@ -64,11 +64,7 @@
       "type": "mask",
       "order": 3
     },
-    {
-      "name": "ng-required",
-      "selector": "input",
-      "type": "logic"
-    },
+
     {
       "name": "placeholder",
       "displayName_pt_BR": "Sugestão",
@@ -77,6 +73,21 @@
       "type": "text",
       "order": 4
     },
+    {
+      "name": "ng-required",
+      "selector": "input",
+      "type": "logic",
+      "order": 5
+    },
+    {
+      "name": "validationMessage",
+      "selector": "input",
+      "displayName_pt_BR": "Texto quando requerido",
+      "displayName_en_US": "Text when required",
+      "type": "text",
+      "mandatory": false,
+      "order": 6
+    },
     {
       "name": "mask-placeholder",
       "displayName_pt_BR": "Máscara da sugestão",

package/components/crn-three-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-three-container",
+    "text_pt_BR": "3 Colunas",
+    "text_en_US": "3 Columns",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-three-container.svg",
+    "description": "Três recipiente ao lado para inserir componentes",
+    "description_en_US": "Three container on the side for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-three-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-trhee-six-three-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-three-six-three-container",
+    "text_pt_BR": "3/6/3 Colunas",
+    "text_en_US": "3/6/3 Columns",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-three-six-three-container.svg",
+    "description": "Três recipiente ao lado para inserir componentes",
+    "description_en_US": "Three container on the side for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-three-six-three-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-two-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-two-container",
+    "text_pt_BR": "2 Colunas",
+    "text_en_US": "2 Columns",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-two-container.svg",
+    "description": "Dois recipiente ao lado para inserir componentes",
+    "description_en_US": "Two container on the side for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-two-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-upload-file.components.json

@@ -53,9 +53,8 @@
       "values": [
         {
           "key": "btn-default",
-          "value_pt_BR": "Padrão",
-          "value_en_US": "Default",
-          "color": "#fff"
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Theme pattern"
         },
         {
           "key": "btn-primary",

package/components/crn-upload.components.json

@@ -31,8 +31,8 @@
       "values": [
         {
           "key": "btn-default",
-          "value_pt_BR": "Padrão",
-          "value_en_US": "Default"
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Theme pattern"
         },
         {
           "key": "btn-primary",

package/components/crn-vertical-container.components.json

@@ -5,6 +5,10 @@
   "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-horizontal-container.svg",
   "description": "Dois recipiente empilhado para inserir componentes",
   "description_en_US": "Two stacked container for inserting components",
+  "category": [
+    "LAYOUTS"
+  ],
+  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/grid-vertical.template.html",
   "properties": {
     "class": {
       "order": 9999
@@ -37,12 +41,16 @@
       "type": "event"
     }
   },
-  "styles": [
-    {
-      "selector": "div#{id} div",
-      "text_pt_BR": "Geral",
-      "text_en_US": "General"
-    }
-  ],
-  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/grid-vertical.template.html"
-}
+  "forcedGroup": true,
+  "wrapper": false,
+  "autoWrapper": true,
+  "handleRules": {
+    "canIncrement": true,
+    "rules": [
+      {
+        "sourceHTML": "<div class=\"col-md-12\" data-container=\"true\" data-replace=\"true\">Content goes here</div> ",
+        "targetSelector": ":self"
+      }
+    ]
+  }
+}

package/components/css/checkbox-color.css

@@ -1,3 +1,19 @@
+/* theme */
+
+.checkbox-theme .k-checkbox:focus+.k-checkbox-label:before, .checkbox-theme .k-checkbox:hover+.k-checkbox-label:before, .checkbox-theme .k-radio:focus+.k-radio-label:before, .checkbox-theme .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-blue);
+    border-color: var(--light-blue);
+}
+
+.checkbox-theme .k-checkbox:checked+.k-checkbox-label:before, .checkbox-theme .k-checkbox:indeterminate+.k-checkbox-label:before {
+    border-color: var(--light-blue);
+    background-color: var(--light-blue);
+}
+
+.checkbox-theme .k-checkbox:checked+.k-checkbox-label:after, .checkbox-theme .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background-color: var(--blue);
+    border-color: var(--light-blue);
+}
 
 /* white */
 

package/components/css/color-default.css

@@ -1,6 +1,8 @@
 @import 'checkbox-color.css';
 @import 'combobox-color.css';
 @import 'option-color.css';
+@import 'image.css';
+@import 'font-size.css';
 
 :root {
     --white: #ffffff;

package/components/css/font-size.css

@@ -0,0 +1,15 @@
+.font-size-20 {
+    font-size: 20px;
+}
+
+.font-size-25 {
+    font-size: 25px;
+}
+
+.font-size-47 {
+    font-size: 47px;
+}
+
+.font-size-30 {
+    font-size: 30px;
+}

package/components/css/image.css

@@ -0,0 +1,15 @@
+.object-fit-contain {
+    object-fit: contain;
+}
+
+.object-fit-cover {
+    object-fit: cover;
+}
+
+.object-fit-fill {
+    object-fit: fill;
+}
+
+.object-fit-none {
+    object-fit: none;
+}

package/components/templates/Component_Container/crn-eight-four-container.template.html

@@ -0,0 +1,4 @@
+<div class="eight-twelve-container">
+    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">2 Column</div>    
+</div>

package/components/templates/Component_Container/crn-four-eight-container.template.html

@@ -0,0 +1,4 @@
+<div class="four-twelve-container">
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" data-container="true" data-replace="true">2 Column</div>
+</div>

package/components/templates/Component_Container/crn-one-container.template.html

@@ -0,0 +1 @@
+<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-container="true" data-replace="true">1 Column</div>

package/components/templates/Component_Container/crn-three-container.template.html

@@ -0,0 +1,5 @@
+<div class="three-container">
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">2 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">3 Column</div>
+</div>

package/components/templates/Component_Container/crn-three-six-three-container.template.html

@@ -0,0 +1,5 @@
+<div class="trhee-twelve-container">
+    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">2 Column</div>
+    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-container="true" data-replace="true">3 Column</div>
+</div>

package/components/templates/Component_Container/crn-two-container.template.html

@@ -0,0 +1,4 @@
+<div class="two-container">
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">2 Column</div>
+</div>

package/components/templates/button.template.html

@@ -1,4 +1,4 @@
 <button class="btn k-button btn-block btn-default" ng-click="" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-    <i class="glyphicon glyphicon-home color-white" icon-theme="color-white"></i>
-    <span class="color-white" text-theme="color-white">Button</span>
+    <i class="glyphicon glyphicon-home color-theme" icon-theme="color-theme"></i>
+    <span class="color-theme" text-theme="color-theme">Button</span>
 </button>

package/components/templates/cron-autocomplete.designtime.html

@@ -1,6 +1,6 @@
-<div class="form-group">
-    <label>Label designtime</label>
+<div class="form-group" id="${COMPONENTID}">
+    <label for="cron-${COMPONENTID}">Label</label>
     <span class="k-widget k-autocomplete cronAutoComplete" style="width: 100%;">
-        <input class="cronAutoComplete k-input" placeholder="Selecione um Item" type="text">
+        <input class="cronAutoComplete k-input" type="text">
     </span>
 </div>

package/components/templates/cron-checkbox.template.html

@@ -1,5 +1,4 @@
-
-<div class="form-group checkbox-blue" checkbox-theme="checkbox-blue">
+<div class="form-group checkbox-theme" checkbox-theme="checkbox-theme">
     <input type="checkbox" id="vars.checkbox${RANDOM}" ng-model="vars.checkbox${RANDOM}" class="k-checkbox" ng-initial-value="false" crn-allow-null-values="true" ng-false-value="false" ng-true-value="true">
     <label class="k-checkbox-label" for="vars.checkbox${RANDOM}">Label</label>
 </div>