@indigina/ui-kit 1.0.42 → 1.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/bundles/indigina-ui-kit.umd.js +90 -18
  2. package/bundles/indigina-ui-kit.umd.js.map +1 -1
  3. package/bundles/indigina-ui-kit.umd.min.js +1 -1
  4. package/bundles/indigina-ui-kit.umd.min.js.map +1 -1
  5. package/esm2015/lib/components/kit-autocomplete/kit-autocomplete.component.js +13 -3
  6. package/esm2015/lib/components/kit-checkbox/kit-checkbox.component.js +10 -2
  7. package/esm2015/lib/components/kit-checkbox/kit-checkbox.module.js +3 -1
  8. package/esm2015/lib/components/kit-dropdown/kit-dropdown.component.js +14 -3
  9. package/esm2015/lib/components/kit-switch/kit-switch.component.js +21 -3
  10. package/esm2015/lib/components/kit-switch/kit-switch.module.js +3 -1
  11. package/esm2015/lib/components/kit-text-label/kit-text-label.component.js +14 -4
  12. package/esm2015/lib/components/kit-textarea/kit-textarea.component.js +14 -4
  13. package/esm2015/lib/components/kit-units-textbox/kit-units-textbox.component.js +14 -4
  14. package/esm2015/public-api.js +5 -5
  15. package/fesm2015/indigina-ui-kit.js +94 -15
  16. package/fesm2015/indigina-ui-kit.js.map +1 -1
  17. package/indigina-ui-kit.metadata.json +1 -1
  18. package/lib/components/kit-autocomplete/kit-autocomplete.component.d.ts +8 -0
  19. package/lib/components/kit-checkbox/kit-checkbox.component.d.ts +14 -0
  20. package/lib/components/kit-dropdown/kit-dropdown.component.d.ts +9 -0
  21. package/lib/components/kit-switch/kit-switch.component.d.ts +22 -0
  22. package/lib/components/kit-text-label/kit-text-label.component.d.ts +8 -0
  23. package/lib/components/kit-textarea/kit-textarea.component.d.ts +8 -0
  24. package/lib/components/kit-units-textbox/kit-units-textbox.component.d.ts +8 -0
  25. package/package.json +1 -1
  26. package/public-api.d.ts +4 -4
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- 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')) :
3
- 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) :
4
- (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));
5
- }(this, (function (exports, core, common, kendoAngularButtons, forms, kendoAngularInputs, kendoAngularLabel, kendoAngularDropdowns, animations, kendoAngularDateinputs, rxjs, initials, router, kendoAngularMenu, kendoAngularLayout, operators) { 'use strict';
2
+ 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')) :
3
+ 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) :
4
+ (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));
5
+ }(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';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -230,6 +230,10 @@
230
230
  KitSwitchMode["SINGLE"] = "single";
231
231
  KitSwitchMode["MULTI"] = "multiple";
232
232
  })(exports.KitSwitchMode || (exports.KitSwitchMode = {}));
233
+ (function (KitSwitchState) {
234
+ KitSwitchState["REGULAR"] = "regular";
235
+ KitSwitchState["DANGER"] = "danger";
236
+ })(exports.KitSwitchState || (exports.KitSwitchState = {}));
233
237
  var KitSwitchComponent = /** @class */ (function () {
234
238
  function KitSwitchComponent() {
235
239
  /**
@@ -241,6 +245,14 @@
241
245
  * defines whether it will be possible to choose several options at time
242
246
  */
243
247
  this.mode = exports.KitSwitchMode.SINGLE;
248
+ /**
249
+ * Defines a value which going to be an info message type
250
+ */
251
+ this.messageType = kitInputMessage_component.KitInputMessageType.DEFAULT;
252
+ /**
253
+ * Defines a particular state for the component
254
+ */
255
+ this.state = exports.KitSwitchState.REGULAR;
244
256
  /**
245
257
  * emits when an items has been selected
246
258
  */
@@ -284,10 +296,10 @@
284
296
  KitSwitchComponent.decorators = [
285
297
  { type: core.Component, args: [{
286
298
  selector: 'kit-switch',
287
- 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",
299
+ 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",
288
300
  changeDetection: core.ChangeDetectionStrategy.OnPush,
289
301
  encapsulation: core.ViewEncapsulation.None,
290
- 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}"]
302
+ 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}"]
291
303
  },] }
292
304
  ];
293
305
  KitSwitchComponent.propDecorators = {
@@ -296,6 +308,10 @@
296
308
  label: [{ type: core.Input }],
297
309
  disabled: [{ type: core.Input }],
298
310
  selection: [{ type: core.Input }],
311
+ messageIcon: [{ type: core.Input }],
312
+ messageText: [{ type: core.Input }],
313
+ messageType: [{ type: core.Input }],
314
+ state: [{ type: core.Input }],
299
315
  selected: [{ type: core.Output }]
300
316
  };
301
317
 
@@ -317,6 +333,7 @@
317
333
  kendoAngularButtons.ButtonModule,
318
334
  common.CommonModule,
319
335
  KitSvgIconModule,
336
+ kitInputMessage_module.KitInputMessageModule,
320
337
  ],
