cronapp-framework-js 2.8.23 → 2.8.24

package/components/crn-button.components.json

@@ -85,8 +85,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",
@@ -129,6 +129,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",
@@ -262,6 +267,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",

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

@@ -28,6 +28,11 @@
       "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,6 +33,11 @@
       "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,6 +12,7 @@
   ],
   "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",
@@ -103,7 +104,6 @@
       "displayName_pt_BR": "Texto quando requerido",
       "displayName_en_US": "Text when required",
       "type": "text",
-      "mandatory": false,
       "order": 5
     },
     {

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-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
@@ -52,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",
@@ -183,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"
         }
       ]
     }
@@ -226,18 +234,6 @@
       "type": "icon",
       "order": 2
     },
-    {
-      "name": "icon-theme",
-      "selector": "i",
-      "displayName_pt_BR": "Cor do ícone",
-      "displayName_en_US": "Icon color"
-    },
-    {
-      "name": "icon-size",
-      "displayName_pt_BR": "Tamanho do ícone",
-      "displayName_en_US": "Icon size",
-      "selector": "i"
-    },
     {
       "name": "icon-off",
       "selector": "cronapp-rating",
@@ -247,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-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/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/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-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>

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

@@ -1,4 +1,4 @@
-<div class="form-group combobox-gray" combobox-theme="combobox-gray">
+<div class="form-group combobox-theme" combobox-theme="combobox-theme">
     <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,15 +16,51 @@
 <section class="form">
     <form crn-datasource="" data-component="crn-form">
         <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
-            <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 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>
+
         </div>
         <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
-            <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 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>
+
         </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,5 +1,4 @@
 <div class="form-group" id="cron-${COMPONENTID}">
     <label for="cron-${COMPONENTID}">Label</label>
-    <cron-dynamic-select options="{}" ng-required="false" id="cron-${COMPONENTID}" ng-model="vars.dynCombobox${RANDOM}" class="k-textbox crn-select form-control" style="">
-    </cron-dynamic-select>
-</div> 
+    <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-primary" xattr-theme="btn-primary">
+<label class="btn btn-default" xattr-theme="btn-default">
     <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-primary k-button" xattr-theme="btn-primary" data-component="crn-upload-file">
+        <label class=" component-holder btn btn-default k-button" xattr-theme="btn-default" 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>

package/components/templates/form.template.html

@@ -1,31 +1,54 @@
 <section class="form">
   <form crn-datasource="" data-component="crn-form">
     <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
-      <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 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>
+
     </div>
     <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
-      <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 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>
+
     </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">
+    <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">
       <div class="col-md-12" style="padding-left: 0; padding-right: 0;" data-container="true" data-replace="true">
         Arraste os campos do formulário aqui</div>
     </div>

package/components/templates/icon.template.html

@@ -1 +1 @@
-<div><i class="fa fa-star" icon-size="" icon-theme=""></i></div>
+<i class="fa fa-star font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>

package/components/templates/image.default.template.html

@@ -1,2 +1 @@
-<img alt="image" src="node_modules/cronapp-framework-js/img/placehold-100x100.png" class="crn-image"
-    style="object-fit: contain;"  object-fit="object-fit: contain;" xattr-position="" width="100px" height="100px" />
+<img alt="image" src="node_modules/cronapp-framework-js/img/placehold-100x100.png" class="crn-image object-fit-contain" object-fit="object-fit-contain" xattr-position="" width="100px" height="100px" />

package/components/templates/rating.template.html

@@ -1,9 +1,9 @@
-<div>
+<div class="component-holder ng-scope" data-component="crn-rating" id="crn-rating-${RANDON}">
     <cronapp-rating ng-model="vars.evaluation${RANDOM}" icon-off="fa fa-star-o" xattr-default-value="">
-        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
+        <i data-theme="color-theme" data-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
+        <i data-theme="color-theme" data-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
+        <i data-theme="color-theme" data-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
+        <i data-theme="color-theme" data-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
+        <i data-theme="color-theme" data-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
     </cronapp-rating>
 </div>