@indigina/ui-kit 1.0.41 → 1.0.45

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('@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'), 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', '@angular/forms', '@progress/kendo-angular-inputs', '@progress/kendo-angular-label', '@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.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, global.initials, global.ng.router, global['@progress/kendo-angular-menu'], global['@progress/kendo-angular-layout'], global.rxjs.operators));
-}(this, (function (exports, core, common, kendoAngularButtons, forms, kendoAngularInputs, kendoAngularLabel, kendoAngularDropdowns, animations, kendoAngularDateinputs, rxjs, initials, router, kendoAngularMenu, kendoAngularLayout, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@progress/kendo-angular-buttons'), require('@angular/forms'), require('@progress/kendo-angular-inputs'), require('@progress/kendo-angular-label'), require('rxjs/operators'), 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')) :
+    typeof define === 'function' && define.amd ? define('@indigina/ui-kit', ['exports', '@angular/core', '@angular/common', '@progress/kendo-angular-buttons', '@angular/forms', '@progress/kendo-angular-inputs', '@progress/kendo-angular-label', 'rxjs/operators', '@progress/kendo-angular-dropdowns', '@angular/animations', '@progress/kendo-angular-dateinputs', 'rxjs', 'initials', '@angular/router', '@progress/kendo-angular-menu', '@progress/kendo-angular-layout'], 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.ng.forms, global['@progress/kendo-angular-inputs'], global['@progress/kendo-angular-label'], global.rxjs.operators, 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']));
+}(this, (function (exports, core, common, kendoAngularButtons, forms, kendoAngularInputs, kendoAngularLabel, operators, kendoAngularDropdowns, animations, kendoAngularDateinputs, rxjs, initials, router, kendoAngularMenu, kendoAngularLayout) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -226,10 +226,47 @@
                 },] }
     ];
 
+    (function (KitInputMessageType) {
+        KitInputMessageType["DEFAULT"] = "default";
+        KitInputMessageType["HINT"] = "hint";
+        KitInputMessageType["DANGER"] = "danger";
+        KitInputMessageType["SUCCESS"] = "success";
+    })(exports.KitInputMessageType || (exports.KitInputMessageType = {}));
+    var KitInputMessageComponent = /** @class */ (function () {
+        function KitInputMessageComponent() {
+            /**
+             * Defines a value which going to be an info message text
+             */
+            this.type = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Defines a value which going to be an info message text
+             */
+            this.message = '';
+        }
+        return KitInputMessageComponent;
+    }());
+    KitInputMessageComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-input-message',
+                    template: "<div class=\"kit-input-message kit-input-message-{{type}} display-flex flex-align-items-center\">\n  <kit-svg-icon *ngIf=\"icon\"\n                class=\"message-icon\"\n                [icon]=\"icon\"\n  ></kit-svg-icon>\n  <div class=\"message-text\">{{ message }}</div>\n</div>\n",
+                    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-input-message{margin-top:4px}.kit-input-message .message-icon{height:16px;margin-right:4px;width:16px}.kit-input-message .icon{fill:none}.kit-input-message .message-text{color:#27282a;font-size:13px;font-weight:400}.kit-input-message.kit-input-message-hint .message-text{color:#4d5053}.kit-input-message.kit-input-message-success .message-text{color:#0f8732}"]
+                },] }
+    ];
+    KitInputMessageComponent.propDecorators = {
+        type: [{ type: core.Input }],
+        icon: [{ type: core.Input }],
+        message: [{ type: core.Input }]
+    };
+
     (function (KitSwitchMode) {
         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() {
             /**
@@ -241,6 +278,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 = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = exports.KitSwitchState.REGULAR;
             /**
              * emits when an items has been selected
              */
@@ -284,10 +329,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 = {
@@ -296,9 +341,33 @@
         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 }]
     };
 
+    var KitInputMessageModule = /** @class */ (function () {
+        function KitInputMessageModule() {
+        }
+        return KitInputMessageModule;
+    }());
+    KitInputMessageModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitInputMessageComponent,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        KitSvgIconModule,
+                    ],
+                    exports: [
+                        KitInputMessageComponent,
+                    ],
+                },] }
+    ];
+
     var KitSwitchModule = /** @class */ (function () {
         function KitSwitchModule() {
         }
@@ -317,43 +386,11 @@
                         kendoAngularButtons.ButtonModule,
                         common.CommonModule,
                         KitSvgIconModule,
+                        KitInputMessageModule,
                     ],
                 },] }
     ];
 
