@klippa/ngx-enhancy-forms 11.4.0 → 11.5.0

package/esm2020/lib/elements/value-accessor-base/value-accessor-base.component.mjs

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Host, Input, Optional, Output } from '@angular/core';
+import { Component, EventEmitter, Host, Input, Optional, Output, ViewChild } from '@angular/core';
 import { isNullOrUndefined, isValueSet, stringIsSetAndFilled } from '../../util/values';
 import { arrayIsSetAndFilled } from '../../util/arrays';
 import * as i0 from "@angular/core";
@@ -26,6 +26,14 @@ export class ValueAccessorBase {
         this.formControl = null;
         this.onTouch = new EventEmitter();
         this.validators = [];
+        this.focus = () => {
+            if (isValueSet(this.nativeInputRef?.nativeElement)) {
+                this.nativeInputRef?.nativeElement?.focus();
+            }
+            else {
+                throw new Error('the focus() method is not implemented in this element!');
+            }
+        };
     }
     ngOnInit() {
         if (this.formControl) {
@@ -115,7 +123,7 @@ export class ValueAccessorBase {
     }
 }
 ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ValueAccessorBase, deps: [{ token: i1.FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ValueAccessorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl" }, outputs: { onTouch: "onTouch" }, ngImport: i0, template: '', isInline: true });
+ValueAccessorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ValueAccessorBase, decorators: [{
             type: Component,
             args: [{
@@ -140,5 +148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], onTouch: [{
                 type: Output
+            }], nativeInputRef: [{
+                type: ViewChild,
+                args: ['nativeInputRef']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtYWNjZXNzb3ItYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy92YWx1ZS1hY2Nlc3Nvci1iYXNlL3ZhbHVlLWFjY2Vzc29yLWJhc2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQXFCLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFeEcsT0FBTyxFQUFDLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxvQkFBb0IsRUFBQyxNQUFNLG1CQUFtQixDQUFDO0FBQ3RGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7O0FBRXhEOzs7Ozs7OztHQVFHO0FBTUgsTUFBTSxPQUFPLGlCQUFpQjtJQWtCN0IsWUFDK0IsTUFBNEIsRUFDNUIsZ0JBQWtDO1FBRGxDLFdBQU0sR0FBTixNQUFNLENBQXNCO1FBQzVCLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFsQjFELFlBQU8sR0FBRyxJQUFJLEtBQUssRUFBc0IsQ0FBQztRQUN6QyxZQUFPLEdBQUcsSUFBSSxLQUFLLEVBQWMsQ0FBQztRQUNsQyxjQUFTLEdBQU0sSUFBSSxDQUFDO1FBRVosYUFBUSxHQUFHLEtBQUssQ0FBQztRQUlqQyw4RUFBOEU7UUFDOUQsb0JBQWUsR0FBVyxJQUFJLENBQUM7UUFDL0IsZ0JBQVcsR0FBdUIsSUFBSSxDQUFDO1FBQ3RDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRzVDLGVBQVUsR0FBa0IsRUFBRSxDQUFDO0lBTXZDLENBQUM7SUFFRCxRQUFRO1FBQ1AsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3JCLElBQUksQ0FBQyxtQkFBbUIs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Q1o7OzBCQW9CRSxJQUFJOzswQkFBSSxRQUFROzswQkFDaEIsSUFBSTs7MEJBQUksUUFBUTs0Q0FkRixRQUFRO3NCQUF2QixLQUFLO2dCQUdHLDJCQUEyQjtzQkFBbkMsS0FBSztnQkFFVSxlQUFlO3NCQUE5QixLQUFLO2dCQUNVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBQ1csT0FBTztzQkFBdkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29udHJvbENvbnRhaW5lciwgQ29udHJvbFZhbHVlQWNjZXNzb3IsIFVudHlwZWRGb3JtQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdCwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBPcHRpb25hbCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUVsZW1lbnRDb21wb25lbnR9IGZyb20gJy4uLy4uL2Zvcm0vZm9ybS1lbGVtZW50L2Zvcm0tZWxlbWVudC5jb21wb25lbnQnO1xuaW1wb3J0IHtpc051bGxPclVuZGVmaW5lZCwgaXNWYWx1ZVNldCwgc3RyaW5nSXNTZXRBbmRGaWxsZWR9IGZyb20gJy4uLy4uL3V0aWwvdmFsdWVzJztcbmltcG9ydCB7IGFycmF5SXNTZXRBbmRGaWxsZWQgfSBmcm9tICcuLi8uLi91dGlsL2FycmF5cyc7XG5cbi8qKlxuICogVGhpcyBjb21wb25lbnQgaXMgYSBiYXNlIGluIG9yZGVyIHRvIGNyZWF0ZSBhIGNvbXBvbmVudCB0aGF0IHN1cHBvcnRzIG5nTW9kZWwuXG4gKiBTb21lIGltcG9ydGFudCB0aGluZ3MgdG8ga25vdyBhYm91dCBpdDpcbiAqXG4gKiBpbm5lclZhbHVlID0geW91ciBvd24gaW5uZXIgc3RhdGUsIHdoaWNoIHlvdSBzaG91bGQgdXNlIHRvIHN0b3JlIHRoZSBjdXJyZW50IHN0YXRlIG9mIHdoYXQgbmdNb2RlbCBzaG91bGQgYmUuXG4gKiB3cml0ZVZhbHVlKCkgPSBjYWxsZWQgYnkgYW5ndWxhciwgd2hlbiBuZ01vZGVsIGlzIGNoYW5nZWQgZnJvbSBPVVRTSURFIG9mIHRoZSBjb21wb25lbnQuIEZlZWwgZnJlZSB0byBwYXRjaCB0aGlzIG1ldGhvZCBpZiB5b3UgbmVlZCBpbm5lciBsb2dpYyB0byBoYXBwZW4gd2hlbiBuZ01vZGVsIGlzIGFsdGVyZWQgZnJvbSB0aGUgb3V0c2lkZS4gQWx3YXlzIHJlbWVtYmVyIHRvIGFsc28gY2FsbCB0aGUgc3VwZXIud3JpdGVWYWx1ZSBpZiB5b3UgZG8hXG4gKiBzZXRJbm5lclZhbHVlQW5kTm90aWZ5KCkgPSBjYWxsIHRoaXMgd2hlbiB5b3Ugd2FudCB5b3VyIG5nTW9kZWwgdG8gYmUgdXBkYXRlZCBmcm9tIElOU0lERSBvZiB5b3VyIGNvbXBvbmVudCwgYW5kIHByb3ZpZGUgaXQgdG8gdGhlIE9VVFNJREUuXG4gKiBuZ09uSW5pdCgpID0gVXNlZCB0byBzdXBwb3J0IHRoZSBhbmd1bGFyIHJlYWN0aXZlIGZvcm1zIGZyYW1ld29yay4gSWYgeW91IHVzZSBuZ09uSW5pdCBpbiB5b3VyIG93biBjb21wb25lbnQgKHdoaWNoIGhhcHBlbnMgZmFpcmx5IG9mdGVuKSB5b3UgbXVzdCBub3QgZm9yZ2V0IHRvIGNhbGwgdGhlIHN1cGVyLm5nT25Jbml0KCkgbWV0aG9kLlxuICovXG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJycsXG5cdHRlbXBsYXRlOiAnJyxcbn0pXG5leHBvcnQgY2xhc3MgVmFsdWVBY2Nlc3NvckJhc2U8VD4gaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25Jbml0LCBPbkRlc3Ryb3kge1xuXHRwdWJsaWMgaW5uZXJWYWx1ZTogVDtcblx0cHVibGljIGNoYW5nZWQgPSBuZXcgQXJyYXk8KHZhbHVlOiBUKSA9PiB2b2lkPigpO1xuXHRwcml2YXRlIHRvdWNoZWQgPSBuZXcgQXJyYXk8KCkgPT4gdm9pZD4oKTtcblx0cHJpdmF0ZSBwcmV2VmFsdWU6IFQgPSBudWxsO1xuXG5cdEBJbnB1dCgpIHB1YmxpYyBkaXNhYmxlZCA9IGZhbHNlO1xuXHQvLyBuZWVkZWQgdG8gcHJldmVudCByYWNlIGNvbmRpdGlvbnNcblx0cHJpdmF0ZSBsYXRlc3RJbm5lclZhbHVlQ2hhbmdlZEludGVyY2VwdG9yUHJvbWlzZTogUHJvbWlzZTx2b2lkPjtcblx0QElucHV0KCkgaW5uZXJWYWx1ZUNoYW5nZUludGVyY2VwdG9yOiAocHJldjogVCwgY3VyOiBUKSA9PiBQcm9taXNlPHZvaWQ+O1xuXHQvLyB3ZSBzdXBwb3J0IGJvdGggcHJvdmlkaW5nIGp1c3QgdGhlIGZvcm1Db250cm9sTmFtZSBhbmQgdGhlIGZ1bGwgZm9ybUNvbnRyb2xcblx0QElucHV0KCkgcHVibGljIGZvcm1Db250cm9sTmFtZTogc3RyaW5nID0gbnVsbDtcblx0QElucHV0KCkgcHVibGljIGZvcm1Db250cm9sOiBVbnR5cGVkRm9ybUNvbnRyb2wgPSBudWxsO1xuXHRAT3V0cHV0KCkgcHVibGljIG9uVG91Y2ggPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cblx0cHJpdmF0ZSBhdHRhY2hlZEZvcm1Db250cm9sOiBVbnR5cGVkRm9ybUNvbnRyb2w7XG5cdHByaXZhdGUgdmFsaWRhdG9yczogQXJyYXk8c3RyaW5nPiA9IFtdO1xuXG5cdGNvbnN0cnVjdG9yKFxuXHRcdEBIb3N0KCkgQE9wdGlvbmFsKCkgcHJvdGVjdGVkIHBhcmVudDogRm9ybUVsZW1lbnRDb21wb25lbnQsXG5cdFx0QEhvc3QoKSBAT3B0aW9uYWwoKSBwcm90ZWN0ZWQgY29udHJvbENvbnRhaW5lcjogQ29udHJvbENvbnRhaW5lclxuXHQpIHtcblx0fVxuXG5cdG5nT25Jbml0KCk6IHZvaWQge1xuXHRcdGlmICh0aGlzLmZvcm1Db250cm9sKSB7XG5cdFx0XHR0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wgPSB0aGlzLmZvcm1Db250cm9sO1xuXHRcdH0gZWxzZSBpZiAoc3RyaW5nSXNTZXRBbmRGaWxsZWQodGhpcy5mb3JtQ29udHJvbE5hbWUpKSB7XG5cdFx0XHR0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wgPSB0aGlzLmNvbnRyb2xDb250YWluZXI/LmNvbnRyb2wuZ2V0KHRoaXMuZm9ybUNvbnRyb2xOYW1lKSBhcyBVbnR5cGVkRm9ybUNvbnRyb2w7XG5cdFx0XHRpZiAoaXNOdWxsT3JVbmRlZmluZWQodGhpcy5hdHRhY2hlZEZvcm1Db250cm9sKSkge1xuXHRcdFx0XHR0aHJvdyBuZXcgRXJyb3IoYEZvcm0gZWxlbWVudCAnJHt0aGlzLmZvcm1Db250cm9sTmFtZX0nIHdpdGggY2FwdGlvbiAnJHt0aGlzLnBhcmVudD8uY2FwdGlvbn0nIGlzIG5vdCBkZWNsYXJlZCBpbiB5b3VyIEZvcm1Hcm91cC5gKTtcblx0XHRcdH1cblx0XHR9XG5cdFx0aWYgKHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbCkge1xuXHRcdFx0dGhpcy5kaXNhYmxlZCA9IHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbC5kaXNhYmxlZDtcblx0XHRcdHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbC5zdGF0dXNDaGFuZ2VzLnN1YnNjcmliZSgoKSA9PiB7XG5cdFx0XHRcdHRoaXMuZGlzYWJsZWQgPSB0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wuZGlzYWJsZWQ7XG5cdFx0XHR9KTtcblx0XHRcdHRoaXMucGFyZW50Py5yZWdpc3RlckNvbnRyb2wodGhpcy5hdHRhY2hlZEZvcm1Db250cm9sLCB0aGlzKTtcblx0XHRcdGlmICh0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2w/LnZhbGlkYXRvcikge1xuXHRcdFx0XHRjb25zdCB2YWxzID0gdGhpcy5hdHRhY2hlZEZvcm1Db250cm9sLnZhbGlkYXRvcih7fSBhcyBhbnkpO1xuXHRcdFx0XHRpZiAoaXNWYWx1ZVNldCh2YWxzKSkge1xuXHRcdFx0XHRcdHRoaXMudmFsaWRhdG9ycyA9IE9iamVjdC5rZXlzKHZhbHMpO1xuXHRcdFx0XHR9IGVsc2Uge1xuXHRcdFx0XHRcdHRoaXMudmFsaWRhdG9ycyA9IFtdO1xuXHRcdFx0XHR9XG5cdFx0XHR9XG5cdFx0fVxuXHR9XG5cblx0aXNJbkVycm9yU3RhdGUoKTogYm9vbGVhbiB7XG5cdFx0cmV0dXJuIHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbCAmJiB0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wuc3RhdHVzID09PSAnSU5WQUxJRCcgJiYgdGhpcy5hdHRhY2hlZEZvcm1Db250cm9sLnRvdWNoZWQ7XG5cdH1cblxuXHRuZ09uRGVzdHJveSgpOiB2b2lkIHtcblx0XHRpZiAodGhpcy5hdHRhY2hlZEZvcm1Db250cm9sKSB7XG5cdFx0XHR0aGlzLnBhcmVudD8udW5yZWdpc3RlckNvbnRyb2wodGhpcy5hdHRhY2hlZEZvcm1Db250cm9sKTtcblx0XHR9XG5cdH1cblxuXHR0b3VjaCgpOiB2b2lkIHtcblx0XHR0aGlzLnRvdWNoZWQuZm9yRWFjaCgoZikgPT4gZigpKTtcblx0fVxuXG5cdHdyaXRlVmFsdWUodmFsdWU6IFQpOiB2b2lkIHtcblx0XHR0aGlzLmlubmVyVmFsdWUgPSB2YWx1ZTtcblx0XHR0aGlzLnByZXZWYWx1ZSA9IHZhbHVlO1xuXHR9XG5cblx0cmVnaXN0ZXJPbkNoYW5nZShmbjogKHZhbHVlOiBUKSA9PiB2b2lkKTogdm9pZCB7XG5cdFx0dGhpcy5jaGFuZ2VkLnB1c2goZm4pO1xuXHR9XG5cblx0cmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcblx0XHR0aGlzLnRvdWNoZWQucHVzaChmbik7XG5cdH1cblxuXHRzZXRJbm5lclZhbHVlQW5kTm90aWZ5KHZhbHVlOiBUKTogdm9pZCB7XG5cdFx0Y29uc3QgYWN0dWFsbHlTZXRWYWx1ZSA9ICh2YWx1ZVRvU2V0OiBUKTogdm9pZCA9PiB7XG5cdFx0XHR0aGlzLmlubmVyVmFsdWUgPSB2YWx1ZVRvU2V0O1xuXHRcdFx0dGhpcy5wcmV2VmFsdWUgPSB2YWx1ZVRvU2V0O1xuXHRcdFx0dGhpcy5jaGFuZ2VkLmZvckVhY2goKGZuKSA9PiBmbih2YWx1ZVRvU2V0KSk7XG5cdFx0fTtcblx0XHRpZiAoaXNWYWx1ZVNldCh0aGlzLmlubmVyVmFsdWVDaGFuZ2VJbnRlcmNlcHRvcikpIHtcblx0XHRcdHRoaXMubGF0ZXN0SW5uZXJWYWx1ZUNoYW5nZWRJbnRlcmNlcHRvclByb21pc2UgPSB0aGlzLmlubmVyVmFsdWVDaGFuZ2VJbnRlcmNlcHRvcih0aGlzLnByZXZWYWx1ZSwgdmFsdWUpO1xuXHRcdFx0Y29uc3QgbXlQcm9taXNlID0gdGhpcy5sYXRlc3RJbm5lclZhbHVlQ2hhbmdlZEludGVyY2VwdG9yUHJvbWlzZTtcblx0XHRcdHRoaXMubGF0ZXN0SW5uZXJWYWx1ZUNoYW5nZWRJbnRlcmNlcHRvclByb21pc2UudGhlbigoKSA9PiB7XG5cdFx0XHRcdGlmICh0aGlzLmxhdGVzdElubmVyVmFsdWVDaGFuZ2VkSW50ZXJjZXB0b3JQcm9taXNlID09PSBteVByb21pc2UpIHtcblx0XHRcdFx0XHRhY3R1YWxseVNldFZhbHVlKHZhbHVlKTtcblx0XHRcdFx0fSBlbHNlIHtcblx0XHRcdFx0XHQvLyBpZ25vcmUgb3V0ZGF0ZWQgcHJvbWlzZXNcblx0XHRcdFx0fVxuXHRcdFx0fSkuY2F0Y2goKCkgPT4ge1xuXHRcdFx0XHRpZiAodGhpcy5sYXRlc3RJbm5lclZhbHVlQ2hhbmdlZEludGVyY2VwdG9yUHJvbWlzZSA9PT0gbXlQcm9taXNlKSB7XG5cdFx0XHRcdFx0YWN0dWFsbHlTZXRWYWx1ZSh0aGlzLnByZXZWYWx1ZSk7XG5cdFx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdFx0Ly8gaWdub3JlIG91dGRhdGVkIHByb21pc2VzXG5cdFx0XHRcdH1cblx0XHRcdH0pO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHRhY3R1YWxseVNldFZhbHVlKHZhbHVlKTtcblx0XHR9XG5cdH1cblxuXHRyZXNldFRvTnVsbCgpOiB2b2lkIHtcblx0XHR0aGlzLnNldElubmVyVmFsdWVBbmROb3RpZnkobnVsbCk7XG5cdH1cblxuXHRoYXNWYWxpZGF0b3IodmFsaWRhdG9yTmFtZTogc3RyaW5nKTogYm9vbGVhbiB7XG5cdFx0aWYgKGFycmF5SXNTZXRBbmRGaWxsZWQodGhpcy52YWxpZGF0b3JzKSkge1xuXHRcdFx0cmV0dXJuIHRoaXMudmFsaWRhdG9ycy5pbmNsdWRlcyh2YWxpZGF0b3JOYW1lKTtcblx0XHR9XG5cdFx0cmV0dXJuIGZhbHNlO1xuXHR9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtYWNjZXNzb3ItYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy92YWx1ZS1hY2Nlc3Nvci1iYXNlL3ZhbHVlLWFjY2Vzc29yLWJhc2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBQyxTQUFTLEVBQWMsWUFBWSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQXFCLFFBQVEsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRS9ILE9BQU8sRUFBQyxpQkFBaUIsRUFBRSxVQUFVLEVBQUUsb0JBQW9CLEVBQUMsTUFBTSxtQkFBbUIsQ0FBQztBQUN0RixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7OztBQUV4RDs7Ozs7Ozs7R0FRRztBQU1ILE1BQU0sT0FBTyxpQkFBaUI7SUFtQjdCLFlBQytCLE1BQTRCLEVBQzVCLGdCQUFrQztRQURsQyxXQUFNLEdBQU4sTUFBTSxDQUFzQjtRQUM1QixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBbkIxRCxZQUFPLEdBQUcsSUFBSSxLQUFLLEVBQXNCLENBQUM7UUFDekMsWUFBTyxHQUFHLElBQUksS0FBSyxFQUFjLENBQUM7UUFDbEMsY0FBUyxHQUFNLElBQUksQ0FBQztRQUVaLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFJakMsOEVBQThFO1FBQzlELG9CQUFlLEdBQVcsSUFBSSxDQUFDO1FBQy9CLGdCQUFXLEdBQXVCLElBQUksQ0FBQztRQUN0QyxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUk1QyxlQUFVLEdBQWtCLEVBQUUsQ0FBQztRQW1HaEMsVUFBSyxHQUFHLEdBQVMsRUFBRTtZQUN6QixJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsY0FBYyxF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VSxDQUFDLEVBQUU7WUFDekMsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMvQztRQUNELE9BQU8sS0FBSyxDQUFDO0lBQ2QsQ0FBQzs7OEdBbEhXLGlCQUFpQjtrR0FBakIsaUJBQWlCLHFXQUZuQixFQUFFOzJGQUVBLGlCQUFpQjtrQkFKN0IsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsRUFBRTtvQkFDWixRQUFRLEVBQUUsRUFBRTtpQkFDWjs7MEJBcUJFLElBQUk7OzBCQUFJLFFBQVE7OzBCQUNoQixJQUFJOzswQkFBSSxRQUFROzRDQWZGLFFBQVE7c0JBQXZCLEtBQUs7Z0JBR0csMkJBQTJCO3NCQUFuQyxLQUFLO2dCQUVVLGVBQWU7c0JBQTlCLEtBQUs7Z0JBQ1UsV0FBVztzQkFBMUIsS0FBSztnQkFDVyxPQUFPO3NCQUF2QixNQUFNO2dCQUNzQixjQUFjO3NCQUExQyxTQUFTO3VCQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29udHJvbENvbnRhaW5lciwgQ29udHJvbFZhbHVlQWNjZXNzb3IsIFVudHlwZWRGb3JtQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdCwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBPcHRpb25hbCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtGb3JtRWxlbWVudENvbXBvbmVudH0gZnJvbSAnLi4vLi4vZm9ybS9mb3JtLWVsZW1lbnQvZm9ybS1lbGVtZW50LmNvbXBvbmVudCc7XG5pbXBvcnQge2lzTnVsbE9yVW5kZWZpbmVkLCBpc1ZhbHVlU2V0LCBzdHJpbmdJc1NldEFuZEZpbGxlZH0gZnJvbSAnLi4vLi4vdXRpbC92YWx1ZXMnO1xuaW1wb3J0IHsgYXJyYXlJc1NldEFuZEZpbGxlZCB9IGZyb20gJy4uLy4uL3V0aWwvYXJyYXlzJztcblxuLyoqXG4gKiBUaGlzIGNvbXBvbmVudCBpcyBhIGJhc2UgaW4gb3JkZXIgdG8gY3JlYXRlIGEgY29tcG9uZW50IHRoYXQgc3VwcG9ydHMgbmdNb2RlbC5cbiAqIFNvbWUgaW1wb3J0YW50IHRoaW5ncyB0byBrbm93IGFib3V0IGl0OlxuICpcbiAqIGlubmVyVmFsdWUgPSB5b3VyIG93biBpbm5lciBzdGF0ZSwgd2hpY2ggeW91IHNob3VsZCB1c2UgdG8gc3RvcmUgdGhlIGN1cnJlbnQgc3RhdGUgb2Ygd2hhdCBuZ01vZGVsIHNob3VsZCBiZS5cbiAqIHdyaXRlVmFsdWUoKSA9IGNhbGxlZCBieSBhbmd1bGFyLCB3aGVuIG5nTW9kZWwgaXMgY2hhbmdlZCBmcm9tIE9VVFNJREUgb2YgdGhlIGNvbXBvbmVudC4gRmVlbCBmcmVlIHRvIHBhdGNoIHRoaXMgbWV0aG9kIGlmIHlvdSBuZWVkIGlubmVyIGxvZ2ljIHRvIGhhcHBlbiB3aGVuIG5nTW9kZWwgaXMgYWx0ZXJlZCBmcm9tIHRoZSBvdXRzaWRlLiBBbHdheXMgcmVtZW1iZXIgdG8gYWxzbyBjYWxsIHRoZSBzdXBlci53cml0ZVZhbHVlIGlmIHlvdSBkbyFcbiAqIHNldElubmVyVmFsdWVBbmROb3RpZnkoKSA9IGNhbGwgdGhpcyB3aGVuIHlvdSB3YW50IHlvdXIgbmdNb2RlbCB0byBiZSB1cGRhdGVkIGZyb20gSU5TSURFIG9mIHlvdXIgY29tcG9uZW50LCBhbmQgcHJvdmlkZSBpdCB0byB0aGUgT1VUU0lERS5cbiAqIG5nT25Jbml0KCkgPSBVc2VkIHRvIHN1cHBvcnQgdGhlIGFuZ3VsYXIgcmVhY3RpdmUgZm9ybXMgZnJhbWV3b3JrLiBJZiB5b3UgdXNlIG5nT25Jbml0IGluIHlvdXIgb3duIGNvbXBvbmVudCAod2hpY2ggaGFwcGVucyBmYWlybHkgb2Z0ZW4pIHlvdSBtdXN0IG5vdCBmb3JnZXQgdG8gY2FsbCB0aGUgc3VwZXIubmdPbkluaXQoKSBtZXRob2QuXG4gKi9cblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnJyxcblx0dGVtcGxhdGU6ICcnLFxufSlcbmV4cG9ydCBjbGFzcyBWYWx1ZUFjY2Vzc29yQmFzZTxUPiBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBPbkluaXQsIE9uRGVzdHJveSB7XG5cdHB1YmxpYyBpbm5lclZhbHVlOiBUO1xuXHRwdWJsaWMgY2hhbmdlZCA9IG5ldyBBcnJheTwodmFsdWU6IFQpID0+IHZvaWQ+KCk7XG5cdHByaXZhdGUgdG91Y2hlZCA9IG5ldyBBcnJheTwoKSA9PiB2b2lkPigpO1xuXHRwcml2YXRlIHByZXZWYWx1ZTogVCA9IG51bGw7XG5cblx0QElucHV0KCkgcHVibGljIGRpc2FibGVkID0gZmFsc2U7XG5cdC8vIG5lZWRlZCB0byBwcmV2ZW50IHJhY2UgY29uZGl0aW9uc1xuXHRwcml2YXRlIGxhdGVzdElubmVyVmFsdWVDaGFuZ2VkSW50ZXJjZXB0b3JQcm9taXNlOiBQcm9taXNlPHZvaWQ+O1xuXHRASW5wdXQoKSBpbm5lclZhbHVlQ2hhbmdlSW50ZXJjZXB0b3I6IChwcmV2OiBULCBjdXI6IFQpID0+IFByb21pc2U8dm9pZD47XG5cdC8vIHdlIHN1cHBvcnQgYm90aCBwcm92aWRpbmcganVzdCB0aGUgZm9ybUNvbnRyb2xOYW1lIGFuZCB0aGUgZnVsbCBmb3JtQ29udHJvbFxuXHRASW5wdXQoKSBwdWJsaWMgZm9ybUNvbnRyb2xOYW1lOiBzdHJpbmcgPSBudWxsO1xuXHRASW5wdXQoKSBwdWJsaWMgZm9ybUNvbnRyb2w6IFVudHlwZWRGb3JtQ29udHJvbCA9IG51bGw7XG5cdEBPdXRwdXQoKSBwdWJsaWMgb25Ub3VjaCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblx0QFZpZXdDaGlsZCgnbmF0aXZlSW5wdXRSZWYnKSBuYXRpdmVJbnB1dFJlZjogRWxlbWVudFJlZjtcblxuXHRwcml2YXRlIGF0dGFjaGVkRm9ybUNvbnRyb2w6IFVudHlwZWRGb3JtQ29udHJvbDtcblx0cHJpdmF0ZSB2YWxpZGF0b3JzOiBBcnJheTxzdHJpbmc+ID0gW107XG5cblx0Y29uc3RydWN0b3IoXG5cdFx0QEhvc3QoKSBAT3B0aW9uYWwoKSBwcm90ZWN0ZWQgcGFyZW50OiBGb3JtRWxlbWVudENvbXBvbmVudCxcblx0XHRASG9zdCgpIEBPcHRpb25hbCgpIHByb3RlY3RlZCBjb250cm9sQ29udGFpbmVyOiBDb250cm9sQ29udGFpbmVyXG5cdCkge1xuXHR9XG5cblx0bmdPbkluaXQoKTogdm9pZCB7XG5cdFx0aWYgKHRoaXMuZm9ybUNvbnRyb2wpIHtcblx0XHRcdHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbCA9IHRoaXMuZm9ybUNvbnRyb2w7XG5cdFx0fSBlbHNlIGlmIChzdHJpbmdJc1NldEFuZEZpbGxlZCh0aGlzLmZvcm1Db250cm9sTmFtZSkpIHtcblx0XHRcdHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbCA9IHRoaXMuY29udHJvbENvbnRhaW5lcj8uY29udHJvbC5nZXQodGhpcy5mb3JtQ29udHJvbE5hbWUpIGFzIFVudHlwZWRGb3JtQ29udHJvbDtcblx0XHRcdGlmIChpc051bGxPclVuZGVmaW5lZCh0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wpKSB7XG5cdFx0XHRcdHRocm93IG5ldyBFcnJvcihgRm9ybSBlbGVtZW50ICcke3RoaXMuZm9ybUNvbnRyb2xOYW1lfScgd2l0aCBjYXB0aW9uICcke3RoaXMucGFyZW50Py5jYXB0aW9ufScgaXMgbm90IGRlY2xhcmVkIGluIHlvdXIgRm9ybUdyb3VwLmApO1xuXHRcdFx0fVxuXHRcdH1cblx0XHRpZiAodGhpcy5hdHRhY2hlZEZvcm1Db250cm9sKSB7XG5cdFx0XHR0aGlzLmRpc2FibGVkID0gdGhpcy5hdHRhY2hlZEZvcm1Db250cm9sLmRpc2FibGVkO1xuXHRcdFx0dGhpcy5hdHRhY2hlZEZvcm1Db250cm9sLnN0YXR1c0NoYW5nZXMuc3Vic2NyaWJlKCgpID0+IHtcblx0XHRcdFx0dGhpcy5kaXNhYmxlZCA9IHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbC5kaXNhYmxlZDtcblx0XHRcdH0pO1xuXHRcdFx0dGhpcy5wYXJlbnQ/LnJlZ2lzdGVyQ29udHJvbCh0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wsIHRoaXMpO1xuXHRcdFx0aWYgKHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbD8udmFsaWRhdG9yKSB7XG5cdFx0XHRcdGNvbnN0IHZhbHMgPSB0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wudmFsaWRhdG9yKHt9IGFzIGFueSk7XG5cdFx0XHRcdGlmIChpc1ZhbHVlU2V0KHZhbHMpKSB7XG5cdFx0XHRcdFx0dGhpcy52YWxpZGF0b3JzID0gT2JqZWN0LmtleXModmFscyk7XG5cdFx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdFx0dGhpcy52YWxpZGF0b3JzID0gW107XG5cdFx0XHRcdH1cblx0XHRcdH1cblx0XHR9XG5cdH1cblxuXHRpc0luRXJyb3JTdGF0ZSgpOiBib29sZWFuIHtcblx0XHRyZXR1cm4gdGhpcy5hdHRhY2hlZEZvcm1Db250cm9sICYmIHRoaXMuYXR0YWNoZWRGb3JtQ29udHJvbC5zdGF0dXMgPT09ICdJTlZBTElEJyAmJiB0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wudG91Y2hlZDtcblx0fVxuXG5cdG5nT25EZXN0cm95KCk6IHZvaWQge1xuXHRcdGlmICh0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wpIHtcblx0XHRcdHRoaXMucGFyZW50Py51bnJlZ2lzdGVyQ29udHJvbCh0aGlzLmF0dGFjaGVkRm9ybUNvbnRyb2wpO1xuXHRcdH1cblx0fVxuXG5cdHRvdWNoKCk6IHZvaWQge1xuXHRcdHRoaXMudG91Y2hlZC5mb3JFYWNoKChmKSA9PiBmKCkpO1xuXHR9XG5cblx0d3JpdGVWYWx1ZSh2YWx1ZTogVCk6IHZvaWQge1xuXHRcdHRoaXMuaW5uZXJWYWx1ZSA9IHZhbHVlO1xuXHRcdHRoaXMucHJldlZhbHVlID0gdmFsdWU7XG5cdH1cblxuXHRyZWdpc3Rlck9uQ2hhbmdlKGZuOiAodmFsdWU6IFQpID0+IHZvaWQpOiB2b2lkIHtcblx0XHR0aGlzLmNoYW5nZWQucHVzaChmbik7XG5cdH1cblxuXHRyZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuXHRcdHRoaXMudG91Y2hlZC5wdXNoKGZuKTtcblx0fVxuXG5cdHNldElubmVyVmFsdWVBbmROb3RpZnkodmFsdWU6IFQpOiB2b2lkIHtcblx0XHRjb25zdCBhY3R1YWxseVNldFZhbHVlID0gKHZhbHVlVG9TZXQ6IFQpOiB2b2lkID0+IHtcblx0XHRcdHRoaXMuaW5uZXJWYWx1ZSA9IHZhbHVlVG9TZXQ7XG5cdFx0XHR0aGlzLnByZXZWYWx1ZSA9IHZhbHVlVG9TZXQ7XG5cdFx0XHR0aGlzLmNoYW5nZWQuZm9yRWFjaCgoZm4pID0+IGZuKHZhbHVlVG9TZXQpKTtcblx0XHR9O1xuXHRcdGlmIChpc1ZhbHVlU2V0KHRoaXMuaW5uZXJWYWx1ZUNoYW5nZUludGVyY2VwdG9yKSkge1xuXHRcdFx0dGhpcy5sYXRlc3RJbm5lclZhbHVlQ2hhbmdlZEludGVyY2VwdG9yUHJvbWlzZSA9IHRoaXMuaW5uZXJWYWx1ZUNoYW5nZUludGVyY2VwdG9yKHRoaXMucHJldlZhbHVlLCB2YWx1ZSk7XG5cdFx0XHRjb25zdCBteVByb21pc2UgPSB0aGlzLmxhdGVzdElubmVyVmFsdWVDaGFuZ2VkSW50ZXJjZXB0b3JQcm9taXNlO1xuXHRcdFx0dGhpcy5sYXRlc3RJbm5lclZhbHVlQ2hhbmdlZEludGVyY2VwdG9yUHJvbWlzZS50aGVuKCgpID0+IHtcblx0XHRcdFx0aWYgKHRoaXMubGF0ZXN0SW5uZXJWYWx1ZUNoYW5nZWRJbnRlcmNlcHRvclByb21pc2UgPT09IG15UHJvbWlzZSkge1xuXHRcdFx0XHRcdGFjdHVhbGx5U2V0VmFsdWUodmFsdWUpO1xuXHRcdFx0XHR9IGVsc2Uge1xuXHRcdFx0XHRcdC8vIGlnbm9yZSBvdXRkYXRlZCBwcm9taXNlc1xuXHRcdFx0XHR9XG5cdFx0XHR9KS5jYXRjaCgoKSA9PiB7XG5cdFx0XHRcdGlmICh0aGlzLmxhdGVzdElubmVyVmFsdWVDaGFuZ2VkSW50ZXJjZXB0b3JQcm9taXNlID09PSBteVByb21pc2UpIHtcblx0XHRcdFx0XHRhY3R1YWxseVNldFZhbHVlKHRoaXMucHJldlZhbHVlKTtcblx0XHRcdFx0fSBlbHNlIHtcblx0XHRcdFx0XHQvLyBpZ25vcmUgb3V0ZGF0ZWQgcHJvbWlzZXNcblx0XHRcdFx0fVxuXHRcdFx0fSk7XG5cdFx0fSBlbHNlIHtcblx0XHRcdGFjdHVhbGx5U2V0VmFsdWUodmFsdWUpO1xuXHRcdH1cblx0fVxuXG5cdHJlc2V0VG9OdWxsKCk6IHZvaWQge1xuXHRcdHRoaXMuc2V0SW5uZXJWYWx1ZUFuZE5vdGlmeShudWxsKTtcblx0fVxuXG5cdGhhc1ZhbGlkYXRvcih2YWxpZGF0b3JOYW1lOiBzdHJpbmcpOiBib29sZWFuIHtcblx0XHRpZiAoYXJyYXlJc1NldEFuZEZpbGxlZCh0aGlzLnZhbGlkYXRvcnMpKSB7XG5cdFx0XHRyZXR1cm4gdGhpcy52YWxpZGF0b3JzLmluY2x1ZGVzKHZhbGlkYXRvck5hbWUpO1xuXHRcdH1cblx0XHRyZXR1cm4gZmFsc2U7XG5cdH1cblxuXHRwdWJsaWMgZm9jdXMgPSAoKTogdm9pZCA9PiB7XG5cdFx0aWYgKGlzVmFsdWVTZXQodGhpcy5uYXRpdmVJbnB1dFJlZj8ubmF0aXZlRWxlbWVudCkpe1xuXHRcdFx0dGhpcy5uYXRpdmVJbnB1dFJlZj8ubmF0aXZlRWxlbWVudD8uZm9jdXMoKTtcblx0XHR9ZWxzZSB7XG5cdFx0XHR0aHJvdyBuZXcgRXJyb3IoJ3RoZSBmb2N1cygpIG1ldGhvZCBpcyBub3QgaW1wbGVtZW50ZWQgaW4gdGhpcyBlbGVtZW50IScpO1xuXHRcdH1cblx0fVxufVxuIl19

package/fesm2015/klippa-ngx-enhancy-forms.mjs

@@ -425,6 +425,15 @@ class ValueAccessorBase {
         this.formControl = null;
         this.onTouch = new EventEmitter();
         this.validators = [];
+        this.focus = () => {
+            var _a, _b, _c;
+            if (isValueSet((_a = this.nativeInputRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                (_c = (_b = this.nativeInputRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+            else {
+                throw new Error('the focus() method is not implemented in this element!');
+            }
+        };
     }
     ngOnInit() {
         var _a, _b, _c, _d;
@@ -516,7 +525,7 @@ class ValueAccessorBase {
     }
 }
 ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ValueAccessorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl" }, outputs: { onTouch: "onTouch" }, ngImport: i0, template: '', isInline: true });
+ValueAccessorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ValueAccessorBase, decorators: [{
             type: Component,
             args: [{
@@ -543,6 +552,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], onTouch: [{
                 type: Output
+            }], nativeInputRef: [{
+                type: ViewChild,
+                args: ['nativeInputRef']
             }] } });
 
 class LoadingIndicatorComponent {
@@ -623,10 +635,10 @@ class CheckboxComponent extends ValueAccessorBase {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CheckboxComponent, selector: "klp-form-checkbox", inputs: { caption: "caption", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t/>\n    <div class=\"checkboxVisual\">\n      <svg *ngIf=\"innerValue === true\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n      </svg>\n\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path d=\"m0.5 2.11665 3.2333 0\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n\t\t\t</svg>\n    </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n", styles: [":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{cursor:pointer;font-weight:700;color:#888da8}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:22px;height:22px;cursor:pointer}.checkboxVisual{pointer-events:none;color:#27bb5f;padding:.125rem;width:22px;height:22px;display:inline-block;border:2px solid #e6ecf5;border-radius:3px;margin-right:10px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CheckboxComponent, selector: "klp-form-checkbox", inputs: { caption: "caption", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t#nativeInputRef\n\t\t/>\n    <div class=\"checkboxVisual\">\n      <svg *ngIf=\"innerValue === true\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n      </svg>\n\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path d=\"m0.5 2.11665 3.2333 0\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n\t\t\t</svg>\n    </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n", styles: [":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{cursor:pointer;font-weight:700;color:#888da8}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:22px;height:22px;cursor:pointer}.checkboxVisual{pointer-events:none;color:#27bb5f;padding:.125rem;width:22px;height:22px;display:inline-block;border:2px solid #e6ecf5;border-radius:3px;margin-right:10px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t/>\n    <div class=\"checkboxVisual\">\n      <svg *ngIf=\"innerValue === true\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n      </svg>\n\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path d=\"m0.5 2.11665 3.2333 0\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n\t\t\t</svg>\n    </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n", styles: [":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{cursor:pointer;font-weight:700;color:#888da8}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:22px;height:22px;cursor:pointer}.checkboxVisual{pointer-events:none;color:#27bb5f;padding:.125rem;width:22px;height:22px;display:inline-block;border:2px solid #e6ecf5;border-radius:3px;margin-right:10px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}\n"] }]
+            args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t#nativeInputRef\n\t\t/>\n    <div class=\"checkboxVisual\">\n      <svg *ngIf=\"innerValue === true\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n      </svg>\n\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path d=\"m0.5 2.11665 3.2333 0\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n\t\t\t</svg>\n    </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n", styles: [":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{cursor:pointer;font-weight:700;color:#888da8}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:22px;height:22px;cursor:pointer}.checkboxVisual{pointer-events:none;color:#27bb5f;padding:.125rem;width:22px;height:22px;display:inline-block;border:2px solid #e6ecf5;border-radius:3px;margin-right:10px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}\n"] }]
         }], propDecorators: { caption: [{
                 type: Input
             }], renderUndefinedAsIndeterminate: [{
@@ -640,10 +652,10 @@ class EmailInputComponent extends ValueAccessorBase {
     }
 }
 EmailInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-EmailInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EmailInputComponent, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+EmailInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EmailInputComponent, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EmailInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
+            args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }] } });
@@ -663,10 +675,10 @@ class NumberInputComponent extends ValueAccessorBase {
     }
 }
 NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NumberInputComponent, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NumberInputComponent, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
+            args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], parseNumber: [{
@@ -680,10 +692,10 @@ class PasswordFieldComponent extends ValueAccessorBase {
     }
 }
 PasswordFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PasswordFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PasswordFieldComponent, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n  [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+PasswordFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PasswordFieldComponent, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n  [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PasswordFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n  [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
+            args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n  [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }] } });
@@ -715,6 +727,9 @@ class SelectComponent extends ValueAccessorBase {
         this.onBlur = new EventEmitter();
         this.onClear = new EventEmitter();
         this.lastItemIndexReached = -1;
+        this.focus = () => {
+            this.ngSelect.focus();
+        };
     }
     ngOnChanges(changes) {
         if (isValueSet(changes.options)) {
@@ -903,10 +918,10 @@ class TextInputComponent extends ValueAccessorBase {
     }
 }
 TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
+            args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], type: [{
@@ -922,10 +937,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 class ToggleComponent extends ValueAccessorBase {
 }
 ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ToggleComponent, selector: "klp-form-toggle", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ToggleComponent, selector: "klp-form-toggle", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
+            args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
         }] });
 
 class FormCaptionComponent {
@@ -1596,7 +1611,7 @@ class FileInputComponent extends MultipleValueAccessorBase {
         }
         this.setInnerValueAndNotify(result);
         // to make sure we can select the same file again
-        this.fileInputEl.nativeElement.value = null;
+        this.nativeInputRef.nativeElement.value = null;
     }
     getFileNames() {
         if (Array.isArray(this.innerValue)) {
@@ -1623,14 +1638,14 @@ class FileInputComponent extends MultipleValueAccessorBase {
         return false;
     }
     uploadFileClicked() {
-        this.fileInputEl.nativeElement.click();
+        this.nativeInputRef.nativeElement.click();
     }
 }
 FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#fileInput\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
+FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#fileInput\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"] }]
+            args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"] }]
         }], propDecorators: { isLoading: [{
                 type: Input
             }], clearable: [{
@@ -1639,9 +1654,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], useFullParentSize: [{
                 type: Input
-            }], fileInputEl: [{
+            }], nativeInputRef: [{
                 type: ViewChild,
-                args: ['fileInput']
+                args: ['nativeInputRef']
             }] } });
 
 class SortableGroupedItemsComponent extends ValueAccessorBase {
@@ -1767,10 +1782,10 @@ class HourMinuteInputComponent extends ValueAccessorBase {
     }
 }
 HourMinuteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HourMinuteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HourMinuteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: HourMinuteInputComponent, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;flex:0 0 auto;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{color:#888da8;text-align:center;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+HourMinuteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: HourMinuteInputComponent, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;flex:0 0 auto;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{color:#888da8;text-align:center;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HourMinuteInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;flex:0 0 auto;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{color:#888da8;text-align:center;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}\n"] }]
+            args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;flex:0 0 auto;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{color:#888da8;text-align:center;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}\n"] }]
         }], propDecorators: { placeholders: [{
                 type: Input
             }] } });