321
338
  },] }
322
339
  ];
@@ -595,6 +612,10 @@
595
612
  },] }
596
613
  ];
597
614
 
615
+ (function (KitDropdownState) {
616
+ KitDropdownState["REGULAR"] = "regular";
617
+ KitDropdownState["DANGER"] = "danger";
618
+ })(exports.KitDropdownState || (exports.KitDropdownState = {}));
598
619
  var KitDropdownComponent = /** @class */ (function () {
599
620
  function KitDropdownComponent() {
600
621
  /**
@@ -605,6 +626,10 @@
605
626
  * Defines a value which going to be an info message type
606
627
  */
607
628
  this.messageType = exports.KitInputMessageType.DEFAULT;
629
+ /**
630
+ * Defines a particular state for the component
631
+ */
632
+ this.state = kitAutocomplete_component.KitAutocompleteState.REGULAR;
608
633
  /**
609
634
  * occurs once an item in the dropdown is selected
610
635
  */
@@ -654,7 +679,7 @@
654
679
  KitDropdownComponent.decorators = [
655
680
  { type: core.Component, args: [{
656
681
  selector: 'kit-dropdown',
657
- 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",
682
+ 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",
658
683
  changeDetection: core.ChangeDetectionStrategy.OnPush,
659
684
  encapsulation: core.ViewEncapsulation.None,
660
685
  providers: [{
@@ -662,7 +687,7 @@
662
687
  useExisting: core.forwardRef(function () { return KitDropdownComponent; }),
663
688
  multi: true,
664
689
  }],
665
- 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}"]
690
+ 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}"]
666
691
  },] }
667
692
  ];
668
693
  KitDropdownComponent.propDecorators = {
@@ -673,6 +698,7 @@
673
698
  messageIcon: [{ type: core.Input }],
674
699
  messageText: [{ type: core.Input }],
675
700
  messageType: [{ type: core.Input }],
701
+ state: [{ type: core.Input }],
676
702
  selected: [{ type: core.Output }]
677
703
  };
678
704
 
@@ -699,6 +725,10 @@
699
725
  },] }
700
726
  ];
701
727
 
728
+ (function (KitTextareaState) {
729
+ KitTextareaState["REGULAR"] = "regular";
730
+ KitTextareaState["DANGER"] = "danger";
731
+ })(exports.KitTextareaState || (exports.KitTextareaState = {}));
702
732
  var KitTextareaComponent = /** @class */ (function () {
703
733
  function KitTextareaComponent() {
704
734
  /**
@@ -709,6 +739,10 @@
709
739
  * Defines a state whether the textarea will be disabled or not
710
740
  */
711
741
  this.disabled = false;
742
+ /**
743
+ * Defines a particular state for the component
744
+ */
745
+ this.state = exports.KitTextareaState.REGULAR;
712
746
  /**
713
747
  * An action which is emitted when textarea field received focus
714
748
  */
@@ -782,7 +816,7 @@
782
816
  KitTextareaComponent.decorators = [
783
817
  { type: core.Component, args: [{
784
818
  selector: 'kit-textarea',
785
- 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",
819
+ 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",
786
820
  changeDetection: core.ChangeDetectionStrategy.OnPush,
787
821
  encapsulation: core.ViewEncapsulation.None,
788
822
  providers: [{
@@ -790,7 +824,7 @@
790
824
  useExisting: core.forwardRef(function () { return KitTextareaComponent; }),
791
825
  multi: true,
792
826
  }],
793
- 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}"]
827
+ 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}"]
794
828
  },] }
795
829
  ];
796
830
  KitTextareaComponent.propDecorators = {
@@ -803,6 +837,7 @@
803
837
  disabled: [{ type: core.Input }],
804
838
  messageIcon: [{ type: core.Input }],
805
839
  messageText: [{ type: core.Input }],
840
+ state: [{ type: core.Input }],
806
841
  focused: [{ type: core.Output }],
807
842
  blured: [{ type: core.Output }],
808
843
  changed: [{ type: core.Output }]
@@ -862,6 +897,11 @@
862
897
  },] }