-    (function (KitInputMessageType) {
-        KitInputMessageType["DEFAULT"] = "default";
-        KitInputMessageType["HINT"] = "hint";
-        KitInputMessageType["DANGER"] = "danger";
-        KitInputMessageType["SUCCESS"] = "success";
-    })(exports.KitInputMessageType || (exports.KitInputMessageType = {}));
-    var KitInputMessageComponent = /** @class */ (function () {
-        function KitInputMessageComponent() {
-            /**
-             * Defines a value which going to be an info message text
-             */
-            this.type = exports.KitInputMessageType.DEFAULT;
-            /**
-             * Defines a value which going to be an info message text
-             */
-            this.message = '';
-        }
-        return KitInputMessageComponent;
-    }());
-    KitInputMessageComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kit-input-message',
-                    template: "<div class=\"kit-input-message kit-input-message-{{type}} display-flex flex-align-items-center\">\n  <kit-svg-icon *ngIf=\"icon\"\n                class=\"message-icon\"\n                [icon]=\"icon\"\n  ></kit-svg-icon>\n  <div class=\"message-text\">{{ message }}</div>\n</div>\n",
-                    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-input-message{margin-top:4px}.kit-input-message .message-icon{height:16px;margin-right:4px;width:16px}.kit-input-message .icon{fill:none}.kit-input-message .message-text{color:#27282a;font-size:13px;font-weight:400}.kit-input-message.kit-input-message-hint .message-text{color:#4d5053}.kit-input-message.kit-input-message-success .message-text{color:#0f8732}"]
-                },] }
-    ];
-    KitInputMessageComponent.propDecorators = {
-        type: [{ type: core.Input }],
-        icon: [{ type: core.Input }],
-        message: [{ type: core.Input }]
-    };
-
     var KitTextboxComponent = /** @class */ (function () {
         function KitTextboxComponent() {
             /**
@@ -442,26 +479,6 @@
         changed: [{ type: core.Output }]
     };
 
-    var KitInputMessageModule = /** @class */ (function () {
-        function KitInputMessageModule() {
-        }
-        return KitInputMessageModule;
-    }());
-    KitInputMessageModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        KitInputMessageComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        KitSvgIconModule,
-                    ],
-                    exports: [
-                        KitInputMessageComponent,
-                    ],
-                },] }
-    ];
-
     var KitTextboxModule = /** @class */ (function () {
         function KitTextboxModule() {
         }
@@ -595,6 +612,158 @@
                 },] }
     ];
 
