@indigina/ui-kit 1.0.39 → 1.0.43

package/bundles/indigina-ui-kit.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@progress/kendo-angular-buttons'), require('rxjs'), require('initials'), require('@progress/kendo-angular-layout'), require('@angular/router'), require('@progress/kendo-angular-menu'), require('@angular/forms'), require('@progress/kendo-angular-inputs'), require('@progress/kendo-angular-label'), require('@progress/kendo-angular-dropdowns'), require('@angular/animations'), require('@progress/kendo-angular-dateinputs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@indigina/ui-kit', ['exports', '@angular/core', '@angular/common', '@progress/kendo-angular-buttons', 'rxjs', 'initials', '@progress/kendo-angular-layout', '@angular/router', '@progress/kendo-angular-menu', '@angular/forms', '@progress/kendo-angular-inputs', '@progress/kendo-angular-label', '@progress/kendo-angular-dropdowns', '@angular/animations', '@progress/kendo-angular-dateinputs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indigina = global.indigina || {}, global.indigina['ui-kit'] = {}), global.ng.core, global.ng.common, global['@progress/kendo-angular-buttons'], global.rxjs, global.initials, global['@progress/kendo-angular-layout'], global.ng.router, global['@progress/kendo-angular-menu'], global.ng.forms, global['@progress/kendo-angular-inputs'], global['@progress/kendo-angular-label'], global['@progress/kendo-angular-dropdowns'], global.ng.animations, global['@progress/kendo-angular-dateinputs'], global.rxjs.operators));
-}(this, (function (exports, core, common, kendoAngularButtons, rxjs, initials, kendoAngularLayout, router, kendoAngularMenu, forms, kendoAngularInputs, kendoAngularLabel, kendoAngularDropdowns, animations, kendoAngularDateinputs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@progress/kendo-angular-buttons'), require('projects/ui-kit/src/lib/components/kit-input-message/kit-input-message.component'), require('projects/ui-kit/src/lib/components/kit-input-message/kit-input-message.module'), require('@angular/forms'), require('@progress/kendo-angular-inputs'), require('@progress/kendo-angular-label'), require('projects/ui-kit/src/lib/components/kit-autocomplete/kit-autocomplete.component'), require('@progress/kendo-angular-dropdowns'), require('@angular/animations'), require('@progress/kendo-angular-dateinputs'), require('rxjs'), require('initials'), require('@angular/router'), require('@progress/kendo-angular-menu'), require('@progress/kendo-angular-layout'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@indigina/ui-kit', ['exports', '@angular/core', '@angular/common', '@progress/kendo-angular-buttons', 'projects/ui-kit/src/lib/components/kit-input-message/kit-input-message.component', 'projects/ui-kit/src/lib/components/kit-input-message/kit-input-message.module', '@angular/forms', '@progress/kendo-angular-inputs', '@progress/kendo-angular-label', 'projects/ui-kit/src/lib/components/kit-autocomplete/kit-autocomplete.component', '@progress/kendo-angular-dropdowns', '@angular/animations', '@progress/kendo-angular-dateinputs', 'rxjs', 'initials', '@angular/router', '@progress/kendo-angular-menu', '@progress/kendo-angular-layout', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indigina = global.indigina || {}, global.indigina['ui-kit'] = {}), global.ng.core, global.ng.common, global['@progress/kendo-angular-buttons'], global.kitInputMessage_component, global.kitInputMessage_module, global.ng.forms, global['@progress/kendo-angular-inputs'], global['@progress/kendo-angular-label'], global.kitAutocomplete_component, global['@progress/kendo-angular-dropdowns'], global.ng.animations, global['@progress/kendo-angular-dateinputs'], global.rxjs, global.initials, global.ng.router, global['@progress/kendo-angular-menu'], global['@progress/kendo-angular-layout'], global.rxjs.operators));
+}(this, (function (exports, core, common, kendoAngularButtons, kitInputMessage_component, kitInputMessage_module, forms, kendoAngularInputs, kendoAngularLabel, kitAutocomplete_component, kendoAngularDropdowns, animations, kendoAngularDateinputs, rxjs, initials, router, kendoAngularMenu, kendoAngularLayout, operators) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -134,151 +134,6 @@
                 },] }
     ];
 
