cronapp-framework-js 2.9.3 → 2.9.4-RC.3

package/components/crn-datepicker.components.json

@@ -76,6 +76,11 @@
       "selector": "input",
       "type": "event"
     },
+    {
+      "name": "ng-change",
+      "selector": "input",
+      "type": "event"
+    },
     {
       "name": "ng-keydown",
       "selector": "input",

package/components/crn-datetimepicker.components.json

@@ -78,6 +78,11 @@
       "selector": "input",
       "type": "event"
     },
+    {
+      "name": "ng-change",
+      "selector": "input",
+      "type": "event"
+    },
     {
       "name": "ng-keydown",
       "selector": "input",

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

@@ -25,12 +25,24 @@
     }
   },
   "childrenProperties": [
+    {
+      "name": "no-results-message",
+      "selector": "cron-select",
+      "displayName_pt_BR": "Texto quando não tem resultados",
+      "displayName_en_US": "Text when there are no results",
+      "type": "text"
+    },
     {
       "name": "ng-change",
       "selector": "cron-select",
       "displayName_pt_BR": "Ao Alterar",
       "displayName_en_US": "On Change",
-      "type": "event"
+      "type": "event",
+      "eventFields" : [ 
+        "selected" , 
+        "selectedKey",
+        "selectedValue"
+     ]
     },
     {
       "name": "cron-disabled",
@@ -44,7 +56,12 @@
       "selector": "cron-select",
       "displayName_pt_BR": "Ao Selecionar",
       "displayName_en_US": "On Select",
-      "type": "event"
+      "type": "event",
+      "eventFields" : [ 
+        "selected" , 
+        "selectedKey",
+        "selectedValue"
+     ]
     },
     {
       "name": "ng-close",

package/components/crn-infinite-scroll.components.json

@@ -0,0 +1,29 @@
+{
+  "name": "crn-infinite-scroll",
+  "text_pt_BR": "Scroll infinito",
+  "text_en_US": "Infinite Scroll",
+  "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-infinite-scroll.svg",
+  "description": "Estrutura de paginação invisível",
+  "description_en_US": "Invisible paging structure",
+  "category": [
+      "LAYOUTS", "LISTS"
+  ],
+  "template": "<crn-infinite-scroll crn-datasource=\"\"></crn-infinite-scroll>",
+  "designTimeHTML": "<img alt=\"chart\" style=\"height: 20px;\" src=\"node_modules/cronapp-framework-js/img/cron-icon/crn-infinite-scroll.svg\"/>",
+  "designTimeSelector": "crn-infinite-scroll",
+  "properties": {
+    "id": {
+      "order": 1
+    }
+  },
+  "childrenProperties": [
+    {
+      "name": "crn-datasource",
+      "selector": "crn-infinite-scroll",
+      "displayName_pt_BR": "Fonte de dados",
+      "displayName_en_US": "Datasource",
+      "type": "pageDatasource",
+      "onDisplay": "javascript:function() { return arguments[0].replace('vars.',''); }"
+    }
+  ]
+}

package/components/crn-navbar.components.json

@@ -18,11 +18,19 @@
     "xattr-class": {
       "order": 998,
       "fixed": true,
-      "onSave": "javascript:function(){if(arguments[0].indexOf('horizontal') > -1){this.currentObject.parent().find('[ui-view]').removeClass('main-view-vertical').addClass('main-view-horizontal');this.currentObject.parent().find('.main-title').removeClass('hide');}else{this.currentObject.parent().find('[ui-view]').removeClass('main-view-horizontal').addClass('main-view-vertical');this.currentObject.parent().find('.main-title').addClass('hide');} return arguments[0];}",
+      "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]; }",
       "displayName_pt_BR": "Posição",
       "displayName_en_US": "Position",
       "selector": "div"
     },
+    "menu-type": {
+      "order": 999,
+      "fixed": true,
+      "onSave": "javascript:function(){ let icon=this.currentObject.parent().find(\"#iconCollapsibleMenu\"); arguments[0].indexOf(\"hamburguer\")>-1?icon.removeClass(\"glyphicon-menu-right\").addClass(\"glyphicon-menu-hamburger\"):arguments[0].indexOf(\"arrow\")>-1&&icon.removeClass(\"glyphicon-menu-hamburger\").addClass(\"glyphicon-menu-right\"); return arguments[0]; }",
+      "displayName_pt_BR": "Tipo de menu retrátil",
+      "displayName_en_US": "Collapsible menu type",
+      "selector": "div"
+    },
     "id": {
       "order": 2
     }
@@ -40,6 +48,30 @@
         {
           "key": "crn-navigator-vertical",
           "value": "Vertical"
+        },
+        {
+          "key": "crn-navigator-retratil crn-navigator-vertical",
+          "value_pt_BR": "Vertical Retrátil",
+          "value_en_US": "Collapsible menu"
+        }
+      ]
+    },
+    {
+      "name": "menu-type",
+      "type": "options",
+      "target": "class",
+      "values": [
+        {
+          "key": "menu-type-hamburguer",
+          "value_pt_BR": "Hambúrguer",
+          "value_en_US": "Hamburger",
+          "icon": "mdi mdi-menu"
+        },
+        {
+          "key": "menu-type-arrow",
+          "value_pt_BR": "Seta",
+          "value_en_US": "Arrow",
+          "icon": "mdi mdi-chevron-right"
         }
       ]
     }