863
898
  ];
864
899
 
900
+ var KitTextLabelState;
901
+ (function (KitTextLabelState) {
902
+ KitTextLabelState["REGULAR"] = "regular";
903
+ KitTextLabelState["DANGER"] = "danger";
904
+ })(KitTextLabelState || (KitTextLabelState = {}));
865
905
  var KitTextLabelComponent = /** @class */ (function () {
866
906
  function KitTextLabelComponent() {
867
907
  /**
@@ -880,16 +920,20 @@
880
920
  * Defines a value which going to be an info message type
881
921
  */
882
922
  this.messageType = exports.KitInputMessageType.HINT;
923
+ /**
924
+ * Defines a particular state for the component
925
+ */
926
+ this.state = KitTextLabelState.REGULAR;
883
927
  }
884
928
  return KitTextLabelComponent;
885
929
  }());
886
930
  KitTextLabelComponent.decorators = [
887
931
  { type: core.Component, args: [{
888
932
  selector: 'kit-text-label',
889
- 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",
933
+ 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",
890
934
  changeDetection: core.ChangeDetectionStrategy.OnPush,
891
935
  encapsulation: core.ViewEncapsulation.None,
892
- 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}"]
936
+ 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}"]
893
937
  },] }
894
938
  ];
895
939
  KitTextLabelComponent.propDecorators = {
@@ -898,7 +942,8 @@
898
942
  htmlMode: [{ type: core.Input }],
899
943
  noValueMessage: [{ type: core.Input }],
900
944
  messageText: [{ type: core.Input }],
901
- messageType: [{ type: core.Input }]
945
+ messageType: [{ type: core.Input }],
946
+ state: [{ type: core.Input }]
902
947
  };
903
948
 
904
949
  var KitTextLabelModule = /** @class */ (function () {
@@ -1061,6 +1106,11 @@
1061
1106
  KitUnitsTextboxType["TEXT"] = "text";
1062
1107
  KitUnitsTextboxType["NUMBER"] = "number";
1063
1108
  })(exports.KitUnitsTextboxType || (exports.KitUnitsTextboxType = {}));
1109
+ var KitUnitsTextboxState;
1110
+ (function (KitUnitsTextboxState) {
1111
+ KitUnitsTextboxState["REGULAR"] = "regular";
1112
+ KitUnitsTextboxState["DANGER"] = "danger";
1113
+ })(KitUnitsTextboxState || (KitUnitsTextboxState = {}));
1064
1114
  var KitUnitsTextboxComponent = /** @class */ (function () {
1065
1115
  function KitUnitsTextboxComponent() {
1066
1116
  /**
@@ -1091,6 +1141,10 @@
1091
1141
  * Defines a value which used to set type ot he textbox field
1092
1142
  */
1093
1143
  this.textboxType = exports.KitUnitsTextboxType.TEXT;
1144
+ /**
1145
+ * Defines a particular state for the component
1146
+ */
1147
+ this.state = KitUnitsTextboxState.REGULAR;
1094
1148
  /**
1095
1149
  * Occurs once an item in the dropdown is selected
1096
1150
  */
@@ -1152,10 +1206,10 @@
1152
1206
  KitUnitsTextboxComponent.decorators = [
1153
1207
  { type: core.Component, args: [{
1154
1208
  selector: 'kit-units-textbox',
1155
- 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",
1209
+ 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",
1156
1210
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1157
1211
  encapsulation: core.ViewEncapsulation.None,
1158
- 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}"]
1212
+ 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}"]
1159
1213
  },] }
1160
1214
  ];
1161
1215
  KitUnitsTextboxComponent.propDecorators = {
@@ -1178,6 +1232,7 @@
1178
1232
  max: [{ type: core.Input }],
1179
1233
  maxlength: [{ type: core.Input }],
1180
1234
  format: [{ type: core.Input }],
1235
+ state: [{ type: core.Input }],
1181
1236
  selected: [{ type: core.Output }],
1182
1237
  changed: [{ type: core.Output }]
1183
1238
  };
@@ -1587,6 +1642,10 @@
1587
1642
  },] }