+    (function (KitAutocompleteState) {
+        KitAutocompleteState["REGULAR"] = "regular";
+        KitAutocompleteState["DANGER"] = "danger";
+    })(exports.KitAutocompleteState || (exports.KitAutocompleteState = {}));
+    var KitAutocompleteComponent = /** @class */ (function () {
+        function KitAutocompleteComponent(elementRef) {
+            var _this = this;
+            this.elementRef = elementRef;
+            /**
+             * Defines an items list which is going to be an autocomplete items data
+             */
+            this.items = [];
+            /**
+             * Defines whether the loader will be visible or not
+             */
+            this.loaderVisible = false;
+            /**
+             * 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
+             */
+            this.changed = new core.EventEmitter();
+            /**
+             * An action which is emitted once an item in the dropdown is selected
+             */
+            this.selected = new core.EventEmitter();
+            /**
+             * An action which is emitted when input lost focus
+             */
+            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) {
+                _this.selectedValue = content && _this.selectedValue || null;
+                _this.selected.emit(_this.selectedValue);
+                _this.onChange(_this.selectedValue || null);
+                return _this.selectedValue;
+            })); };
+            /**
+             * Settings for popup that will be opened as dropdown options list
+             */
+            this.dropdownPopupSettings = {
+                appendTo: 'component',
+                popupClass: 'kit-autocomplete-popup',
+            };
+            /**
+             * 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 () {
+            };
+        }
+        /**
+         * 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
+         */
+        KitAutocompleteComponent.prototype.onFilterChange = function (value) {
+            this.changed.emit(value);
+        };
+        /**
+         * Function that is called when dropdown list item selected
+         */
+        KitAutocompleteComponent.prototype.onValueSelect = function (item) {
+            if (!item) {
+                return;
+            }
+            this.selectedValue = item;
+            this.selected.emit(this.selectedValue);
+            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
+         */
+        KitAutocompleteComponent.prototype.onFocus = function () {
+            this.elementRef.nativeElement.querySelector('.k-input').select();
+        };
+        KitAutocompleteComponent.prototype.writeValue = function (value) {
+            this.onChange(value);
+            this.selectedValue = value;
+        };
+        KitAutocompleteComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        KitAutocompleteComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        KitAutocompleteComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+        };
+        return KitAutocompleteComponent;
+    }());
+    KitAutocompleteComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-autocomplete',
+                    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: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            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 .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 [
+        { type: core.ElementRef }
+    ]; };
+    KitAutocompleteComponent.propDecorators = {
+        label: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        items: [{ 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 }],
+        blured: [{ type: core.Output }]
+    };
+
+    (function (KitDropdownState) {
+        KitDropdownState["REGULAR"] = "regular";
+        KitDropdownState["DANGER"] = "danger";
+    })(exports.KitDropdownState || (exports.KitDropdownState = {}));
     var KitDropdownComponent = /** @class */ (function () {
         function KitDropdownComponent() {
             /**
@@ -605,6 +774,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;
             /**
              * occurs once an item in the dropdown is selected
              */
@@ -654,7 +827,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: [{
@@ -662,7 +835,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 = {
@@ -673,6 +846,7 @@
         messageIcon: [{ type: core.Input }],
         messageText: [{ type: core.Input }],
         messageType: [{ type: core.Input }],
+        state: [{ type: core.Input }],
         selected: [{ type: core.Output }]
     };
 
@@ -699,6 +873,10 @@
                 },] }
     ];
 
+    (function (KitTextareaState) {
+        KitTextareaState["REGULAR"] = "regular";
+        KitTextareaState["DANGER"] = "danger";
+    })(exports.KitTextareaState || (exports.KitTextareaState = {}));
     var KitTextareaComponent = /** @class */ (function () {
         function KitTextareaComponent() {
             /**
@@ -709,6 +887,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
              */
@@ -782,7 +964,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: [{
@@ -790,7 +972,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 = {
@@ -803,6 +985,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 }]
@@ -862,6 +1045,11 @@
                 },] }
     ];
 
+    var KitTextLabelState;
+    (function (KitTextLabelState) {
+        KitTextLabelState["REGULAR"] = "regular";
+        KitTextLabelState["DANGER"] = "danger";
+    })(KitTextLabelState || (KitTextLabelState = {}));
     var KitTextLabelComponent = /** @class */ (function () {
         function KitTextLabelComponent() {
             /**
@@ -880,16 +1068,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 = {
@@ -898,7 +1090,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 () {
@@ -1061,6 +1254,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() {
             /**
@@ -1091,6 +1289,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
              */
@@ -1152,10 +1354,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 = {
@@ -1178,6 +1380,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 }]
     };
@@ -1304,6 +1507,9 @@
             this.onChange(value);
         };
         KitDatetimepickerComponent.prototype.writeValue = function (value) {
+            if (!value) {
+                return;
+            }
             this.onChange(new Date(value));
             this.defaultDate = new Date(value);
         };
@@ -1584,145 +1790,6 @@
                 },] }
     ];
 
