cronapp-framework-js 3.0.0-SP.5 → 3.0.0-SP.50

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

@@ -6,8 +6,9 @@
   "description": "Estrutura para armazenar arquivos na fonte de dados",
   "description_en_US": "Structure for storing file in data source",
   "category": [
-      "INPUTS", "FORMS"
+    "INPUTS", "FORMS"
   ],
+  "autoWrapper": false,
   "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/dynamicfile.template.html",
   "styles": [
     {
@@ -38,6 +39,36 @@
     },
     "id": {
       "order": 3
+    },
+    "onclick": {
+      "type": "event"
+    },
+    "target": {
+      "removable": false,
+      "type": "list",
+      "options": [
+        {
+          "key": "_blank",
+          "value": "Nova janela"
+        },
+        {
+          "key": "_self",
+          "value": "Mesma janela"
+        },
+        {
+          "key": "_parent",
+          "value": "Janela pai"
+        },
+        {
+          "key": "_top",
+          "value": "Top"
+        }
+      ]
+    },
+    "href": {
+      "removable": false,
+      "type": "projectResource",
+      "resourceType": "text/html"
     }
   },
   "childrenProperties": [
@@ -69,38 +100,38 @@
       "type": "list",
       "selector": "div[accept-file]",
       "options": [
-            {
-              "value": "All",
-              "value_pt_BR": "Todos",
-              "key": "'*.*'"
-            },
-            {
-              "value": "Audio",
-              "value_pt_BR": "Áudio",
-              "key": "'audio/*'"
-            },
-            {
-              "value": "Image",
-              "value_pt_BR": "Imagem",
-              "key": "'image/*'"
-            },
-            {
-              "value": "Video",
-              "value_pt_BR": "Vídeo",
-              "key": "'video/*'"
-            },
-            {
-              "value": "PDF",
-              "key": "'.pdf'"
-            },
-            {
-              "value": "Word (doc/docx)",
-              "key": "'.doc,.docx'"
-            },
-            {
-              "value": "Excel (xls/xlsx)",
-              "key": "'.xls,.xlsx'"
-            }
+        {
+          "value": "All",
+          "value_pt_BR": "Todos",
+          "key": "'*.*'"
+        },
+        {
+          "value": "Audio",
+          "value_pt_BR": "Áudio",
+          "key": "'audio/*'"
+        },
+        {
+          "value": "Image",
+          "value_pt_BR": "Imagem",
+          "key": "'image/*'"
+        },
+        {
+          "value": "Video",
+          "value_pt_BR": "Vídeo",
+          "key": "'video/*'"
+        },
+        {
+          "value": "PDF",
+          "key": "'.pdf'"
+        },
+        {
+          "value": "Word (doc/docx)",
+          "key": "'.doc,.docx'"
+        },
+        {
+          "value": "Excel (xls/xlsx)",
+          "key": "'.xls,.xlsx'"
+        }
       ]
     },
     {
@@ -154,4 +185,4 @@
       "type": "event"
     }
   ]
-}
+}

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