1588
1643
  ];
1589
1644
 
1645
+ (function (KitAutocompleteState) {
1646
+ KitAutocompleteState["REGULAR"] = "regular";
1647
+ KitAutocompleteState["DANGER"] = "danger";
1648
+ })(exports.KitAutocompleteState || (exports.KitAutocompleteState = {}));
1590
1649
  var KitAutocompleteComponent = /** @class */ (function () {
1591
1650
  function KitAutocompleteComponent(elementRef) {
1592
1651
  var _this = this;
@@ -1603,6 +1662,10 @@
1603
1662
  * Defines a value which going to be an info message type
1604
1663
  */
1605
1664
  this.messageType = exports.KitInputMessageType.DEFAULT;
1665
+ /**
1666
+ * Defines a particular state for the component
1667
+ */
1668
+ this.state = exports.KitAutocompleteState.REGULAR;
1606
1669
  /**
1607
1670
  * An action which is emitted when input value changed
1608
1671
  */
@@ -1697,7 +1760,7 @@
1697
1760
  KitAutocompleteComponent.decorators = [
1698
1761
  { type: core.Component, args: [{
1699
1762
  selector: 'kit-autocomplete',
1700
- 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",
1763
+ 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",
1701
1764
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1702
1765
  encapsulation: core.ViewEncapsulation.None,
1703
1766
  providers: [{
@@ -1705,7 +1768,7 @@
1705
1768
  useExisting: core.forwardRef(function () { return KitAutocompleteComponent; }),
1706
1769
  multi: true,
1707
1770
  }],
1708
- 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}"]
1771
+ 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}"]
1709
1772
  },] }
1710
1773
  ];
1711
1774
  KitAutocompleteComponent.ctorParameters = function () { return [
@@ -1721,6 +1784,7 @@
1721
1784
  messageIcon: [{ type: core.Input }],
1722
1785
  messageText: [{ type: core.Input }],
1723
1786
  messageType: [{ type: core.Input }],
1787
+ state: [{ type: core.Input }],
1724
1788
  changed: [{ type: core.Output }],
1725
1789
  selected: [{ type: core.Output }],
1726
1790
  blured: [{ type: core.Output }]
@@ -1771,6 +1835,10 @@
1771
1835
  * Defines a particular state for the component
1772
1836
  */
1773
1837
  this.state = exports.KitCheckboxState.REGULAR;
1838
+ /**
1839
+ * Defines a value which going to be an info message type
1840
+ */
1841
+ this.messageType = kitInputMessage_component.KitInputMessageType.DEFAULT;
1774
1842
  /**
1775
1843
  * Occurs as soon as input checked state is changed
1776
1844
  */
@@ -1810,7 +1878,7 @@
1810
1878
  KitCheckboxComponent.decorators = [
1811
1879
  { type: core.Component, args: [{
1812
1880
  selector: 'kit-checkbox',
1813
- 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",
1881
+ 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",
1814
1882
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1815
1883
  providers: [{
1816
1884
  provide: forms.NG_VALUE_ACCESSOR,
@@ -1825,6 +1893,9 @@
1825
1893
  disabled: [{ type: core.Input }],
1826
1894
  defaultChecked: [{ type: core.Input }],
1827
1895
  state: [{ type: core.Input }],
1896
+ messageIcon: [{ type: core.Input }],
1897
+ messageText: [{ type: core.Input }],
1898
+ messageType: [{ type: core.Input }],
1828
1899
  changed: [{ type: core.Output }]
1829
1900
  };
1830
1901
 
@@ -1845,6 +1916,7 @@
1845
1916
  kendoAngularLabel.LabelModule,
1846
1917
  kendoAngularInputs.CheckBoxModule,
1847
1918
  common.CommonModule,
1919
+ kitInputMessage_module.KitInputMessageModule,
1848
1920
  ],
1849
1921
  },] }
1850
1922
  ];