cronapp-framework-js 2.8.24 → 2.8.28

package/components/crn-button.components.json

@@ -85,8 +85,8 @@
             "values": [
                 {
                     "key": "btn-default",
-                    "value_pt_BR": "Padrão do tema",
-                    "value_en_US": "Theme pattern"
+                    "value_pt_BR": "Padrão",
+                    "value_en_US": "Default"
                 },
                 {
                     "key": "btn-primary",
@@ -129,11 +129,6 @@
             "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",
@@ -267,11 +262,6 @@
             "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",

package/components/crn-chart.components.json

@@ -9,6 +9,7 @@
     "LAYOUTS", "FORMS"
   ],
   "wrapper": false,
+  "forcedGroup": true,
   "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/chart.template.html",
   "designTimeHTML": "<img style=\"height: 100%;width:100%;min-height:100%; min-width:100%;\"  src=\"node_modules/cronapp-framework-js/img/svg-charts.svg\"/>",
   "designTimeSelector": "canvas",

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

@@ -12,6 +12,7 @@
   ],
   "order": 11,
   "wrapper": false,
+  "forcedGroup": true,
   "designTimeDynamic": true,
   "designTimeHTMLURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-dynamic-menu.designtime.html",
   "designTimeSelector": ":self",

package/components/crn-enterprise-checkbox.components.json