@@ -31,27 +31,6 @@
     "options": {
       "displayName_pt_BR": "Configuração",
       "displayName_en_US": "Configuration"
-    },
-    "multilevel-action": {
-      "removable": false,
-      "selector": "cron-dynamic-menu",
-      "displayName_pt_BR": "Ação do multinível",
-      "displayName_en_US": "Multilevel action",
-      "childrenProperty": true,
-      "type": "list",
-      "options": [
-        {
-          "key": "hover",
-          "value_pt_BR": "Ao passar o mouse",
-          "value_en_US": "Hover"
-        },
-        {
-          "key": "click",
-          "value_pt_BR": "Clique",
-          "value_en_US": "Click"
-        }
-      ],
-      "order": 2
     }
   },
   "styles": [

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

@@ -324,6 +324,12 @@
       "type": "logic",
       "displayName_pt_BR": "Ocultar Item Selecionado",
       "displayName_en_US": "Hide Selected Item"
+    },
+    {
+      "name": "id",
+      "selector": "cron-multi-select",
+      "type": "text",
+      "onSave": "javascript:(value)=> {this.currentObject.parent().find('label').attr('for', arguments[0]); return arguments[0];}"
     }
   ],
   "styles": [

package/components/crn-navbar.components.json

@@ -17,7 +17,7 @@
     "xattr-class": {
       "order": 998,
       "fixed": true,
-      "onSave": "javascript:function(){ let parent=this.currentObject.parent(),menuVertical=parent.find(\"#main-nav-bar\"),uiView=parent.find(\"[ui-view]\");arguments[0].indexOf(\"horizontal\")>-1?(uiView.removeClass(\"main-view-vertical\").removeClass(\"main-view-retratil\").addClass(\"main-view-horizontal\"),menuVertical.removeClass(\"crn-navigator-retratil\").removeClass(\"collapsible-menu-hide\"),parent.find(\".main-title\").removeClass(\"hide\"),parent.find(\"#checkCollapsibleMenu\").remove(),parent.find(\".labelCollapsibleMenu\").remove()):arguments[0].indexOf(\"retratil\")>-1?(uiView.removeClass(\"main-view-horizontal\").removeClass(\"main-view-vertical\").addClass(\"main-view-vertical\").addClass(\"main-view-retratil\"),parent.find(\".main-title\").addClass(\"hide\"),menuVertical.addClass(\"collapsible-menu-hide\"),menuVertical[0].insertAdjacentHTML(\"beforebegin\",'<input type=\"checkbox\" id=\"checkCollapsibleMenu\"><label for=\"checkCollapsibleMenu\" class=\"labelCollapsibleMenu\"><i class=\"glyphicon glyphicon-menu-right\" id=\"iconCollapsibleMenu\"></i></label>')):arguments[0].indexOf(\"vertical\")>-1&&(uiView.removeClass(\"main-view-horizontal\").removeClass(\"main-view-retratil\").addClass(\"main-view-vertical\"),menuVertical.removeClass(\"crn-navigator-retratil\").removeClass(\"collapsible-menu-hide\"),parent.find(\".main-title\").removeClass(\"hide\"),parent.find(\"#checkCollapsibleMenu\").remove(),parent.find(\".labelCollapsibleMenu\").remove()); return arguments[0]; }",
+      "onSave": "javascript:function(){ let currentElementId = this.currentObject.attr('id'); let selectedPosition = arguments[0]; let parent = this.currentObject.parent(); let menuVertical = this.currentObject; let uiView = parent.find('[ui-view]'); if(uiView.length === 0) { uiView = parent.parent().find('[ui-view]');} if (selectedPosition.indexOf('horizontal') > -1) { uiView.removeClass('main-view-vertical').removeClass('main-view-retratil').addClass('main-view-horizontal'); menuVertical.removeClass('crn-navigator-retratil').removeClass('crn-navigator-vertical').removeClass('collapsible-menu-hide'); parent.find('.main-title').removeClass('hide'); parent.find('#checkCollapsibleMenu').remove(); parent.find('.labelCollapsibleMenu').remove(); parent.removeClass('crn-navigator-vertical').removeClass('crn-navigator-retratil').removeClass('crn-navigator-retratil-left').addClass('crn-navigator-horizontal'); } else if (selectedPosition.indexOf('retratil') > -1) { uiView.removeClass('main-view-horizontal').addClass('main-view-retratil').addClass('main-view-vertical'); parent.find('.main-title').addClass('hide'); parent.removeClass('crn-navigator-horizontal').removeClass('crn-navigator-vertical').addClass('crn-navigator-retratil').addClass('crn-navigator-retratil-left'); menuVertical.addClass('collapsible-menu-hide'); menuVertical.addClass('crn-navigator-vertical'); menuVertical.addClass('crn-navigator-retratil'); menuVertical[0].insertAdjacentHTML('beforebegin', '<input type=\"checkbox\" id=\"checkCollapsibleMenu\"><label for=\"checkCollapsibleMenu\" class=\"labelCollapsibleMenu\"><i class=\"glyphicon glyphicon-menu-right\" id=\"iconCollapsibleMenu\"></i></label>'); parent.find('[main-nav-bar]').removeClass('crn-navigator-vertical'); } else if (selectedPosition.indexOf('vertical') > -1) { uiView.removeClass('main-view-horizontal').removeClass('main-view-retratil').addClass('main-view-vertical'); menuVertical.removeClass('crn-navigator-retratil').removeClass('collapsible-menu-hide'); parent.find('.main-title').removeClass('hide'); parent.find('#checkCollapsibleMenu').remove(); parent.find('.labelCollapsibleMenu').remove(); parent.removeClass('crn-navigator-horizontal').addClass('crn-navigator-vertical'); } return selectedPosition; }",
       "displayName_pt_BR": "Posição",
       "displayName_en_US": "Position",
       "selector": "div"
@@ -30,6 +30,14 @@
       "displayName_en_US": "Collapsible menu type",
       "selector": "div"
     },
+    "expand-sub-menu": {
+      "order": 1000,
+      "fixed": true,
+      "onSave": "javascript:function(){ let selected = arguments[0]; return selected;  }",
+      "displayName_pt_BR": "Expandir sub-menu",
+      "displayName_en_US": "Expand sub-menu",
+      "selector": "div"
+    },
     "id": {
       "order": 2
     }
@@ -73,6 +81,23 @@
           "icon": "mdi mdi-chevron-right"
         }
       ]