-    (function (KitSvgIcon) {
-        KitSvgIcon["LOGO"] = "logo";
-        KitSvgIcon["CHEVRON_DOWN"] = "chevron-down";
-        KitSvgIcon["CHEVRON_UP"] = "chevron-up";
-        KitSvgIcon["CHEVRON_RIGHT"] = "chevron-right";
-        KitSvgIcon["PLUS"] = "plus";
-        KitSvgIcon["INFO"] = "info";
-        KitSvgIcon["CALENDAR"] = "calendar";
-        KitSvgIcon["WARNING"] = "warning";
-        KitSvgIcon["ERROR"] = "error";
-        KitSvgIcon["SUCCESS"] = "success";
-        KitSvgIcon["EYE"] = "eye";
-        KitSvgIcon["SEARCH"] = "search";
-        KitSvgIcon["EDIT"] = "edit";
-        KitSvgIcon["LOCATION"] = "location";
-        KitSvgIcon["CROSS"] = "cross";
-        KitSvgIcon["CHECK"] = "check";
-        KitSvgIcon["DISKETTE"] = "diskette";
-        KitSvgIcon["CLIPBOARD"] = "clipboard";
-        KitSvgIcon["LAYERS"] = "layers";
-    })(exports.KitSvgIcon || (exports.KitSvgIcon = {}));
-
-    /**
-     * This is needed in order to check whether this is the root menu item
-     */
-    var ROOT_MENU_ITEM_INDEX = '0';
-    var getInitialsByName = function (name) {
-        // we don't like reflexion but "initials" library returns union type
-        // so we don't want to have union type in our app
-        var result = initials__default['default'](name || '');
-        return Array.isArray(result) && result.join() || result;
-    };
-    var ɵ0 = getInitialsByName;
-    var KitHeaderComponent = /** @class */ (function () {
-        function KitHeaderComponent() {
-            /**
-             * Defines a list of link that will be in the header as the main nav
-             */
-            this.links = [];
-            /**
-             * Menu items that will be under avatar dropdown
-             */
-            this.menuItems = [];
-            /**
-             * Needs to be used to extract initials for avatar and show it there
-             */
-            this.username = null;
-            /**
-             * States whether the menu is open
-             * needed to control CSS class to rotate expand icon
-             */
-            this.menuOpen$ = new rxjs.BehaviorSubject(false);
-            /**
-             * An icon which will be used as a primary logotype in the header
-             */
-            this.SvgIconLogo = exports.KitSvgIcon.LOGO;
-            /**
-             * An icon which will be used as an expand icon next to avatar
-             */
-            this.SvgIconChevronDown = exports.KitSvgIcon.CHEVRON_DOWN;
-            /**
-             * This defines how menu will behave in case of menu opening
-             */
-            this.openOnClickSettings = {
-                // "click" means that menu will be closed only in case of clicking outside of menu
-                toggle: 'click',
-            };
-        }
-        /**
-         * Called once menu is opened
-         */
-        KitHeaderComponent.prototype.onMenuOpened = function () {
-            this.menuOpen$.next(true);
-        };
-        /**
-         * Called once menu is closed
-         */
-        KitHeaderComponent.prototype.onMenuClosed = function () {
-            this.menuOpen$.next(false);
-        };
-        /**
-         * Occurs when any menu item is selected
-         * we need to check whether the item is not the root one
-         */
-        KitHeaderComponent.prototype.onMenuSelect = function (_a) {
-            var index = _a.index, item = _a.item;
-            if (index === ROOT_MENU_ITEM_INDEX) {
-                return;
-            }
-            item.data.action();
-        };
-        /**
-         * Builds an object to pass action though events
-         */
-        KitHeaderComponent.prototype.getMenuItemData = function (item) {
-            return {
-                action: item.action,
-            };
-        };
-        KitHeaderComponent.prototype.getUsernameInitials = function () {
-            return getInitialsByName(this.username);
-        };
-        return KitHeaderComponent;
-    }());
-    KitHeaderComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kit-header',
-                    template: "<header class=\"kit-header\">\n  <a class=\"logo display-flex flex-justify-content-center\"\n     [class.clickable]=\"logoLink\"\n     [title]=\"caption\"\n     [routerLink]=\"logoLink\">\n    <kit-svg-icon class=\"icon\"\n                  [icon]=\"SvgIconLogo\"\n    ></kit-svg-icon>\n\n    <h1 class=\"caption\">{{ caption }}</h1>\n  </a>\n\n  <nav *ngIf=\"links.length\" class=\"display-flex\">\n    <a *ngFor=\"let link of links; let index = index\"\n       class=\"link\"\n       routerLinkActive=\"active\"\n       [class.disabled]=\"link.disabled && link.disabled()\"\n       [routerLink]=\"link.link\"\n       [tabIndex]=\"index\"\n       [title]=\"link.title\"\n    >{{ link.title }}</a>\n  </nav>\n\n  <div class=\"profile display-flex flex-align-items-center flex-justify-content-end\">\n    <kendo-avatar class=\"avatar\"\n                  shape=\"circle\"\n                  [initials]=\"getUsernameInitials()\"\n    ></kendo-avatar>\n\n    <ng-container *ngIf=\"menuItems.length\">\n      <kit-svg-icon class=\"expand-menu-icon\"\n                    [class.open]=\"menuOpen$ | async\"\n                    [icon]=\"SvgIconChevronDown\"\n      ></kit-svg-icon>\n\n      <kendo-menu [openOnClick]=\"openOnClickSettings\"\n                  [title]=\"username\"\n                  (open)=\"onMenuOpened()\"\n                  (select)=\"onMenuSelect($event)\"\n                  (close)=\"onMenuClosed()\">\n        <kendo-menu-item>\n          <kendo-menu-item *ngFor=\"let item of menuItems\"\n                           [data]=\"getMenuItemData(item)\"\n                           [text]=\"item.text\"\n                           [title]=\"item.text\"\n          ></kendo-menu-item>\n        </kendo-menu-item>\n      </kendo-menu>\n    </ng-container>\n  </div>\n</header>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None,
-                    styles: [".kit-header{-ms-grid-columns:1fr 2fr 1fr;background-color:#fff;display:-ms-grid;display:grid;grid-template-columns:1fr 2fr 1fr}.kit-header .logo{align-items:flex-start;flex-flow:column;margin-left:20px;pointer-events:none;text-decoration:none}.kit-header .logo.clickable{pointer-events:auto}.kit-header .logo .icon{height:16px;width:20px}.kit-header .logo .caption{color:#74777d;font-size:14px;font-weight:700;margin:0;text-transform:uppercase}.kit-header .link{color:var(--theme-color-1,#006890);display:block;font-size:18px;font-weight:500;padding:28px 8px;position:relative;text-decoration:none}.kit-header .link:after{border-bottom:4px solid var(--theme-color-1,#006890);bottom:0;left:0;opacity:.3;position:absolute;right:0}.kit-header .link:hover{color:var(--theme-color-4,#003e56)}.kit-header .link:hover:after{content:\"\"}.kit-header .link.active{color:var(--theme-color-5,#002a3a)}.kit-header .link.active:after{border-color:var(--theme-color-4,#003e56);content:\"\";opacity:1}.kit-header .disabled{opacity:.2;pointer-events:none}.kit-header .profile{margin-right:20px}.kit-header .profile .avatar{background-color:#cce1e9;color:#27282a;flex-basis:44px;height:44px;width:44px}.kit-header .profile .avatar .k-avatar-text{font-size:16px}.kit-header .profile .k-menu{border-radius:50%;cursor:pointer;margin-left:-64px;outline:0;overflow:hidden}.kit-header .profile .k-menu .k-link{visibility:hidden}.kit-header .profile .k-menu .k-first{box-shadow:none;height:44px;padding-right:20px;width:44px}.kit-header .profile .expand-menu-icon{height:20px;width:20px}.kit-header .profile .expand-menu-icon.open .icon{transform:rotate(180deg)}.kit-header .profile .expand-menu-icon .chevron-down-icon{fill:#fff;stroke:#006890}@media screen and (max-width:768px){.kit-header .caption{display:none}}@media screen and (min-width:768px){.kit-header .link{margin:0 10px}}@media screen and (min-width:1080px){.kit-header .link{margin:0 16px}}@media screen and (min-width:1366px){.kit-header .link{margin:0 20px}}@media screen and (min-width:2000px){.kit-header .link{margin:0 30px}}@media screen and (min-width:2366px){.kit-header .link{margin:0 60px}}"]
-                },] }
-    ];
-    KitHeaderComponent.propDecorators = {
-        caption: [{ type: core.Input }],
-        initials: [{ type: core.Input }],
-        links: [{ type: core.Input }],
-        menuItems: [{ type: core.Input }],
-        username: [{ type: core.Input }],
-        logoLink: [{ type: core.Input }]
-    };
-
-    var KitHeaderModule = /** @class */ (function () {
-        function KitHeaderModule() {
-        }
-        return KitHeaderModule;
-    }());
-    KitHeaderModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        KitHeaderComponent,
-                    ],
-                    exports: [
-                        KitHeaderComponent,
-                    ],
-                    imports: [
-                        kendoAngularLayout.AvatarModule,
-                        common.CommonModule,
-                        router.RouterModule,
-                        KitSvgIconModule,
-                        kendoAngularMenu.MenuModule,
-                    ],
-                },] }
-    ];
-
     var KitSvgSpriteComponent = /** @class */ (function () {
         function KitSvgSpriteComponent() {
         }
@@ -312,6 +167,28 @@
                 },] }
     ];
 