-    var KitAutocompleteComponent = /** @class */ (function () {
-        function KitAutocompleteComponent(elementRef) {
-            var _this = this;
-            this.elementRef = elementRef;
-            /**
-             * Defines an items list which is going to be an autocomplete items data
-             */
-            this.items = [];
-            /**
-             * Defines whether the loader will be visible or not
-             */
-            this.loaderVisible = false;
-            /**
-             * Defines a value which going to be an info message type
-             */
-            this.messageType = exports.KitInputMessageType.DEFAULT;
-            /**
-             * An action which is emitted when input value changed
-             */
-            this.changed = new core.EventEmitter();
-            /**
-             * An action which is emitted once an item in the dropdown is selected
-             */
-            this.selected = new core.EventEmitter();
-            /**
-             * An action which is emitted when input lost focus
-             */
-            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) {
-                _this.selectedValue = content && _this.selectedValue || null;
-                _this.selected.emit(_this.selectedValue);
-                _this.onChange(_this.selectedValue || null);
-                return _this.selectedValue;
-            })); };
-            /**
-             * Settings for popup that will be opened as dropdown options list
-             */
-            this.dropdownPopupSettings = {
-                appendTo: 'component',
-                popupClass: 'kit-autocomplete-popup',
-            };
-            /**
-             * 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 () {
-            };
-        }
-        /**
-         * 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
-         */
-        KitAutocompleteComponent.prototype.onFilterChange = function (value) {
-            this.changed.emit(value);
-        };
-        /**
-         * Function that is called when dropdown list item selected
-         */
-        KitAutocompleteComponent.prototype.onValueSelect = function (item) {
-            if (!item) {
-                return;
-            }
-            this.selectedValue = item;
-            this.selected.emit(this.selectedValue);
-            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
-         */
-        KitAutocompleteComponent.prototype.onFocus = function () {
-            this.elementRef.nativeElement.querySelector('.k-input').select();
-        };
-        KitAutocompleteComponent.prototype.writeValue = function (value) {
-            this.onChange(value);
-            this.selectedValue = value;
-        };
-        KitAutocompleteComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        KitAutocompleteComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        KitAutocompleteComponent.prototype.setDisabledState = function (disabled) {
-            this.disabled = disabled;
-        };
-        return KitAutocompleteComponent;
-    }());
-    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  <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: [{
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            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 .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}"]
-                },] }
-    ];
-    KitAutocompleteComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    KitAutocompleteComponent.propDecorators = {
-        label: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        items: [{ 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 }],
-        changed: [{ type: core.Output }],
-        selected: [{ type: core.Output }],
-        blured: [{ type: core.Output }]
-    };
-
     var KitAutocompleteModule = /** @class */ (function () {
         function KitAutocompleteModule() {
         }
@@ -1768,6 +1835,10 @@
              * 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 = exports.KitInputMessageType.DEFAULT;
             /**
              * Occurs as soon as input checked state is changed
              */
@@ -1807,7 +1878,7 @@
     KitCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'kit-checkbox',
-                    template: "<div class=\"kit-checkbox display-flex flex-align-items-center\"\n     [class.disabled]=\"disabled\"\n     [ngClass]=\"state\">\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",
+                    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,
@@ -1822,6 +1893,9 @@
         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 }]
     };
 
@@ -1842,6 +1916,104 @@
                         kendoAngularLabel.LabelModule,
                         kendoAngularInputs.CheckBoxModule,
                         common.CommonModule,