+    },
+    {
+      "name": "expand-sub-menu",
+      "type": "options",
+      "target": "class",
+      "values": [
+        {
+          "key": "submenu-click",
+          "value_pt_BR": "Ao clicar",
+          "value_en_US": "On clicking"
+        },
+        {
+          "key": "submenu-hover",
+          "value_pt_BR": "Ao passar o mouse",
+          "value_en_US": "Mouse over"
+        }
+      ]
     }
   ],
   "childrenProperties": [

package/components/cron-breadcrumbs.components.json

@@ -12,7 +12,7 @@
   ],
   "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-breadcrumbs.template.html",
   "designTimeHTMLURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-breadcrumbs.designtime.html",
-  "designTimeSelector": ":self",
+  "designTimeSelector": "cron-breadcrumbs",
   "designTimeDynamic": true,
   "wrapper": false,
   "forcedGroup": true,
@@ -41,16 +41,20 @@
       "name": "crn-delimiter-icon",
       "type": "options",
       "target": "class",
+      "designTimeSelector": ".k-breadcrumb-delimiter-icon",
+      "designTimeTarget"  : "class",
       "values": [
         {
           "key": "arrow-chevron-right",
           "value_pt_BR": "Seta",
-          "value_en_US": "Arrow"
+          "value_en_US": "Arrow",
+          "designTimeKey": "k-i-arrow-chevron-right"
         },
         {
           "key": "line",
           "value_pt_BR": "Linha",
-          "value_en_US": "Line"
+          "value_en_US": "Line",
+          "designTimeKey": "k-i-line"
         }
       ]
     },

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,13 @@
 <div class="form-group">
     <label for="">Label</label>
-    <ui-select crn-datasource=""  ng-model="datasource.active" ng-disabled="disabled" theme="bootstrap" class="crn-select" ng-required="false">
+    <ui-select crn-datasource="" ng-model="datasource.active" ng-disabled="disabled" theme="bootstrap" class="crn-select" ng-required="false">
         <ui-select-match placeholder="Select..." class="">
             {{$select.selected}}
         </ui-select-match>
         <ui-select-choices repeat="rowData as rowData in datasource.data | filter : $select.search" class="" refresh="" refresh-deplay="">
-            <div class="">
-                {{rowData}}
+            <div ng-class="{'k-list-optionlabel k-state-selected k-state-focused': !$select.selected}">
+                {{rowData || ' '}}
             </div>
         </ui-select-choices>
     </ui-select>
-</div>
+</div>

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

@@ -1,4 +1,4 @@
-<span tabindex="-1" role="presentation" class="k-widget k-autocomplete cronAutoComplete k-autocomplete-clearable k-state-default" style="width: 100%;">
+<div><span tabindex="-1" role="presentation" class="k-widget k-autocomplete cronAutoComplete k-autocomplete-clearable k-state-default" style="width: 100%;">
     <input style="" id="cron-crn-enterprise-autocomplete-169514" required="" class="cronAutoComplete k-input" placeholder="Select an item" type="text" autocomplete="off">
     <span unselectable="on" class="k-icon k-clear-value k-i-close" title="clear" role="button" tabindex="-1"></span>
-</span>
+</span></div>

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