@@ -28,11 +28,6 @@
       "type": "options",
       "target": "class",
       "values": [
-        {
-          "key": "checkbox-theme",
-          "value_pt_BR": "Padrão do tema",
-          "value_en_US": "Theme pattern"
-        },
         {
           "key": "checkbox-white",
           "value_pt_BR": "Branco",

package/components/crn-enterprise-combobox-multiple.components.json

@@ -33,11 +33,6 @@
       "type": "options",
       "target": "class",
       "values": [
-        {
-          "key": "combobox-theme",
-          "value_pt_BR": "Padrão do tema",
-          "value_en_US": "Theme pattern"
-        },
         {
           "key": "combobox-gray",
           "value_pt_BR": "Cinza",

package/components/crn-enterprise-dynamic-combobox.components.json

@@ -12,7 +12,6 @@
   ],
   "order": 3,
   "setRandomId": false,
-  "wrapper": false,
   "designTimeDynamic": true,
   "designTimeHTMLURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-dynamic-combobox.designtime.html",
   "designTimeSelector": "cron-dynamic-select",
@@ -104,6 +103,7 @@
       "displayName_pt_BR": "Texto quando requerido",
       "displayName_en_US": "Text when required",
       "type": "text",
+      "mandatory": false,
       "order": 5
     },
     {

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

@@ -37,17 +37,6 @@
             "removable": true,
             "type": "event"
         }
-    },
-    "forcedGroup": false,
-    "wrapper": false,
-    "autoWrapper": true,
-    "handleRules": {
-        "canIncrement": true,
-        "rules": [
-            {
-                "sourceHTML": "<div class=\"col-md-6\" data-container=\"true\" data-replace=\"true\">Content goes here</div> ",
-                "targetSelector": ":self"
-            }
-        ]
     }
+
 }

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": true,
-  "forcedGroup": true,
+  "wrapper": false,
+  "autoWrapper": false,
   "properties": {
     "ng-init": {
       "removable": true,
@@ -49,22 +49,19 @@
       "selector": "i",
       "displayName_pt_BR": "Ícone",
       "displayName_en_US": "Icon",
-      "type": "icon",
-      "order": 1
+      "type": "icon"
     },
     {
       "name": "icon-theme",
       "displayName_pt_BR": "Cor do ícone",
       "displayName_en_US": "Icon color",
-      "selector": "i",
-      "order": 2
+      "selector": "i"
     },
     {
       "name": "icon-size",
       "displayName_pt_BR": "Tamanho do ícone",
       "displayName_en_US": "Icon size",
-      "selector": "i",
-      "order": 3
+      "selector": "i"
     }
   ],
   "attributesForPreview": [
@@ -73,11 +70,6 @@
       "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",
@@ -209,25 +201,25 @@
     {
       "name": "icon-size",
       "type": "options",
-      "target": "class",
+      "target": "style",
       "values": [
         {
-          "key": "font-size-theme",
-          "value_pt_BR": "Padrão do tema",
-          "value_en_US": "Theme pattern"
+          "key": "",
+          "value_pt_BR": "Padrão",
+          "value_en_US": "Default"
         },
         {
-          "key": "font-size-47",
+          "key": "font-size: 47px;",
           "value_pt_BR": "Grande",
           "value_en_US": "Big"
         },
         {
-          "key": "font-size-30",
+          "key": "font-size: 30px;",
           "value_pt_BR": "Médio",
           "value_en_US": "Medium"
         },
         {
-          "key": "font-size-25",
+          "key": "font-size: 25px;",
           "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-ordered-sub-list.components.json

@@ -2,8 +2,7 @@
     "name": "crn-ordered-sub-list",
     "text_pt_BR": "Sub lista ordenada",
     "text_en_US": "Ordered sub list",
-    "wrapper": false,
-    "autoWrapper": true,
+    "wrapper": true,
     "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-ordered-sub-list.svg",
     "description": "Sublista de segundo grau com indicadores numerados",
     "description_en_US": "Second degree sublist with numbered indicators",

package/components/crn-rating.components.json

@@ -9,11 +9,8 @@
     "BUTTONS"
   ],
   "wrapper": false,
-  "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",
+  "autoWrapper": false,
+  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/rating.template.html",
   "properties": {
     "id": {
       "order": 1
@@ -55,11 +52,6 @@
       "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",
@@ -191,27 +183,27 @@
     {
       "name": "icon-size",
       "type": "options",
-      "target": "class",
+      "target": "style",
       "values": [
         {
-          "key": "font-size-theme",
-          "value_pt_BR": "Padrão do tema",
-          "value_en_US": "Theme pattern"
+          "key": "font-size: 20px;",
+          "value_pt_BR": "Padrão",
+          "value_en_US": "Default"
         },
         {
-          "key": "font-size-20",
-          "value_pt_BR": "Pequeno",
-          "value_en_US": "Small"
+          "key": "font-size: 47px;",
+          "value_pt_BR": "Grande",
+          "value_en_US": "Big"
         },
         {
-          "key": "font-size-30",
+          "key": "font-size: 30px;",
           "value_pt_BR": "Médio",
           "value_en_US": "Medium"
         },
         {
-          "key": "font-size-47",
-          "value_pt_BR": "Grande",
-          "value_en_US": "Big"
+          "key": "font-size: 25px;",
+          "value_pt_BR": "Pequeno",
+          "value_en_US": "Small"
         }
       ]
     }
@@ -235,25 +227,31 @@
       "order": 2
     },
     {
-      "name": "icon-off",
-      "selector": "cronapp-rating",
-      "displayName_pt_BR": "Ícone Inativo",
-      "displayName_en_US": "Inactive Icon",
-      "type": "icon",
-      "order": 2
-    },
-    {
-      "name": "data-theme",
+      "name": "icon-theme",
       "selector": "i",
       "displayName_pt_BR": "Cor do ícone",
       "displayName_en_US": "Icon color"
     },
     {
-      "name": "data-size",
+      "name": "icon-size",
       "displayName_pt_BR": "Tamanho do ícone",
       "displayName_en_US": "Icon size",
       "selector": "i"
     },
+    {
+      "name": "icon-off",
+      "selector": "cronapp-rating",
+      "displayName_pt_BR": "Ícone Inativo",
+      "displayName_en_US": "Inactive Icon",
+      "type": "icon",
+      "order": 2
+    },
+    {
+      "name": "xattr-theme",
+      "selector": "div",
+      "type": "text",
+      "order": 3
+    },
     {
       "name": "xattr-default-value",
       "selector": "cronapp-rating",

package/components/crn-textinputbutton.components.json

@@ -57,6 +57,14 @@
       "onDisplay": "javascript:function() { return arguments[0].replace('vars.',''); }",
       "mandatory": true
     },
+    {
+      "name": "class",
+      "displayName_pt_BR": "Ícone",
+      "displayName_en_US": "Icon",
+      "selector": "button i",
+      "type": "icon",
+      "order": 2
+    },
     {
       "name": "type",
       "selector": "input",

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

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

package/components/crn-upload.components.json

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

package/components/css/checkbox-color.css

@@ -1,19 +1,3 @@
-/* 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,8 +1,6 @@
 @import 'checkbox-color.css';
 @import 'combobox-color.css';
 @import 'option-color.css';
-@import 'image.css';
-@import 'font-size.css';
 
 :root {
     --white: #ffffff;

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-theme" icon-theme="color-theme"></i>
-    <span class="color-theme" text-theme="color-theme">Button</span>
+    <i class="glyphicon glyphicon-home color-white" icon-theme="color-white"></i>
+    <span class="color-white" text-theme="color-white">Button</span>
 </button>

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

@@ -1,5 +1,37 @@
-<div class="form-group" id="${COMPONENTID}">
+<div class="form-group" id="{{attrs.id}}-designtime">
     <label for="cron-${COMPONENTID}">Label</label>
+    <span style="display: none;" id="cron-autocomplete-designtime" data-attrs="{{attrs}}">
+        <script>
+
+            let $documentDesignTime = $(document.getElementsByTagName('iframe')[0].contentWindow.document);
+            let wait = setInterval(()=> {
+
+                let $element = $documentDesignTime.find('[id=cron-autocomplete-designtime]')
+                if ($element.length) {
+                    clearInterval(wait);
+
+                    $element.each((idx, c) => {
+
+                        let $current = $(c);
+                        let attrs = $current.data('attrs');
+                        let $label = $documentDesignTime.find(`#${attrs.id}`).find('label');
+                        let $labelDesignTime = $documentDesignTime.find(`#${attrs.id}-designtime`).find('label');
+                        if (!$label.data('synchronize-started')) {
+                            $label.data('synchronize-started', true);
+                            let synchronize = setInterval(() => {
+                                if ($label.html() !== $labelDesignTime.html()) {
+                                    $labelDesignTime.html($label.html());
+                                }
+                            }, 500);
+
+                        }
+
+                    });
+                }
+            });
+
+        </script>
+    </span>
     <span class="k-widget k-autocomplete cronAutoComplete" style="width: 100%;">
         <input class="cronAutoComplete k-input" type="text">
     </span>

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

@@ -1,4 +1,5 @@
-<div class="form-group checkbox-theme" checkbox-theme="checkbox-theme">
+
+<div class="form-group checkbox-blue" checkbox-theme="checkbox-blue">
     <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>

package/components/templates/cron-combobox-multiple.template.html

@@ -1,4 +1,4 @@
-<div class="form-group combobox-theme" combobox-theme="combobox-theme">
+<div class="form-group combobox-gray" combobox-theme="combobox-gray">
     <label for="cron-${COMPONENTID}-container">Label</label>
     <cron-multi-select options="{}" ng-required="false" id="cron-${COMPONENTID}" ng-model="vars.multipleCombobox${RANDOM}" class="crn-select form-control k-content">
     </cron-multi-select>

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

@@ -16,51 +16,15 @@
 <section class="form">
     <form crn-datasource="" data-component="crn-form">
         <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-8499">
-                <button aria-label="{{'StartInserting' | translate}}" class="btn k-button btn-fab btn-default" ng-click="datasource.startInserting()" xattr-theme="btn-default" xattr-fullsize="">
-                    <span class="k-icon k-i-plus color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-8499">
-                <button aria-label="{{'StartEditing' | translate}}" class="btn k-button btn-fab btn-default" ng-click="datasource.startEditing()" xattr-theme="btn-default" xattr-fullsize="">
-                    <span class="k-icon k-i-edit color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-84681">
-                <button aria-label="{{'Before' | translate}}" class="btn k-button btn-fab btn-default disabled" ng-disabled="!datasource.hasPrevious()" ng-click="datasource.previous()" xattr-theme="btn-default" xattr-fullsize="">
-                    <span class="k-icon k-i-arrow-chevron-left color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-8499">
-                <button aria-label="{{'Next' | translate}}" class="btn k-button btn-fab btn-default disabled" ng-disabled="!datasource.hasNext()" ng-click="datasource.next()" xattr-theme="btn-default" xattr-fullsize="">
-                    <span class="k-icon k-i-arrow-chevron-right color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-8499">
-                <button aria-label="{{'Remove' | translate}}" class="btn k-button btn-fab btn-danger" ng-click="datasource.remove()" xattr-theme="btn-danger" xattr-fullsize="">
-                    <span class="k-icon k-i-close color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
+            <button aria-label="{{'StartInserting' | translate}}" class="btn btn-primary btn-fab k-button" data-component="crn-button" ng-click="datasource.startInserting()"><span class="k-icon k-i-plus"></span></button>
+            <button aria-label="{{'StartEditing' | translate}}" class="btn btn-primary btn-fab k-button" data-component="crn-button" ng-click="datasource.startEditing()"><span class="k-icon k-i-edit"></span></button>
+            <button aria-label="{{'Before' | translate}}" class="btn btn-primary btn-fab k-button" data-component="crn-button" ng-disabled="!datasource.hasPrevious()" ng-click="datasource.previous()"><span class="k-icon k-i-arrow-chevron-left"></span></button>
+            <button aria-label="{{'Next' | translate}}" class="btn btn-primary btn-fab k-button" data-component="crn-button" ng-disabled="!datasource.hasNext()" ng-click="datasource.next()"><span class="k-icon k-i-arrow-chevron-right"></span></button>
+            <button aria-label="{{'Remove' | translate}}" class="btn btn-danger btn-fab k-button" data-component="crn-button" ng-click="datasource.remove()"><span class="k-icon k-i-close"></span></button>
         </div>
         <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
-
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-8499">
-                <button aria-label="{{'SaveChanges' | translate}}" class="btn k-button btn-fab btn-success" ng-disabled="!datasource.hasNext()" ng-click="datasource.post()" xattr-theme="btn-success" id="btn_crud_post_8499" xattr-fullsize="">
-                    <span class="k-icon k-i-check color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
-            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-8499">
-                <button aria-label="{{'CancelChanges' | translate}}" class="btn k-button btn-fab btn-danger" ng-click="datasource.cancel()" xattr-theme="btn-danger" id="btn_crud_cancel_8499" xattr-fullsize="">
-                    <span class="k-icon k-i-cancel color-theme" icon-theme="color-theme" text-theme="color-theme"></span>
-                </button>
-            </div>
-
+            <button aria-label="{{'SaveChanges' | translate}}" class="btn btn-success btn-fab k-button" id="btn_crud_post_${RANDOM}" data-component="crn-button" ng-click="datasource.post()"><span class="k-icon k-i-check"></span></button>
+            <button aria-label="{{'CancelChanges' | translate}}" class="btn btn-danger btn-fab k-button" id="btn_crud_cancel_${RANDOM}" data-component="crn-button" ng-click="datasource.cancel()"><span class="k-icon k-i-cancel"></span></button>
         </div>
         <br>
         <div class="component-holder ng-scope crn-fieldset" data-component="crn-horizontal-container" id="crn-horizontal-container-${RANDOM}" ng-disabled="!datasource.editing &amp;&amp; !datasource.inserting">

package/components/templates/cron-dynamic-combobox.template.html

@@ -1,4 +1,4 @@
 <div class="form-group" id="cron-${COMPONENTID}">
-    <label for="cron-${COMPONENTID}">Label</label>
+    <label for="cron-${COMPONENTID}" id="cron-${COMPONENTID}_label">Label</label>
     <cron-dynamic-select  ng-required="false" id="cron-${COMPONENTID}" ng-model="vars.dynCombobox${RANDOM}" class="k-textbox crn-select form-control" no-results-message="{{'noDataFound' | translate}}" validationmessage="{{'requiredField' | translate}}" options="{}"></cron-dynamic-select>
 </div>

package/components/templates/fileupload-button.template.html

@@ -1,4 +1,4 @@
-<label class="btn btn-default" xattr-theme="btn-default">
+<label class="btn btn-primary" xattr-theme="btn-primary">
     <i class="glyphicon glyphicon-cloud-upload"></i> 
     <input type="file" style="display:none" onchange="$('#upload-file-info').html($(this).val().split('\\')[2])">
     <span>Upload</span>

package/components/templates/fileupload.template.html

@@ -1,6 +1,6 @@
 <div class="">
     <form action="" method="post" enctype="multipart/form-data">
-        <label class=" component-holder btn btn-default k-button" xattr-theme="btn-default" data-component="crn-upload-file">
+        <label class=" component-holder btn btn-primary k-button" xattr-theme="btn-primary" data-component="crn-upload-file">
             <i class="glyphicon glyphicon-cloud-upload"></i>
             <input type="file" style="display:none" onchange="$('#upload-file-info').html($(this).val().split('\\')[2])">
             <span>Upload</span>