+    (function (KitSvgIcon) {
+        KitSvgIcon["LOGO"] = "logo";
+        KitSvgIcon["CHEVRON_DOWN"] = "chevron-down";
+        KitSvgIcon["CHEVRON_UP"] = "chevron-up";
+        KitSvgIcon["CHEVRON_RIGHT"] = "chevron-right";
+        KitSvgIcon["PLUS"] = "plus";
+        KitSvgIcon["INFO"] = "info";
+        KitSvgIcon["CALENDAR"] = "calendar";
+        KitSvgIcon["WARNING"] = "warning";
+        KitSvgIcon["ERROR"] = "error";
+        KitSvgIcon["SUCCESS"] = "success";
+        KitSvgIcon["EYE"] = "eye";
+        KitSvgIcon["SEARCH"] = "search";
+        KitSvgIcon["EDIT"] = "edit";
+        KitSvgIcon["LOCATION"] = "location";
+        KitSvgIcon["CROSS"] = "cross";
+        KitSvgIcon["CHECK"] = "check";
+        KitSvgIcon["DISKETTE"] = "diskette";
+        KitSvgIcon["CLIPBOARD"] = "clipboard";
+        KitSvgIcon["LAYERS"] = "layers";
+    })(exports.KitSvgIcon || (exports.KitSvgIcon = {}));
+
     var KitLoaderComponent = /** @class */ (function () {
         function KitLoaderComponent() {
             /**
@@ -353,6 +230,10 @@
         KitSwitchMode["SINGLE"] = "single";
         KitSwitchMode["MULTI"] = "multiple";
     })(exports.KitSwitchMode || (exports.KitSwitchMode = {}));
+    (function (KitSwitchState) {
+        KitSwitchState["REGULAR"] = "regular";
+        KitSwitchState["DANGER"] = "danger";
+    })(exports.KitSwitchState || (exports.KitSwitchState = {}));
     var KitSwitchComponent = /** @class */ (function () {
         function KitSwitchComponent() {
             /**
@@ -364,6 +245,14 @@
              * defines whether it will be possible to choose several options at time
              */
             this.mode = exports.KitSwitchMode.SINGLE;
+            /**
+             * Defines a value which going to be an info message type
+             */
+            this.messageType = kitInputMessage_component.KitInputMessageType.DEFAULT;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = exports.KitSwitchState.REGULAR;
             /**
              * emits when an items has been selected
              */
@@ -407,10 +296,10 @@
     KitSwitchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-switch',
-                    template: "<div class=\"kit-switch\">\n  <ng-container *ngIf=\"items.length\">\n    <label *ngIf=\"label\" class=\"label display-block\"\n           [title]=\"label\"\n    >{{ label }}</label>\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n  </ng-container>\n</div>\n",
+                    template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    <label *ngIf=\"label\" class=\"label display-block\"\n           [title]=\"label\"\n    >{{ label }}</label>\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [type]=\"messageType\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;border-radius:4px;box-shadow:none;color:var(--theme-color-1,#006890);opacity:1;padding:8px}.kit-switch .button.k-button .icon{fill:none;stroke:var(--theme-color-1,#006890)}.kit-switch .button.k-button.k-state-hover,.kit-switch .button.k-button.k-state-selected,.kit-switch .button.k-button:hover{background-color:var(--theme-color-5,#002a3a);color:#fff}.kit-switch .button.k-button.k-state-hover .icon,.kit-switch .button.k-button.k-state-selected .icon,.kit-switch .button.k-button:hover .icon{stroke:#fff}.kit-switch .button.k-button.k-state-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-state-selected.k-state-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{height:16px;width:16px}"]
+                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;border-radius:4px;box-shadow:none;color:var(--theme-color-1,#006890);opacity:1;padding:8px}.kit-switch .button.k-button .icon{fill:none;stroke:var(--theme-color-1,#006890)}.kit-switch .button.k-button.k-state-hover,.kit-switch .button.k-button.k-state-selected,.kit-switch .button.k-button:hover{background-color:var(--theme-color-5,#002a3a);color:#fff}.kit-switch .button.k-button.k-state-hover .icon,.kit-switch .button.k-button.k-state-selected .icon,.kit-switch .button.k-button:hover .icon{stroke:#fff}.kit-switch .button.k-button.k-state-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-state-selected.k-state-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{height:16px;width:16px}.kit-switch.danger .k-button-group{background:#f8e0e0;border-color:#ef3e42}"]
                 },] }
     ];
     KitSwitchComponent.propDecorators = {
@@ -419,6 +308,10 @@
         label: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
         selection: [{ type: core.Input }],
+        messageIcon: [{ type: core.Input }],
+        messageText: [{ type: core.Input }],
+        messageType: [{ type: core.Input }],
+        state: [{ type: core.Input }],
         selected: [{ type: core.Output }]
     };
 
@@ -440,6 +333,7 @@
                         kendoAngularButtons.ButtonModule,
                         common.CommonModule,
                         KitSvgIconModule,
+                        kitInputMessage_module.KitInputMessageModule,
                     ],
                 },] }
     ];
@@ -718,6 +612,10 @@
                 },] }
     ];
 
+    (function (KitDropdownState) {
+        KitDropdownState["REGULAR"] = "regular";
+        KitDropdownState["DANGER"] = "danger";
+    })(exports.KitDropdownState || (exports.KitDropdownState = {}));
     var KitDropdownComponent = /** @class */ (function () {
         function KitDropdownComponent() {
             /**
@@ -728,6 +626,10 @@
              * Defines a value which going to be an info message type
              */
             this.messageType = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = kitAutocomplete_component.KitAutocompleteState.REGULAR;
             /**
              * occurs once an item in the dropdown is selected
              */
@@ -777,7 +679,7 @@
     KitDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-dropdown',
-                    template: "<div class=\"kit-dropdown\" [class.disabled]=\"disabled\">\n  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               [for]=\"dropdown\"\n  ></kendo-label>\n  <kendo-dropdownlist #dropdown valueField=\"value\" textField=\"text\" class=\"dropdown\"\n                      [data]=\"items\"\n                      [value]=\"selectedItem\"\n                      [valuePrimitive]=\"true\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"dropdownPopupSettings\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      (selectionChange)=\"onItemSelect($event)\"\n  ></kendo-dropdownlist>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    template: "<div class=\"kit-dropdown {{ state }}\" [class.disabled]=\"disabled\">\n  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               [for]=\"dropdown\"\n  ></kendo-label>\n  <kendo-dropdownlist #dropdown valueField=\"value\" textField=\"text\" class=\"dropdown\"\n                      [data]=\"items\"\n                      [value]=\"selectedItem\"\n                      [valuePrimitive]=\"true\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"dropdownPopupSettings\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      (selectionChange)=\"onItemSelect($event)\"\n  ></kendo-dropdownlist>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [{
@@ -785,7 +687,7 @@
                             useExisting: core.forwardRef(function () { return KitDropdownComponent; }),
                             multi: true,
                         }],
-                    styles: ["@charset \"UTF-8\";.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-dropdown .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-dropdown .k-state-disabled{background-color:#f3f4f6}.kit-dropdown .k-input{color:#27282a;font-size:14px;font-weight:400;height:100%}.kit-dropdown .k-icon:before{color:#000;content:\"\uE015\"}.kit-dropdown .k-dropdown{height:34px;width:100%}.kit-dropdown .k-dropdown-wrap{background-color:#fff;border:1px solid #c1c7d0;border-radius:4px}.kit-dropdown .k-dropdown-wrap:hover{background-color:#fff}.kit-dropdown .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-dropdown:focus-within .k-dropdown-wrap{border:1px solid #006890}.kit-dropdown:focus-within .k-dropdown-wrap .k-icon:before{color:#006890}.kit-dropdown.disabled .label{color:#74777d}.kit-dropdown-popup.k-popup{background-color:#f3f4f6;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px rgba(0,62,86,.5);margin-top:4px;padding:4px}.kit-dropdown-popup.k-popup .k-item{background-color:#fff;border-radius:2px;box-shadow:none!important;color:#27282a;font-size:13px;font-weight:500;line-height:1}.kit-dropdown-popup.k-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-dropdown-popup.k-popup .k-item.k-state-focused:hover,.kit-dropdown-popup.k-popup .k-item:hover{background-color:#f3f5fa;color:#006890}.kit-dropdown-popup.k-popup .k-item.k-state-selected{background-color:#006890;color:#fff}.kit-dropdown-popup.k-popup .k-item.k-state-disabled{background-color:#f3f4f6;color:#9a9fa6}"]
+                    styles: ["@charset \"UTF-8\";.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-dropdown .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-dropdown .k-state-disabled{background-color:#f3f4f6}.kit-dropdown .k-input{color:#27282a;font-size:14px;font-weight:400;height:100%}.kit-dropdown .k-icon:before{color:#000;content:\"\uE015\"}.kit-dropdown .k-dropdown{height:34px;width:100%}.kit-dropdown .k-dropdown-wrap{background-color:#fff;border:1px solid #c1c7d0;border-radius:4px}.kit-dropdown .k-dropdown-wrap:hover{background-color:#fff}.kit-dropdown .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-dropdown:focus-within .k-dropdown-wrap{border:1px solid #006890}.kit-dropdown:focus-within .k-dropdown-wrap .k-icon:before{color:#006890}.kit-dropdown.disabled .label{color:#74777d}.kit-dropdown.danger .k-dropdown-wrap{background:#f8e0e0;border-color:#ef3e42}.kit-dropdown-popup.k-popup{background-color:#f3f4f6;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px rgba(0,62,86,.5);margin-top:4px;padding:4px}.kit-dropdown-popup.k-popup .k-item{background-color:#fff;border-radius:2px;box-shadow:none!important;color:#27282a;font-size:13px;font-weight:500;line-height:1}.kit-dropdown-popup.k-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-dropdown-popup.k-popup .k-item.k-state-focused:hover,.kit-dropdown-popup.k-popup .k-item:hover{background-color:#f3f5fa;color:#006890}.kit-dropdown-popup.k-popup .k-item.k-state-selected{background-color:#006890;color:#fff}.kit-dropdown-popup.k-popup .k-item.k-state-disabled{background-color:#f3f4f6;color:#9a9fa6}"]
                 },] }
     ];
     KitDropdownComponent.propDecorators = {
@@ -796,6 +698,7 @@
         messageIcon: [{ type: core.Input }],
         messageText: [{ type: core.Input }],
         messageType: [{ type: core.Input }],
+        state: [{ type: core.Input }],
         selected: [{ type: core.Output }]
     };
 