@@ -1,4 +1,4 @@
-<div class="form-group combobox-default" combobox-theme="combobox-default">
+<div class="form-group combobox-default" combobox-theme="combobox-default" id="cron-${COMPONENTID}">
     <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-grid.designtime.html

@@ -30,7 +30,7 @@
             <th ng-repeat="item in attrs.options.columns" ng-if="item.visible" scope="col" role="columnheader" data-field="email" aria-haspopup="true" rowspan="1" data-title="Email" data-index="0" id="2b4d0eb0-1cc1-4f89-927b-b8c1fbcf430e" style="text-align: left;" class="k-header k-with-icon k-filterable" data-role="columnsorter">
                 <label ng-if="item.dataType == 'Selectable'" class="k-checkbox-label k-no-text"></label>
                 <a ng-if="item.dataType !== 'Selectable'" class="k-link" href="#">{{item.headerText?parseProperty(item.headerText):''}}</a>
-                <a ng-if="item.filterable && tem.dataType != 'Customized' && item.dataType != 'Command' && item.dataType !== 'Selectable'" class="k-grid-filter" href="#" title="Filtrar" aria-label="Filtrar" tabindex="0">
+                <a ng-if="item.filterable && tem.dataType != 'Customized' && item.dataType != 'Command' && item.dataType !== 'Selectable' && item.dataType !== 'GroupedButtons'" class="k-grid-filter" href="#" title="Filtrar" aria-label="Filtrar" tabindex="0">
                     <span class="k-icon k-i-filter"></span>
                 </a>
             </th>
@@ -39,13 +39,14 @@
         <tbody role="rowgroup">
         <tr data-uid="59430dcb-6ccd-497d-954d-9b5569408cb4" role="row">
 
-            <td ng-repeat="item in attrs.options.columns | filter: {visible:true}" role="gridcell" class="{{item.dataType == 'Command'|| item.dataType == 'Customized'?'k-command-cell':''}}">
+            <td ng-repeat="item in attrs.options.columns | filter: {visible:true}" role="gridcell" class="{{item.dataType == 'Command'|| item.dataType == 'Customized' || item.dataType == 'GroupedButtons'?'k-command-cell':''}}">
 
                 <label ng-if="item.dataType == 'Selectable'" class="k-checkbox-label k-no-text"></label>
-                <span ng-if="item.dataType != 'Customized' && item.dataType != 'Command'">{{item.headerText?parseProperty(item.headerText):''}}</span>
+                <span ng-if="item.dataType != 'Customized' && item.dataType != 'Command' && item.dataType != 'GroupedButtons'">{{item.headerText?parseProperty(item.headerText):''}}</span>
                 <a ng-if="item.dataType == 'Command' && (item.command == 'edit|destroy' || item.command == 'edit')" role="button" class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-i-edit"></span> </a>
                 <a ng-if="item.dataType == 'Command' && (item.command == 'edit|destroy' || item.command == 'destroy')" role="button" class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-i-close"></span> </a>
-                <a ng-if="item.dataType == 'Customized'" href="" class="k-button k-custom-command k-button-with-label k-grid-f06e"><span class="{{item.iconClass}}"></span>&nbsp;{{item.headerText?parseProperty(item.headerText):''}}</a>
+                <a ng-if="item.dataType == 'Customized'" style="width:{{item.width}}px" href="" class="k-button k-custom-command {{item.label != ''?'k-button-with-label':''}} btn {{item.theme}} k-grid-f06e"><span class="{{item.iconClass}}"></span>{{item.label?' ' + parseProperty(item.label):''}}</a>
+                <a ng-if="item.dataType == 'GroupedButtons'" ng-repeat="item2 in item.buttonColumns" style="width:{{item2.width}}px" href="" class="k-button k-custom-command {{item2.label != ''?'k-button-with-label':''}} btn {{item2.theme}} k-grid-f06e"><span class="{{item2.iconClass}}"></span>{{item2.label?' ' + parseProperty(item2.label):''}}</a>
             </td>
         </tr>
         </tbody>

package/components/templates/dynamicfile.designtime.html