+                        KitInputMessageModule,
+                    ],
+                },] }
+    ];
+
+    var KitToggleComponent = /** @class */ (function () {
+        function KitToggleComponent() {
+            /**
+             * Defines whether the component will be in disabled state
+             */
+            this.disabled = false;
+            /**
+             * Defines a default value
+             */
+            this.defaultChecked = false;
+            /**
+             * Defines a value which going to be an info message type
+             */
+            this.messageType = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Occurs as soon as toggle 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 () {
+            };
+        }
+        /**
+         * Function that is called when toggle state changed
+         */
+        KitToggleComponent.prototype.onInputStateChange = function (checked) {
+            this.onChange(checked);
+            this.changed.emit(checked);
+        };
+        KitToggleComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        KitToggleComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        KitToggleComponent.prototype.writeValue = function (value) {
+            this.onChange(value);
+            this.defaultChecked = value;
+        };
+        KitToggleComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+        };
+        return KitToggleComponent;
+    }());
+    KitToggleComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-toggle',
+                    template: "<div class=\"kit-toggle\">\n  <div class=\"display-flex flex-align-items-center\">\n    <kendo-switch [checked]=\"defaultChecked\"\n                  [disabled]=\"disabled\"\n                  (valueChange)=\"onInputStateChange($event)\"\n    ></kendo-switch>\n    <kendo-label class=\"label\" [text]=\"label\"></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,
+                    encapsulation: core.ViewEncapsulation.None,
+                    providers: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return KitToggleComponent; }),
+                            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-toggle .label{color:#27282a;font-size:14px;font-weight:400;margin-left:20px}.kit-toggle .k-switch-container{align-items:center;background:#fff;border:2px solid;border-radius:20px;box-shadow:none;display:flex;width:100%}.kit-toggle .k-switch-handle{border:none;height:8px;width:8px}.kit-toggle .k-switch-label-off,.kit-toggle .k-switch-label-on{display:none}.kit-toggle .k-state-focused .k-switch-container{box-shadow:none}.kit-toggle .k-switch-off .k-switch-container{border-color:#c1c7d0}.kit-toggle .k-switch-off .k-switch-handle{background:#c1c7d0;left:2px}.kit-toggle .k-switch-on .k-switch-container{background:#fff;border-color:#006890}.kit-toggle .k-switch-on .k-switch-handle{background:#006890;left:calc(100% - 10px)}.kit-toggle .k-switch{height:16px;width:32px}.kit-toggle .k-switch .k-switch-container:hover{box-shadow:none}.kit-toggle .k-state-disabled{opacity:1}.kit-toggle .k-state-disabled.k-switch-off .k-switch-container{border-color:#e6e9ec}.kit-toggle .k-state-disabled.k-switch-off .k-switch-handle{background:#e6e9ec}.kit-toggle .k-state-disabled.k-switch-on .k-switch-container{border-color:#cce1e9}.kit-toggle .k-state-disabled.k-switch-on .k-switch-handle{background:#cce1e9}"]
+                },] }
+    ];
+    KitToggleComponent.propDecorators = {
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        defaultChecked: [{ type: core.Input }],
+        messageIcon: [{ type: core.Input }],
+        messageText: [{ type: core.Input }],
+        messageType: [{ type: core.Input }],
+        changed: [{ type: core.Output }]
+    };
+
+    var KitToggleModule = /** @class */ (function () {
+        function KitToggleModule() {
+        }
+        return KitToggleModule;
+    }());
+    KitToggleModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitToggleComponent,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        kendoAngularInputs.SwitchModule,
+                        kendoAngularLabel.LabelModule,
+                        KitInputMessageModule,
+                    ],
+                    exports: [
+                        KitToggleComponent,
                     ],
                 },] }
     ];
@@ -1892,6 +2064,8 @@
     exports.KitTextareaModule = KitTextareaModule;
     exports.KitTextboxComponent = KitTextboxComponent;
     exports.KitTextboxModule = KitTextboxModule;
+    exports.KitToggleComponent = KitToggleComponent;
+    exports.KitToggleModule = KitToggleModule;
     exports.KitUnitsTextboxComponent = KitUnitsTextboxComponent;
     exports.KitUnitsTextboxModule = KitUnitsTextboxModule;
     exports.ɵa = KitSvgSpriteComponent;