package/components/css/checkbox-color.css

@@ -246,7 +246,6 @@
 .checkbox-light .k-checkbox-label:active:before,
 .checkbox-light .k-checkbox:active+.k-checkbox-label:before,
 .checkbox-light .k-checkbox:focus+.k-checkbox-label:before,
-.checkbox-light .k-checkbox:hover+.k-checkbox-label:before,
 .checkbox-light .k-checkbox:checked+.k-checkbox-label:after,
 .checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:after,
 .checkbox-light .k-checkbox-label:before {

package/components/css/combobox-color.css

@@ -512,10 +512,7 @@
     background: transparent;
 }
 
-
-.k-multiselect .k-button.k-state-hover,
 .k-multiselect .k-button,
-.combobox-default .k-multiselect .k-button.k-state-hover,
 .combobox-default .k-multiselect .k-button {
     border-color: var(--colorDefault50, #343c7c);
     background: var(--colorDefault40, #3b448e);
@@ -543,7 +540,6 @@
     background: var(--colorPrimary40, #5665be);
 }
 
-.combobox-primary .k-multiselect .k-button.k-state-hover,
 .combobox-primary .k-multiselect .k-button {
     border-color: var(--colorPrimary50, #4b58a6);
     background: var(--colorPrimary40, #5665be);
@@ -566,7 +562,6 @@
     background: var(--colorSuccess40, #33cd5f);
 }
 
-.combobox-success .k-multiselect .k-button.k-state-hover,
 .combobox-success .k-multiselect .k-button {
     border-color: var(--colorSuccess50, #2db353);
     background: var(--colorSuccess40, #33cd5f);
@@ -589,7 +584,6 @@
     background: var(--colorCalm40, #11c1f3);
 }
 
-.combobox-info .k-multiselect .k-button.k-state-hover,
 .combobox-info .k-multiselect .k-button {
     border-color: var(--colorCalm50, #0fa9d5);
     background: var(--colorCalm40, #11c1f3);
@@ -612,7 +606,6 @@
     background: var(--colorWarning40, #ffc900);
 }
 
-.combobox-warning .k-multiselect .k-button.k-state-hover,
 .combobox-warning .k-multiselect .k-button {
     border-color: var(--colorWarning50, #dfb000);
     background: var(--colorWarning40, #ffc900);
@@ -635,7 +628,6 @@
     background: var(--colorDanger40, #ef473a);
 }
 
-.combobox-danger .k-multiselect .k-button.k-state-hover,
 .combobox-danger .k-multiselect .k-button {
     border-color: var(--colorDanger50, #d13e33);
     background: var(--colorDanger40, #ef473a);
@@ -658,7 +650,6 @@
     background: var(--colorLight40, #ffffff);
 }
 
-.combobox-light .k-multiselect .k-button.k-state-hover,
 .combobox-light .k-multiselect .k-button {
     border-color: var(--colorLight50, #dfdfdf);
     background: var(--colorLight40, #ffffff);
@@ -681,7 +672,6 @@
     background: var(--colorStable40, #f8f8f8);
 }
 
-.combobox-stable .k-multiselect .k-button.k-state-hover,
 .combobox-stable .k-multiselect .k-button {
     border-color: var(--colorStable50, #d9d9d9);
     background: var(--colorStable40, #f8f8f8);
@@ -705,7 +695,6 @@
     background: var(--colorRoyal40, #886aea);
 }
 
-.combobox-royal .k-multiselect .k-button.k-state-hover,
 .combobox-royal .k-multiselect .k-button {
     border-color: var(--colorRoyal50, #775dcd);
     background: var(--colorRoyal40, #886aea);
@@ -729,7 +718,6 @@
     background: var(--colorDark40, #444444);
 }
 
-.combobox-dark .k-multiselect .k-button.k-state-hover,
 .combobox-dark .k-multiselect .k-button {
     border-color: var(--colorDark50, #3c3c3c);
     background: var(--colorDark40, #444444);

package/components/css/option-color.css

@@ -193,33 +193,6 @@
     border-color: var(--colorDark40, #444444);
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 /* light */
 .option-light .k-radio-label:before {
     border-color: var(--colorLight40, #ffffff);
@@ -242,7 +215,6 @@
 }
 
 /* white */
-
 .option-white .k-radio-label:after,
 .option-white .k-radio-label:before,
 .option-white .k-radio:checked+.k-radio-label:after {

package/components/templates/date.template.html

@@ -1,4 +1,4 @@
 <div class="form-group">
-    <label for="label-${COMPONENTID}">Label</label>
-    <input type="date" mask="" mask-placeholder="" ng-required="false" ng-model="vars.date${COMPONENTID}" class="form-control k-textbox" id="input-${COMPONENTID}">
+    <label for="date-${COMPONENTID}">Label</label>
+    <input type="date" mask="" mask-placeholder="" ng-required="false" ng-model="vars.date${RANDOM}" class="form-control k-textbox" id="date-${COMPONENTID}">
 </div>

package/components/upload/upload.html

@@ -25,7 +25,7 @@
                  ngf-multiple="{{data.multiple}}"
                  ngf-change="uploadFile($files)">
 
-                <span>{{message}}</span>
+                <span ng-bind-html="message"></span>
 
             </div>
         </div>

package/css/animate.css

@@ -19,7 +19,7 @@
 
 /* Error */
 .cronapp-icon.cronapp-error {
-    border-color: var(--colorDanger40, #ce3a36);
+    border-color: var(--colorDanger20, #e6b3b2);
     color: var(--colorDanger40, #ce3a36);
     display: flex;
 }
@@ -61,7 +61,7 @@
 
 /* Success */
 .cronapp-icon.cronapp-success {
-    border-color: var(--colorSuccess40, #257d25);
+    border-color: var(--colorSuccess20, #b0c4b0);
     color: var(--colorSuccess40, #257d25);
 }
 
@@ -150,13 +150,13 @@
 
 /* Warning */
 .cronapp-icon.cronapp-warning {
-    border-color: var(--colorWarning40, #f0ad4e);
+    border-color: var(--colorWarning20, #f7d7b7);
     color: var(--colorWarning40, #f0ad4e);
 }
 
 /* Info */
 .cronapp-icon.cronapp-info {
-    border-color: var(--colorCalm40, #3b448e);
+    border-color: var(--colorCalm20, #aee0f9);
     color: var(--colorCalm40, #3b448e);
 }
 

package/css/app.css

@@ -287,7 +287,7 @@ fieldset[disabled] .btn-default:hover {
 }
 
 .k-invalid-msg {
-    color: red;
+    color: var(--colorDanger40, #ce3a36);
     border: none;
 }
 
@@ -314,7 +314,7 @@ fieldset[disabled] .btn-default:hover {
     font-family: FontAwesome;
     content: "\f077";
     float: right;
-    color: #FFFFFF;
+    color: var(--textColorPrimary40, #ffffff);
 }
 
 .panel-group .heading-arrow.collapsed.panel-heading::after {
@@ -384,7 +384,7 @@ input[type=checkbox].k-checkbox {
     height: var(--textBigSize, 18px);
 }
 
-#auditDetail .modal-content .list-group .form-group{
+#auditDetail .modal-content .list-group .form-group {
     margin-right: 10px;
 }
 
@@ -393,6 +393,10 @@ img[src='undefined'] {
 }
 
 /* Timeline */
-.timeline{
+.timeline {
     clear: both;
+}
+
+.form-group {
+    padding: 5px;
 }

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

@@ -764,7 +764,8 @@ span.k-dropdown,
 .cardinput {
     background: var(--textColorDefault40, #ffffff);
     border-radius: var(--borderRadiusSmall, 15px);
-    padding: 0;
+    padding: var(--distanceExtraSmall, 10px) var(--distanceMedium, 20px);
+    padding-right: 0;
     border-color: var(--colorLight50, #c2c2c2);
 }
 
@@ -1511,4 +1512,9 @@ div[data-component^='crn-slider'] .form-control {
 .layout-template-modern input.k-textbox:hover,
 .layout-template-modern input.k-textbox {
     padding-left: 0;
+}
+
+.layout-template-modern .k-button{
+    background: transparent;
+    color: var(--colorDefault40, #3b448e);
 }

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

@@ -12,6 +12,9 @@
 }
 
 /* Default */
+.k-filter-menu .k-button+.k-button,
+.dynamic-image-container .btn,
+.k-dialog-buttongroup .k-button,
 .btn,
 .k-button,
 .btn.btn-default {
@@ -20,6 +23,12 @@
     color: var(--textColorDefault40, #444444);
 }
 
+.k-filter-menu .k-button+.k-button:focus,
+.k-filter-menu .k-button+.k-button:hover,
+.dynamic-image-container .btn:focus,
+.dynamic-image-container .btn:hover,
+.k-dialog-buttongroup .k-button:hover,
+.k-dialog-buttongroup .k-button:focus,
 .k-button:focus,
 .btn:focus,
 .k-button:hover,
@@ -31,6 +40,12 @@
     border-color: var(--colorDefault50, #d7d7d7);
 }
 
+.k-filter-menu .k-button+.k-button:active,
+.k-filter-menu .k-button+.k-button.active,
+.dynamic-image-container .btn:active,
+.dynamic-image-container .btn.active,
+.k-dialog-buttongroup .k-button:active,
+.k-dialog-buttongroup .k-button.active,
 .k-button.active,
 .btn.active,
 .k-button:active,
@@ -44,6 +59,7 @@
 }
 
 /* Primary */
+.dynamic-image-container .btn.btn-info,
 .k-scheduler-edit-form .k-edit-field .k-button,
 .k-edit-form-container .k-edit-buttons .k-primary,
 .k-dialog-buttongroup .k-button.k-primary,
@@ -54,6 +70,8 @@
     color: var(--textColorPrimary40, #ffffff);
 }
 
+.dynamic-image-container .btn.btn-info:focus,
+.dynamic-image-container .btn.btn-info:hover,
 .k-scheduler-edit-form .k-edit-field .k-button:focus,
 .k-edit-form-container .k-edit-buttons .k-primary:focus,
 .k-scheduler-edit-form .k-edit-field .k-button:hover,
@@ -69,6 +87,8 @@
     border-color: var(--colorPrimary40, #2fa4e7);
 }
 
+.dynamic-image-container .btn.btn-info:active,
+.dynamic-image-container .btn.btn-info.active,
 .k-scheduler-edit-form .k-edit-field .k-button:active,
 .k-edit-form-container .k-edit-buttons .k-primary:active,
 .k-scheduler-edit-form .k-edit-field .k-button.active,
@@ -140,6 +160,7 @@
 }
 
 /* Danger */
+.k-dialog-buttongroup .k-button.k-danger,
 .k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
 .k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
 .k-button.k-danger,
@@ -149,6 +170,8 @@
     color: var(--textColorDanger40, #ffffff);
 }
 
+.k-dialog-buttongroup .k-button.k-danger:focus,
+.k-dialog-buttongroup .k-button.k-danger:hover,
 .k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
 .k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
 .k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
@@ -162,6 +185,8 @@
     border-color: var(--colorDanger40, #c71c22);
 }
 
+.k-dialog-buttongroup .k-button.k-danger:active,
+.k-dialog-buttongroup .k-button.k-danger.active,
 .k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
 .k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
 .k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone.active,
@@ -257,7 +282,7 @@
 .k-button.k-stable,
 .btn.btn-stable {
     background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
-    border-color: var(--colorStable40, #f8f8f8);
+    border-color: var(--colorStable50, #d9d9d9);
     color: var(--textColorStable40, #444444);
 }
 
@@ -267,7 +292,7 @@
 .btn.btn-stable:hover {
     color: var(--textColorStable40, #444444);
     background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable50, #d9d9d9) 60%, var(--colorStable60, #b6b6b6));
-    border-color: var(--colorStable40, #f8f8f8);
+    border-color: var(--colorStable50, #d9d9d9);
 }
 
 .k-button.k-stable.active,

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

@@ -0,0 +1,153 @@
+/* Default */
+.k-multiselect .k-button.k-state-hover,
+.k-multiselect .k-button,
+.combobox-default .k-multiselect .k-button.k-state-hover,
+.combobox-default .k-multiselect .k-button {
+    background: linear-gradient(var(--colorDefault10, #fcfcfc), var(--colorDefault10, #fcfcfc) 60%, var(--colorDefault40, #f5f5f5));
+    border-color: var(--colorDefault50, #d7d7d7);
+    color: var(--textColorDefault40, #444444);
+}
+
+.k-multiselect-wrap .k-button.k-state-hover .k-select,
+.k-multiselect-wrap .k-button:hover,
+.combobox-default .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-default .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorDefault40, #444444);
+    background: linear-gradient(var(--colorDefault30, #f7f7f7), var(--colorDefault50, #d7d7d7) 60%, var(--colorDefault60, #b3b3b3));
+    border-color: var(--colorDefault50, #d7d7d7);
+}
+
+/* Primary */
+.combobox-primary .k-multiselect .k-button.k-state-hover,
+.combobox-primary .k-multiselect .k-button {
+    background: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7) 60%, var(--colorPrimary50, #3c6088));
+    border-color: var(--colorPrimary40, #2fa4e7);
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.combobox-primary .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-primary .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorPrimary40, #ffffff);
+    background: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary50, #2990ca) 60%, var(--colorPrimary60, #2278a9));
+    border-color: var(--colorPrimary40, #2fa4e7);
+}
+
+/* success */
+.combobox-success .k-multiselect .k-button.k-state-hover,
+.combobox-success .k-multiselect .k-button {
+    background: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess40, #73a839) 60%, var(--colorSuccess50, #359e1d));
+    border-color: var(--colorSuccess40, #73a839);
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.combobox-success .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-success .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorSuccess40, #ffffff);
+    background: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess50, #659332) 60%, var(--colorSuccess60, #547b2a));
+    border-color: var(--colorSuccess40, #73a839);
+}
+
+/* info */
+.combobox-info .k-multiselect .k-button.k-state-hover,
+.combobox-info .k-multiselect .k-button {
+    background: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73) 60%, var(--colorCalm50, #033565));
+    border-color: var(--colorCalm40, #033c73);
+    color: var(--textColorCalm40, #ffffff);
+}
+
+.combobox-info .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-info .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorCalm40, #ffffff);
+    background: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm50, #033565) 60%, var(--colorCalm60, #022c54));
+    border-color: var(--colorCalm40, #033c73);
+}
+
+/* warning */
+.combobox-warning .k-multiselect .k-button.k-state-hover,
+.combobox-warning .k-multiselect .k-button {
+    background: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600) 60%, var(--colorWarning50, #c24b00));
+    border-color: var(--colorWarning40, #dd5600);
+    color: var(--textColorWarning40, #ffffff);
+}
+
+.combobox-warning .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-warning .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorWarning40, #ffffff);
+    background: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning50, #c24b00) 60%, var(--colorWarning60, #a23f00));
+    border-color: var(--colorWarning40, #dd5600);
+}
+
+/* danger */
+.combobox-danger .k-multiselect .k-button.k-state-hover,
+.combobox-danger .k-multiselect .k-button {
+    background: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #c71c22) 60%, var(--colorDanger50, #ae191e));
+    border-color: var(--colorDanger40, #c71c22);
+    color: var(--textColorDanger40, #ffffff);
+}
+
+.combobox-danger .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-danger .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorDanger40, #ffffff);
+    background: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger50, #ae191e) 60%, var(--colorDanger60, #921519));
+    border-color: var(--colorDanger40, #c71c22);
+}
+
+/* light */
+.combobox-light .k-multiselect .k-button.k-state-hover,
+.combobox-light .k-multiselect .k-button {
+    background: var(--colorLight40, #ffffff);
+    border-color: var(--colorLight60, #bbbbbb);
+    color: var(--textColorLight40, #444444);
+}
+
+.combobox-light .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-light .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorLight40, #444444);
+    background: var(--colorLight50, #dfdfdf);
+    border-color: var(--colorLight60, #bbbbbb);
+}
+
+/* Stable */
+.combobox-stable .k-multiselect .k-button.k-state-hover,
+.combobox-stable .k-multiselect .k-button {
+    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    border-color: var(--colorStable50, #d9d9d9);
+    color: var(--textColorStable40, #444444);
+}
+
+.combobox-stable .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-stable .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorStable40, #444444);
+    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable50, #d9d9d9) 60%, var(--colorStable60, #b6b6b6));
+    border-color: var(--colorStable50, #d9d9d9);
+}
+
+/* Royal */
+.combobox-royal .k-multiselect .k-button.k-state-hover,
+.combobox-royal .k-multiselect .k-button {
+    background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    border-color: var(--colorRoyal40, #886aea);
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+.combobox-royal .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-royal .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorRoyal40, #ffffff);
+    background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal50, #775dcd) 60%, var(--colorRoyal60, #644eab));
+    border-color: var(--colorRoyal40, #886aea);
+}
+
+/* Dark */
+.combobox-dark .k-multiselect .k-button.k-state-hover,
+.combobox-dark .k-multiselect .k-button {
+    background: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444) 60%, var(--colorDark50, #3c3c3c));
+    border-color: var(--colorDark40, #444444);
+    color: var(--textColorDark40, #ffffff);
+}
+
+.combobox-dark .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-dark .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorDark40, #ffffff);
+    background: linear-gradient(var(--colorDark30, #898989), var(--colorDark50, #3c3c3c) 60%, var(--colorDark60, #323232));
+    border-color: var(--colorDark40, #444444);
+}