@@ -822,6 +725,10 @@
                 },] }
     ];
 
+    (function (KitTextareaState) {
+        KitTextareaState["REGULAR"] = "regular";
+        KitTextareaState["DANGER"] = "danger";
+    })(exports.KitTextareaState || (exports.KitTextareaState = {}));
     var KitTextareaComponent = /** @class */ (function () {
         function KitTextareaComponent() {
             /**
@@ -832,6 +739,10 @@
              * Defines a state whether the textarea will be disabled or not
              */
             this.disabled = false;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = exports.KitTextareaState.REGULAR;
             /**
              * An action which is emitted when textarea field received focus
              */
@@ -905,7 +816,7 @@
     KitTextareaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-textarea',
-                    template: "<div class=\"kit-textarea\" [class.textarea-disabled]=\"disabled\">\n  <kendo-label *ngIf=\"label\" [text]=\"label\" [for]=\"textarea\"></kendo-label>\n  <textarea autoresize #textarea class=\"k-input\"\n            [attr.placeholder]=\"placeholder\"\n            [style.min-height.px]=\"minHeight\"\n            [style.max-height.px]=\"maxHeight\"\n            [attr.maxlength]=\"maxlength\"\n            [disabled]=\"disabled\"\n            [value]=\"defaultValue\"\n            (focus)=\"onTextareaFocus()\"\n            (blur)=\"onTextareaBlur()\"\n            (input)=\"onTextareaChange($event)\"\n  ></textarea>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    template: "<div class=\"kit-textarea {{ state }}\" [class.textarea-disabled]=\"disabled\">\n  <kendo-label *ngIf=\"label\" [text]=\"label\" [for]=\"textarea\"></kendo-label>\n  <textarea autoresize #textarea class=\"k-input\"\n            [attr.placeholder]=\"placeholder\"\n            [style.min-height.px]=\"minHeight\"\n            [style.max-height.px]=\"maxHeight\"\n            [attr.maxlength]=\"maxlength\"\n            [disabled]=\"disabled\"\n            [value]=\"defaultValue\"\n            (focus)=\"onTextareaFocus()\"\n            (blur)=\"onTextareaBlur()\"\n            (input)=\"onTextareaChange($event)\"\n  ></textarea>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [{
@@ -913,7 +824,7 @@
                             useExisting: core.forwardRef(function () { return KitTextareaComponent; }),
                             multi: true,
                         }],
-                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-textarea .k-label{color:#27282a;display:block;font-size:13px;font-weight:500;margin-bottom:4px}.kit-textarea .k-input{background:#fff;border:1px solid #c1c7d0;border-radius:4px;box-sizing:border-box;color:#27282a;font-size:14px;line-height:1.2;min-height:34px;overflow:auto;padding:8px;resize:none;width:100%}.kit-textarea .k-input::-moz-placeholder{color:#74777d}.kit-textarea .k-input:-ms-input-placeholder{color:#74777d}.kit-textarea .k-input::placeholder{color:#74777d}.kit-textarea .k-input:focus{border-color:#006890}.kit-textarea .k-input:disabled{background:#f3f4f6;color:#9a9fa6}.kit-textarea .k-input:disabled::-moz-placeholder{color:#9a9fa6}.kit-textarea .k-input:disabled:-ms-input-placeholder{color:#9a9fa6}.kit-textarea .k-input:disabled::placeholder{color:#9a9fa6}.kit-textarea.textarea-disabled .k-label{color:#74777d}"]
+                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-textarea .k-label{color:#27282a;display:block;font-size:13px;font-weight:500;margin-bottom:4px}.kit-textarea .k-input{background:#fff;border:1px solid #c1c7d0;border-radius:4px;box-sizing:border-box;color:#27282a;font-size:14px;line-height:1.2;min-height:34px;overflow:auto;padding:8px;resize:none;width:100%}.kit-textarea .k-input::-moz-placeholder{color:#74777d}.kit-textarea .k-input:-ms-input-placeholder{color:#74777d}.kit-textarea .k-input::placeholder{color:#74777d}.kit-textarea .k-input:focus{border-color:#006890}.kit-textarea .k-input:disabled{background:#f3f4f6;color:#9a9fa6}.kit-textarea .k-input:disabled::-moz-placeholder{color:#9a9fa6}.kit-textarea .k-input:disabled:-ms-input-placeholder{color:#9a9fa6}.kit-textarea .k-input:disabled::placeholder{color:#9a9fa6}.kit-textarea.textarea-disabled .k-label{color:#74777d}.kit-textarea.danger .k-input{background:#f8e0e0;border-color:#ef3e42}"]
                 },] }
     ];
     KitTextareaComponent.propDecorators = {
@@ -926,6 +837,7 @@
         disabled: [{ type: core.Input }],
         messageIcon: [{ type: core.Input }],
         messageText: [{ type: core.Input }],
+        state: [{ type: core.Input }],
         focused: [{ type: core.Output }],
         blured: [{ type: core.Output }],
         changed: [{ type: core.Output }]
@@ -985,6 +897,11 @@
                 },] }
     ];
 