@@ -0,0 +1,5 @@
+<div id="file-${RANDOM}" dynamic-file="" ng-model="vars.dynamicfile${RANDOM}" class="dynamic-image-container" style="padding: 50px 0;" ng-required="false" ngf-max-size="5MB" ngf-accept="'*.*'">
+  <button id="file-${RANDOM}-button" class="btn" ngf-drop ngf-select ngf-change="cronapi.internal.uploadFile('vars.dynamicfile${RANDOM}', $file, 'uploadprogress${RANDOM}', undefined, $invalidFiles)" style="position: absolute; left: 0;">
+    <span>Clique ou arraste um arquivo</span>
+  </button>
+</div>

package/components/templates/dynamicfile.template.html

@@ -1,6 +1,23 @@
 <div class="form-group">
     <label for="file-${RANDOM}-button">Arquivo</label>
-    <div id="file-${RANDOM}" dynamic-file="" ng-model="vars.dynamicfile${RANDOM}" class="dynamic-image-container" ng-required="false" max-file-size="5MB" accept-file="'*.*'">
-      {{"template.crud.clickOrDragAnFile" | translate}}
+    <div class="dynamic-input-upload">
+        <div class="component-holder ng-scope" id="crn-button-${RANDOM}">
+            <div ng-if="!vars.dynamicfile${RANDOM}">
+                <input id="file-${RANDOM}-input" type="text" ng-model="vars.dynamicfile${RANDOM}" class="hidden">
+                <button id="file-${RANDOM}-button" class="btn k-button btn-default" ng-click="" xattr-fullsize="" xattr-theme="btn-default" xattr-disabled="" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.uploadFile('vars.dynamicfile${RANDOM}', $file, 'uploadprogress${RANDOM}', undefined, $invalidFiles)" ngf-max-size="5MB" ngf-pattern="'*.*'" ngf-accept="'*.*'">                                    
+                    <span>Clique ou arraste um arquivo</span>
+                </button>
+                <div class="progress hidden" data-type="bootstrapProgress" id="uploadprogress${RANDOM}">
+                    <div class="progress-bar" role="progressbar"></div>
+                </div>
+            </div>
+            <div ng-if="vars.dynamicfile${RANDOM}" class="upload-image-component-attribute ng-scope">
+                <div ng-bind-html="cronapi.internal.generatePreviewDescriptionByte(vars.dynamicfile${RANDOM}, undefined)" class="ng-binding"></div>
+                <div class="btn-container">
+                    <a href="javascript:void(0)" ng-click="cronapi.internal.downloadFileEntity(vars,'dynamicfile${RANDOM}', undefined, undefined)">Baixar</a>
+                    <span class="cancel-btn" ng-click="vars.dynamicfile${RANDOM} = null">Cancelar</span>
+                </div>
+            </div>
+        </div>
     </div>
-</div>
+</div>

package/css/themes/custom/aquamarine/custom-aquamarine.css

@@ -38,6 +38,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;
@@ -859,6 +860,17 @@ td.k-state-focused.k-state-selected,
     background: var(--colorDefault20, #b1d3d5);
 }
 