+    var KitTextLabelState;
+    (function (KitTextLabelState) {
+        KitTextLabelState["REGULAR"] = "regular";
+        KitTextLabelState["DANGER"] = "danger";
+    })(KitTextLabelState || (KitTextLabelState = {}));
     var KitTextLabelComponent = /** @class */ (function () {
         function KitTextLabelComponent() {
             /**
@@ -1003,16 +920,20 @@
              * Defines a value which going to be an info message type
              */
             this.messageType = exports.KitInputMessageType.HINT;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = KitTextLabelState.REGULAR;
         }
         return KitTextLabelComponent;
     }());
     KitTextLabelComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-text-label',
-                    template: "<div class=\"kit-text-label\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n  <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [type]=\"messageType\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n  <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [type]=\"messageType\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-text-label{background:#fff;border:1px solid transparent;border-radius:4px;display:inline-block;outline:none;padding:6px 4px 4px}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .k-label{color:#27282a;display:block;font-size:13px;font-weight:500;margin-bottom:4px}.kit-text-label .value{border-radius:4px;color:#27282a;font-size:14px;font-weight:400}.kit-text-label.text-label-empty .value{background:#f3f4f6;height:22px;min-width:112px}"]
+                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-text-label{background:#fff;border:1px solid transparent;border-radius:4px;display:inline-block;outline:none;padding:6px 4px 4px}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .k-label{color:#27282a;display:block;font-size:13px;font-weight:500;margin-bottom:4px}.kit-text-label .value{border-radius:4px;color:#27282a;font-size:14px;font-weight:400}.kit-text-label.text-label-empty .value{background:#f3f4f6;height:22px;min-width:112px}.kit-text-label.danger{background:#f8e0e0;border-color:#ef3e42}"]
                 },] }
     ];
     KitTextLabelComponent.propDecorators = {
@@ -1021,7 +942,8 @@
         htmlMode: [{ type: core.Input }],
         noValueMessage: [{ type: core.Input }],
         messageText: [{ type: core.Input }],
-        messageType: [{ type: core.Input }]
+        messageType: [{ type: core.Input }],
+        state: [{ type: core.Input }]
     };
 
     var KitTextLabelModule = /** @class */ (function () {
@@ -1184,6 +1106,11 @@
         KitUnitsTextboxType["TEXT"] = "text";
         KitUnitsTextboxType["NUMBER"] = "number";
     })(exports.KitUnitsTextboxType || (exports.KitUnitsTextboxType = {}));
+    var KitUnitsTextboxState;
+    (function (KitUnitsTextboxState) {
+        KitUnitsTextboxState["REGULAR"] = "regular";
+        KitUnitsTextboxState["DANGER"] = "danger";
+    })(KitUnitsTextboxState || (KitUnitsTextboxState = {}));
     var KitUnitsTextboxComponent = /** @class */ (function () {
         function KitUnitsTextboxComponent() {
             /**
@@ -1214,6 +1141,10 @@
              * Defines a value which used to set type ot he textbox field
              */
             this.textboxType = exports.KitUnitsTextboxType.TEXT;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = KitUnitsTextboxState.REGULAR;
             /**
              * Occurs once an item in the dropdown is selected
              */
@@ -1275,10 +1206,10 @@
     KitUnitsTextboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-units-textbox',
-                    template: "<div class=\"kit-units-textbox\" [class.textbox-disabled]=\"disabledTextBox\"\n                               [class.dropdown-disabled]=\"disabledDropdown\"\n                               [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               ></kendo-label>\n  <div class=\"units-textbox-wrap\">\n    <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n                   [placeholder]=\"placeholder\"\n                   [value]=\"textBoxFormControl.value || textBoxValue\"\n                   [disabled]=\"disabledTextBox\"\n                   (blur)=\"onInputBlur()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    <ng-template #numericTextboxTemplate>\n      <kendo-numerictextbox [placeholder]=\"placeholder\"\n                            [value]=\"textBoxFormControl.value || textBoxValue\"\n                            [decimals]=\"decimals\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [maxlength]=\"maxlength\"\n                            [format]=\"format\"\n                            [autoCorrect]=\"true\"\n                            [spinners]=\"false\"\n                            [selectOnFocus]=\"false\"\n                            [disabled]=\"disabledTextBox\"\n                            (blur)=\"onInputBlur()\"\n                            (valueChange)=\"onInputChange($event)\"\n      ></kendo-numerictextbox>\n    </ng-template>\n    <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n                        [data]=\"dropdownItems\"\n                        [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n                        [valuePrimitive]=\"true\"\n                        [disabled]=\"disabledDropdown\"\n                        [popupSettings]=\"dropdownPopupSettings\"\n                        [itemDisabled]=\"onItemDisabled()\"\n                        (selectionChange)=\"onItemSelect($event)\"\n                        (blur)=\"onDropdownBlur()\"\n    ></kendo-dropdownlist>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n                               [class.dropdown-disabled]=\"disabledDropdown\"\n                               [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               ></kendo-label>\n  <div class=\"units-textbox-wrap\">\n    <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n                   [placeholder]=\"placeholder\"\n                   [value]=\"textBoxFormControl.value || textBoxValue\"\n                   [disabled]=\"disabledTextBox\"\n                   (blur)=\"onInputBlur()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    <ng-template #numericTextboxTemplate>\n      <kendo-numerictextbox [placeholder]=\"placeholder\"\n                            [value]=\"textBoxFormControl.value || textBoxValue\"\n                            [decimals]=\"decimals\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [maxlength]=\"maxlength\"\n                            [format]=\"format\"\n                            [autoCorrect]=\"true\"\n                            [spinners]=\"false\"\n                            [selectOnFocus]=\"false\"\n                            [disabled]=\"disabledTextBox\"\n                            (blur)=\"onInputBlur()\"\n                            (valueChange)=\"onInputChange($event)\"\n      ></kendo-numerictextbox>\n    </ng-template>\n    <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n                        [data]=\"dropdownItems\"\n                        [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n                        [valuePrimitive]=\"true\"\n                        [disabled]=\"disabledDropdown\"\n                        [popupSettings]=\"dropdownPopupSettings\"\n                        [itemDisabled]=\"onItemDisabled()\"\n                        (selectionChange)=\"onItemSelect($event)\"\n                        (blur)=\"onDropdownBlur()\"\n    ></kendo-dropdownlist>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: ["@charset \"UTF-8\";.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-units-textbox .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{background:#fff;border:1px solid #c1c7d0;border-radius:4px;box-sizing:border-box;display:flex;height:34px}.kit-units-textbox .k-numerictextbox,.kit-units-textbox .k-textbox{flex-grow:1}.kit-units-textbox .k-numerictextbox .k-input,.kit-units-textbox .k-textbox .k-input{color:#27282a;font-size:14px;height:100%;padding:0 8px}.kit-units-textbox .k-dropdown{width:auto}.kit-units-textbox .k-dropdown .k-input{color:#74777d;font-size:13px;font-weight:500;height:100%;justify-content:flex-end;padding:0}.kit-units-textbox .k-dropdown .k-icon:before{color:#000;content:\"\uE015\"}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #006890}.kit-units-textbox .k-dropdown-wrap{background:none;border:none}.kit-units-textbox .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-units-textbox .k-dropdown-wrap.k-state-focused .k-icon:before,.kit-units-textbox .k-dropdown-wrap.k-state-focused .k-input{color:#006890}.kit-units-textbox .k-dropdown-wrap:hover{background:none}.kit-units-textbox .k-animation-container{left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{background-color:#f3f4f6;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px rgba(0,62,86,.5);margin-top:8px;min-width:75px;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-item{background-color:#fff;border-radius:2px;box-shadow:none!important;color:#27282a;font-size:13px;font-weight:500;justify-content:flex-end;line-height:1;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-focused:hover,.kit-units-textbox .kit-dropdown-popup .k-item:hover{background-color:#f3f5fa;color:#006890}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-selected{background-color:#006890;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{background-color:#f3f4f6;border-color:#c1c7d0;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox{-ms-grid-column:2;-ms-grid-row:1;grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdown{-ms-grid-column:1;grid-column:1}.kit-units-textbox.units-left .k-dropdown .k-input{padding-left:10px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdown-wrap .k-icon:before,.kit-units-textbox.dropdown-disabled .k-dropdown-wrap .k-input{color:#9a9fa6}"]
+                    styles: ["@charset \"UTF-8\";.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-units-textbox .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{background:#fff;border:1px solid #c1c7d0;border-radius:4px;box-sizing:border-box;display:flex;height:34px}.kit-units-textbox .k-numerictextbox,.kit-units-textbox .k-textbox{flex-grow:1}.kit-units-textbox .k-numerictextbox .k-input,.kit-units-textbox .k-textbox .k-input{color:#27282a;font-size:14px;height:100%;padding:0 8px}.kit-units-textbox .k-dropdown{width:auto}.kit-units-textbox .k-dropdown .k-input{color:#74777d;font-size:13px;font-weight:500;height:100%;justify-content:flex-end;padding:0}.kit-units-textbox .k-dropdown .k-icon:before{color:#000;content:\"\uE015\"}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #006890}.kit-units-textbox .k-dropdown-wrap{background:none;border:none}.kit-units-textbox .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-units-textbox .k-dropdown-wrap.k-state-focused .k-icon:before,.kit-units-textbox .k-dropdown-wrap.k-state-focused .k-input{color:#006890}.kit-units-textbox .k-dropdown-wrap:hover{background:none}.kit-units-textbox .k-animation-container{left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{background-color:#f3f4f6;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px rgba(0,62,86,.5);margin-top:8px;min-width:75px;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-item{background-color:#fff;border-radius:2px;box-shadow:none!important;color:#27282a;font-size:13px;font-weight:500;justify-content:flex-end;line-height:1;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-focused:hover,.kit-units-textbox .kit-dropdown-popup .k-item:hover{background-color:#f3f5fa;color:#006890}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-selected{background-color:#006890;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-item.k-state-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{background-color:#f3f4f6;border-color:#c1c7d0;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox{-ms-grid-column:2;-ms-grid-row:1;grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdown{-ms-grid-column:1;grid-column:1}.kit-units-textbox.units-left .k-dropdown .k-input{padding-left:10px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdown-wrap .k-icon:before,.kit-units-textbox.dropdown-disabled .k-dropdown-wrap .k-input{color:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{background:#f8e0e0;border-color:#ef3e42}"]
                 },] }
     ];
     KitUnitsTextboxComponent.propDecorators = {
@@ -1301,6 +1232,7 @@
         max: [{ type: core.Input }],
         maxlength: [{ type: core.Input }],
         format: [{ type: core.Input }],
+        state: [{ type: core.Input }],
         selected: [{ type: core.Output }],
         changed: [{ type: core.Output }]
     };
@@ -1427,6 +1359,9 @@
             this.onChange(value);
         };
         KitDatetimepickerComponent.prototype.writeValue = function (value) {
+            if (!value) {
+                return;
+            }
             this.onChange(new Date(value));
             this.defaultDate = new Date(value);
         };
@@ -1516,7 +1451,8 @@
         { type: core.Component, args: [{
                     selector: 'kit-notification',
                     template: "<div class=\"kit-notification notification-{{ type }}\">\n  <kit-svg-icon class=\"notification-icon\"\n                [icon]=\"type\"\n  ></kit-svg-icon>\n  <div class=\"notification-text\">{{ message }}</div>\n</div>\n",
-                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-notification{align-items:center;display:flex;padding:12px}.kit-notification .notification-icon{fill:none;height:20px;margin-right:10px;width:20px}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}"]
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-notification{align-items:center;display:flex;padding:12px}.kit-notification .notification-icon{fill:none;flex-shrink:0;height:20px;margin-right:10px;width:20px}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}"]
                 },] }
     ];
     KitNotificationComponent.propDecorators = {
@@ -1547,14 +1483,14 @@
     /**
      * This is needed in order to check whether this is the root menu item
      */
-    var ROOT_MENU_ITEM_INDEX$1 = '0';
-    var getInitialsByName$1 = function (name) {
+    var ROOT_MENU_ITEM_INDEX = '0';
+    var getInitialsByName = function (name) {
         // we don't like reflexion but "initials" library returns union type
         // so we don't want to have union type in our app
         var result = initials__default['default'](name || '');
         return Array.isArray(result) && result.join() || result;
     };
-    var ɵ0$1 = getInitialsByName$1;
+    var ɵ0 = getInitialsByName;
     var KitNavbarComponent = /** @class */ (function () {
         function KitNavbarComponent() {
             /**
@@ -1604,7 +1540,7 @@
          */
         KitNavbarComponent.prototype.onMenuSelect = function (_a) {
             var index = _a.index, item = _a.item;
-            if (index === ROOT_MENU_ITEM_INDEX$1) {
+            if (index === ROOT_MENU_ITEM_INDEX) {
                 return;
             }
             item.data.action();
@@ -1618,7 +1554,7 @@
             };
         };
         KitNavbarComponent.prototype.getUsernameInitials = function () {
-            return getInitialsByName$1(this.username);
+            return getInitialsByName(this.username);
         };
         return KitNavbarComponent;
     }());
@@ -1706,6 +1642,10 @@
                 },] }
     ];
 