+/* Dynamic input upload */
+ .dynamic-input-upload {
+     border: 1px dashed var(--colorDefault40, #3b448e);
+ }
+
+ .dynamic-input-upload btn{
+    border-color: transparent;
+    box-shadow: none;
+    margin: 0;
+ }
+
 .k-autocomplete.k-state-default .k-input,
 .k-combobox .k-state-default .k-input,
 .k-multiselect-wrap,
@@ -1017,29 +1029,28 @@ table.table thead th {
 }
 
 .k-grid table .k-button {
-    background: linear-gradient(90deg, var(--colorDefault50, #279093) 0%, var(--colorDefault30, #81bdc0) 100%);
-    color: var(--textColorDefault40, #ffffff);
     display: inherit;
-    height: 33px;
-    width: 33px;
-    border: 0;
+    min-height: 33px;
+    min-width: 33px;
     margin-right: 10px;
 }
 
+.k-button-with-label .btn .btn-info .k-grid {
+    background: transparent;
+    border: 2px solid var(--colorCalm40, #11c1f3);
+    color: var(--colorCalm40, #11c1f3);
+}
+
 .k-grid table .k-button.active,
 .k-grid table .k-button:active,
 .k-grid table .k-button:focus,
 .k-grid table .k-button:hover {
-    color: var(--colorDefault40, #2ca4a8);
     box-shadow: none;
-    background: var(--colorDefault20, #b1d3d5);
 }
 
 .k-grid table .k-button,
 .k-grid table .k-button:focus:active {
     padding: 5px;
-    min-height: 0;
-    min-width: 0;
     margin: 0;
     margin-right: 5px;
     display: inline-flex;
@@ -1064,6 +1075,10 @@ table.table thead th:hover,
     color: yellow;
 }
 
+.k-button.k-grid-edit.k-grid:hover {
+    background: var(--colorDefault50, #279093);
+}
+
 .k-state-selected,
 .k-state-selected:link,
 .k-state-selected:visited,
@@ -1079,7 +1094,6 @@ table.table thead th:hover,
     border-color: #ccc;
 }
 
-.k-state-selected .k-button:hover,
 .k-state-selected:link .k-button:hover,
 .k-state-selected:visited .k-button:hover,
 .k-tool.k-state-selected .k-button:hover,

package/css/themes/custom/cerulean/custom-cerulean.css

@@ -37,6 +37,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/cosmo/custom-cosmo.css

@@ -88,7 +88,7 @@
     --colorDefault40: #222222;
     --colorDefault50: #1e1e1e;
     --colorDefault60: #191919;
-    --colorDefault70: #131313;
+    --colorDefault70: #f5f5f5;
     --textColorDefault10: #8c8c8c;
     --textColorDefault20: #bbbbbb;
     --textColorDefault30: #dfdfdf;
@@ -242,26 +242,26 @@
     --textColorDark70: #ffffff;
 
     /* Color - Neutral (web e mobile) */
-    --colorNeutral00: #FFFFFF;
-    --colorNeutral10: #F1F1F1;
-    --colorNeutral20: #E3E3E3;
-    --colorNeutral30: #D5D5D5;
-    --colorNeutral40: #C7C7C7;
-    --colorNeutral50: #B9B9B9;
-    --colorNeutral60: #ACACAC;
-    --colorNeutral70: #9E9E9E;
+    --colorNeutral00: #ffffff;
+    --colorNeutral10: #f1f1f1;
+    --colorNeutral20: #e3e3e3;
+    --colorNeutral30: #d5d5d5;
+    --colorNeutral40: #c7c7c7;
+    --colorNeutral50: #b9b9b9;
+    --colorNeutral60: #acacac;
+    --colorNeutral70: #9e9e9e;
     --colorNeutral80: #909090;
     --colorNeutral90: #828282;
     --colorNeutral100: #747474;
     --colorNeutral110: #666666;
-    --colorNeutral120: #5D5D5D;
+    --colorNeutral120: #5d5d5d;
     --colorNeutral130: #535353;
-    --colorNeutral140: #4A4A4A;
+    --colorNeutral140: #4a4a4a;
     --colorNeutral150: #414141;
     --colorNeutral160: #383838;
-    --colorNeutral170: #2E2E2E;
+    --colorNeutral170: #2e2e2e;
     --colorNeutral180: #252525;
-    --colorNeutral190: #1C1C1C;
+    --colorNeutral190: #1c1c1c;
     --colorNeutral200: #131313;
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
@@ -385,8 +385,8 @@
     --borderOptionDark: transparent;
 
     /* Components - Panel */
-    --panelDefault: var(--colorPrimary40, #2780e3);
-    --panelPrimary: var(--colorDefault10, #d6d6d6);
+    --panelDefault: var(--colorDefault70, #f5f5f5);
+    --panelPrimary: var(--colorPrimary40, #2780e3);
     --panelSuccess: var(--colorSuccess40, #3fb618);
     --panelCalm: var(--colorCalm40, #11c1f3);
     --panelWarning: var(--colorWarning40, #ff7518);
@@ -649,7 +649,7 @@ a:hover {
 }
 
 .k-treeview .k-in.k-state-selected {
-    background: var(--colorDefault70, #131313);
+    background: var(--colorNeutral200, #131313);
     color: var(--textColorDefault40, #ffffff);
 }
 

package/css/themes/custom/cosmo/panel-cosmo.css

@@ -13,7 +13,7 @@
 .panel-default .panel-heading,
 .panel-default .panel-footer {    
     color: var(--textColor40, #333333);
-    background: var(--colorDefault10, #d6d6d6);
+    background: var(--colorDefault70, #f5f5f5);
     border-color: transparent
 }