+    (function (KitAutocompleteState) {
+        KitAutocompleteState["REGULAR"] = "regular";
+        KitAutocompleteState["DANGER"] = "danger";
+    })(exports.KitAutocompleteState || (exports.KitAutocompleteState = {}));
     var KitAutocompleteComponent = /** @class */ (function () {
         function KitAutocompleteComponent(elementRef) {
             var _this = this;
@@ -1722,6 +1662,10 @@
              * Defines a value which going to be an info message type
              */
             this.messageType = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = exports.KitAutocompleteState.REGULAR;
             /**
              * An action which is emitted when input value changed
              */
@@ -1731,18 +1675,17 @@
              */
             this.selected = new core.EventEmitter();
             /**
-             * Defines a value of the current selected dropdown list item
+             * An action which is emitted when input lost focus
              */
-            this.selectedValue = null;
+            this.blured = new core.EventEmitter();
             /**
              * Function that emit normalized selected dropdown list item in case when
              * inputted data changed and component lost focus
              */
             this.normalizedSelectedValue$ = function (text$) { return text$.pipe(operators.map(function (content) {
-                var _a;
-                _this.selectedValue = content ? _this.selectedValue : null;
+                _this.selectedValue = content && _this.selectedValue || null;
                 _this.selected.emit(_this.selectedValue);
-                _this.onChange(((_a = _this.selectedValue) === null || _a === void 0 ? void 0 : _a.value) || null);
+                _this.onChange(_this.selectedValue || null);
                 return _this.selectedValue;
             })); };
             /**
@@ -1763,6 +1706,12 @@
             this.onTouched = function () {
             };
         }
+        /**
+         * Callback function that return dropdown list item text
+         */
+        KitAutocompleteComponent.prototype.getOptionText = function (item) {
+            return item.getText && item.getText() || item.text;
+        };
         /**
          * Function that is called when input value changed
          */
@@ -1778,13 +1727,14 @@
             }
             this.selectedValue = item;
             this.selected.emit(this.selectedValue);
-            this.onChange(this.selectedValue.value);
+            this.onChange(this.selectedValue);
         };
         /**
          * Function that is called when input field lost focus
          */
         KitAutocompleteComponent.prototype.onBlur = function () {
             this.onTouched();
+            this.blured.emit();
         };
         /**
          * Function that is called when input field get focus
@@ -1794,6 +1744,7 @@
         };
         KitAutocompleteComponent.prototype.writeValue = function (value) {
             this.onChange(value);
+            this.selectedValue = value;
         };
         KitAutocompleteComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -1809,7 +1760,7 @@
     KitAutocompleteComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-autocomplete',
-                    template: "<div class=\"kit-autocomplete\"\n     [class.autocomplete-empty]=\"!items || !items.length\"\n     [class.autocomplete-disabled]=\"disabled\"\n     [class.autocomplete-loading]=\"loaderVisible\">\n  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               [for]=\"combobox\">\n  </kendo-label>\n  <kendo-combobox  #combobox textField=\"value\" valueField=\"value\"\n                   kendoDropDownFilter\n                   [data]=\"items\"\n                   [placeholder]=\"placeholder\"\n                   [filterable]=\"true\"\n                   [disabled]=\"disabled\"\n                   [clearButton]=\"false\"\n                   [value]=\"defaultValue\"\n                   [allowCustom]=\"true\"\n                   [valueNormalizer]=\"normalizedSelectedValue$\"\n                   [popupSettings]=\"dropdownPopupSettings\"\n                   (focus)=\"onFocus()\"\n                   (blur)=\"onBlur()\"\n                   (selectionChange)=\"onValueSelect($event)\"\n                   (filterChange)=\"onFilterChange($event)\"\n  >\n    <ng-template kendoAutoCompleteNoDataTemplate></ng-template>\n    <ng-template kendoComboBoxHeaderTemplate>\n      <kit-loader *ngIf=\"loaderVisible\" class=\"loader\"></kit-loader>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-item>\n      <span class=\"template\">{{ item.text }}</span>\n    </ng-template>\n  </kendo-combobox>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    template: "<div class=\"kit-autocomplete {{ state }}\"\n     [class.autocomplete-empty]=\"!items || !items.length\"\n     [class.autocomplete-disabled]=\"disabled\"\n     [class.autocomplete-loading]=\"loaderVisible\">\n  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               [for]=\"combobox\">\n  </kendo-label>\n  <div class=\"autocomplete-wrap\">\n    <kendo-combobox  #combobox textField=\"text\" valueField=\"value\"\n                     kendoDropDownFilter\n                     [data]=\"items\"\n                     [placeholder]=\"placeholder\"\n                     [filterable]=\"true\"\n                     [disabled]=\"disabled\"\n                     [clearButton]=\"false\"\n                     [value]=\"selectedValue\"\n                     [allowCustom]=\"true\"\n                     [valueNormalizer]=\"normalizedSelectedValue$\"\n                     [popupSettings]=\"dropdownPopupSettings\"\n                     (focus)=\"onFocus()\"\n                     (blur)=\"onBlur()\"\n                     (selectionChange)=\"onValueSelect($event)\"\n                     (filterChange)=\"onFilterChange($event)\"\n    >\n      <ng-template kendoAutoCompleteNoDataTemplate></ng-template>\n      <ng-template kendoComboBoxHeaderTemplate>\n        <kit-loader *ngIf=\"loaderVisible\" class=\"loader\"></kit-loader>\n      </ng-template>\n      <ng-template kendoComboBoxItemTemplate let-item>\n        <span class=\"template\">{{ getOptionText(item) }}</span>\n      </ng-template>\n    </kendo-combobox>\n    <kit-svg-icon class=\"input-icon\" icon=\"search\"></kit-svg-icon>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [{
@@ -1817,7 +1768,7 @@
                             useExisting: core.forwardRef(function () { return KitAutocompleteComponent; }),
                             multi: true,
                         }],
-                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-autocomplete .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-autocomplete .k-select{display:none}.kit-autocomplete .k-combobox{width:100%}.kit-autocomplete .k-dropdown-wrap{background:#fff;border:1px solid #c1c7d0;border-radius:4px;height:34px}.kit-autocomplete .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-autocomplete .k-input{color:#27282a;font-size:14px;height:100%;padding:0 8px}.kit-autocomplete .k-input::-moz-selection{background:#006890}.kit-autocomplete .k-input::selection{background:#006890}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div,.kit-autocomplete .loader{height:100%}.kit-autocomplete .kit-autocomplete-popup{background-color:#f3f4f6;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px rgba(0,62,86,.5);margin-top:4px;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-item{background-color:#fff;border-radius:2px;box-shadow:none;color:#27282a;font-size:13px;font-weight:500;line-height:1.26;min-height:auto;padding:8px}.kit-autocomplete .kit-autocomplete-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-item:hover{background-color:#f3f5fa;color:#006890}.kit-autocomplete:focus-within .k-dropdown-wrap{border-color:#006890}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{height:200px}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list-scroller,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-nodata{display:none}.kit-autocomplete.autocomplete-disabled .label{color:#74777d}"]
+                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-autocomplete .label{color:#27282a;font-size:13px;font-weight:500;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{align-items:center;display:flex;position:relative}.kit-autocomplete .k-select{display:none}.kit-autocomplete .k-combobox{width:100%}.kit-autocomplete .k-dropdown-wrap{background:#fff;border:1px solid #c1c7d0;border-radius:4px;height:34px}.kit-autocomplete .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-autocomplete .k-input{color:#27282a;font-size:14px;height:100%;padding:0 32px 0 8px}.kit-autocomplete .k-input::-moz-selection{background:#006890}.kit-autocomplete .k-input::selection{background:#006890}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div,.kit-autocomplete .loader{height:100%}.kit-autocomplete .input-icon{fill:#fff;height:16px;position:absolute;right:8px;stroke:#000;width:16px}.kit-autocomplete .kit-autocomplete-popup{background-color:#f3f4f6;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px rgba(0,62,86,.5);margin-top:4px;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-item{background-color:#fff;border-radius:2px;box-shadow:none;color:#27282a;font-size:13px;font-weight:500;line-height:1.26;min-height:auto;padding:8px}.kit-autocomplete .kit-autocomplete-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-item:hover{background-color:#f3f5fa;color:#006890}.kit-autocomplete:focus-within .k-dropdown-wrap{border-color:#006890}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{height:200px}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list-scroller,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-nodata{display:none}.kit-autocomplete.autocomplete-disabled .label{color:#74777d}.kit-autocomplete.danger .k-dropdown-wrap{background:#f8e0e0;border-color:#ef3e42}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}"]
                 },] }
     ];
     KitAutocompleteComponent.ctorParameters = function () { return [
@@ -1827,14 +1778,16 @@
         label: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         items: [{ type: core.Input }],
-        defaultValue: [{ type: core.Input }],
+        selectedValue: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
         loaderVisible: [{ type: core.Input }],
         messageIcon: [{ type: core.Input }],
         messageText: [{ type: core.Input }],
         messageType: [{ type: core.Input }],
+        state: [{ type: core.Input }],
         changed: [{ type: core.Output }],
-        selected: [{ type: core.Output }]
+        selected: [{ type: core.Output }],
+        blured: [{ type: core.Output }]
     };
 
     var KitAutocompleteModule = /** @class */ (function () {
@@ -1856,6 +1809,7 @@
                         kendoAngularInputs.InputsModule,
                         KitInputMessageModule,
                         KitLoaderModule,
+                        KitSvgIconModule,
                     ],
                     exports: [
                         KitAutocompleteComponent,
@@ -1863,6 +1817,110 @@
                 },] }
     ];
 
+    (function (KitCheckboxState) {
+        KitCheckboxState["REGULAR"] = "regular";
+        KitCheckboxState["DANGER"] = "danger";
+    })(exports.KitCheckboxState || (exports.KitCheckboxState = {}));
+    var KitCheckboxComponent = /** @class */ (function () {
+        function KitCheckboxComponent() {
+            /**
+             * States the component is disabled
+             */
+            this.disabled = false;
+            /**
+             * Defines a default value
+             */
+            this.defaultChecked = false;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = exports.KitCheckboxState.REGULAR;
+            /**
+             * Defines a value which going to be an info message type
+             */
+            this.messageType = kitInputMessage_component.KitInputMessageType.DEFAULT;
+            /**
+             * Occurs as soon as input checked state is changed
+             */
+            this.changed = new core.EventEmitter();
+            /**
+             * Function that should be called every time the form control value changes
+             */
+            this.onChange = function (value) {
+            };
+            /**
+             * Function that should be called when input lost focus and changed form control state to "touched"
+             */
+            this.onTouched = function (value) {
+            };
+        }
+        KitCheckboxComponent.prototype.onInputStateChange = function (event) {
+            var target = event.target;
+            var checked = target.checked;
+            this.onChange(checked);
+            this.changed.emit(checked);
+        };
+        KitCheckboxComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        KitCheckboxComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        KitCheckboxComponent.prototype.writeValue = function (value) {
+            this.onChange(value);
+            this.defaultChecked = value;
+        };
+        KitCheckboxComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+        };
+        return KitCheckboxComponent;
+    }());
+    KitCheckboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-checkbox',
+                    template: "<div class=\"kit-checkbox\"\n     [class.disabled]=\"disabled\"\n     [ngClass]=\"state\">\n  <div class=\"display-flex flex-align-items-center\">\n    <input kendoCheckBox #checkbox type=\"checkbox\" class=\"checkbox\"\n           [checked]=\"defaultChecked\"\n           [disabled]=\"disabled\"\n           (change)=\"onInputStateChange($event)\" />\n    <kendo-label class=\"label\" [text]=\"label\"\n                 [for]=\"checkbox\"\n    ></kendo-label>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    providers: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return KitCheckboxComponent; }),
+                            multi: true,
+                        }],
+                    styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-checkbox .label{color:#27282a;font-size:14px;font-weight:400;margin-left:8px}.kit-checkbox .checkbox{border-color:#c1c7d0;border-radius:4px;height:20px;opacity:1;width:20px}.kit-checkbox .checkbox:checked{background:#006890;border-color:#006890}.kit-checkbox .checkbox:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-checkbox .checkbox:hover{border-color:#006890}.kit-checkbox.disabled{pointer-events:none}.kit-checkbox.disabled .label{color:#9a9fa6}.kit-checkbox.disabled .checkbox{background-color:#fff;border-color:#cdd2d9}.kit-checkbox.danger .checkbox{background:#f8e0e0;border-color:#ef3e42}.kit-checkbox.danger .checkbox:before{color:#ef3e42}.kit-checkbox.disabled .checkbox:checked{background-color:#c1c7d0}.kit-checkbox.disabled.danger .checkbox{background-color:#f8e0e0;border-color:#cdd2d9}.kit-checkbox.disabled.danger .checkbox:before{color:#f3f4f6}"]
+                },] }
+    ];
+    KitCheckboxComponent.propDecorators = {
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        defaultChecked: [{ type: core.Input }],
+        state: [{ type: core.Input }],
+        messageIcon: [{ type: core.Input }],
+        messageText: [{ type: core.Input }],
+        messageType: [{ type: core.Input }],
+        changed: [{ type: core.Output }]
+    };
+
+    var KitCheckboxModule = /** @class */ (function () {
+        function KitCheckboxModule() {
+        }
+        return KitCheckboxModule;
+    }());
+    KitCheckboxModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitCheckboxComponent,
+                    ],
+                    exports: [
+                        KitCheckboxComponent,
+                    ],
+                    imports: [
+                        kendoAngularLabel.LabelModule,
+                        kendoAngularInputs.CheckBoxModule,
+                        common.CommonModule,
+                        kitInputMessage_module.KitInputMessageModule,
+                    ],
+                },] }
+    ];
+
     // KitButton
 
     /**
@@ -1873,6 +1931,8 @@
     exports.KitAutocompleteModule = KitAutocompleteModule;
     exports.KitButtonComponent = KitButtonComponent;
     exports.KitButtonModule = KitButtonModule;
+    exports.KitCheckboxComponent = KitCheckboxComponent;
+    exports.KitCheckboxModule = KitCheckboxModule;
     exports.KitCtaPanelComponent = KitCtaPanelComponent;
     exports.KitCtaPanelModule = KitCtaPanelModule;
     exports.KitDatetimepickerComponent = KitDatetimepickerComponent;
@@ -1883,8 +1943,6 @@
     exports.KitEntityCardModule = KitEntityCardModule;
     exports.KitExpandablePanelComponent = KitExpandablePanelComponent;
     exports.KitExpandablePanelModule = KitExpandablePanelModule;
-    exports.KitHeaderComponent = KitHeaderComponent;
-    exports.KitHeaderModule = KitHeaderModule;
     exports.KitInputMessageComponent = KitInputMessageComponent;
     exports.KitInputMessageModule = KitInputMessageModule;
     exports.KitLoaderComponent = KitLoaderComponent;