@klippa/ngx-enhancy-forms 1.0.1 → 2.1.1

package/bundles/klippa-ngx-enhancy-forms.umd.js

@@ -1,9 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('lodash'), require('@ng-select/ng-select'), require('ngx-sortablejs')) :
-    typeof define === 'function' && define.amd ? define('@klippa/ngx-enhancy-forms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'lodash', '@ng-select/ng-select', 'ngx-sortablejs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.klippa = global.klippa || {}, global.klippa["ngx-enhancy-forms"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.lodash, global.ngSelect, global.ngxSortablejs));
-})(this, (function (exports, core, common, forms, lodash, ngSelect, ngxSortablejs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('lodash'), require('ngx-sortablejs'), require('@ng-select/ng-select'), require('@angular/material/core'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/button')) :
+    typeof define === 'function' && define.amd ? define('@klippa/ngx-enhancy-forms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'lodash', 'ngx-sortablejs', '@ng-select/ng-select', '@angular/material/core', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/button'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.klippa = global.klippa || {}, global.klippa["ngx-enhancy-forms"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.lodash, global.ngxSortablejs, global.ngSelect, global.ng.material.core, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.button));
+})(this, (function (exports, core, common, forms, lodash, ngxSortablejs, ngSelect, core$1, datepicker, formField, input, button) { 'use strict';
 
+    var invalidFieldsSymbol = Symbol('Not all fields are valid');
     var FormComponent = /** @class */ (function () {
         function FormComponent() {
             // we keep track of what form controls are actually rendered. Only those count when looking at form validation
@@ -44,25 +45,38 @@
             });
         };
         FormComponent.prototype.disableInactiveFormControl = function (control) {
-            if (this.activeControls.some(function (e) { return e.formControl === control; })) {
-                control.enable();
-            }
-            else {
+            if (!this.activeControls.some(function (e) { return e.formControl === control; })) {
                 control.disable();
             }
         };
         FormComponent.prototype.trySubmit = function () {
             var _a, _b;
             this.formGroup.markAllAsTouched();
+            var originalDisabledStates = Object.values(this.formGroup.controls).map(function (e) {
+                return { control: e, disabled: e.disabled };
+            });
             this.disableInactiveFormGroupControls(this.formGroup);
+            var values = this.formGroup.value;
             if (this.formGroup.valid) {
-                return Promise.resolve(this.formGroup.value);
+                this.setDisabledStatesForAllControls(originalDisabledStates);
+                return Promise.resolve(values);
             }
             else {
                 (_b = (_a = this.activeControls.find(function (e) { return !e.formControl.valid; })) === null || _a === void 0 ? void 0 : _a.formElement) === null || _b === void 0 ? void 0 : _b.scrollTo();
-                return Promise.reject('Not all fields are valid');
+                this.setDisabledStatesForAllControls(originalDisabledStates);
+                return Promise.reject(invalidFieldsSymbol);
             }
         };
+        FormComponent.prototype.setDisabledStatesForAllControls = function (originalDisabledStates) {
+            originalDisabledStates.forEach(function (e) {
+                if (e.disabled) {
+                    e.control.disable();
+                }
+                else {
+                    e.control.enable();
+                }
+            });
+        };
         return FormComponent;
     }());
     FormComponent.decorators = [
@@ -76,14 +90,33 @@
         formGroup: [{ type: core.Input }]
     };
 
+    var FORM_ERROR_MESSAGES = new core.InjectionToken('form.error.messages');
+    var DEFAULT_ERROR_MESSAGES = {
+        min: "Use a number larger than %min%",
+        max: "Use a number smaller than %max%",
+        required: "This field is required",
+        email: "Use a valid email address",
+        minLength: "Has to be longer than %minLength% character(s)",
+        maxLength: "Has to be shorter than %maxLength% character(s)",
+        pattern: "This input is not valid",
+        matchPassword: "Passwords must match",
+        date: "Enter a valid date",
+    };
     var FormElementComponent = /** @class */ (function () {
-        function FormElementComponent(parent) {
+        function FormElementComponent(parent, customMessages) {
             this.parent = parent;
+            this.customMessages = customMessages;
             this.direction = 'horizontal';
             this.captionSpacing = 'percentages';
             this.swapInputAndCaption = false;
+            this.errorMessages = DEFAULT_ERROR_MESSAGES;
             this.customErrorHandlers = [];
         }
+        FormElementComponent.prototype.substituteParameters = function (message, parameters) {
+            return Object.keys(parameters).reduce(function (msg, key) {
+                return msg.replace("%" + key + "%", parameters[key]);
+            }, message);
+        };
         FormElementComponent.prototype.registerControl = function (formControl) {
             this.attachedControl = formControl;
             this.parent.registerControl(formControl, this);
@@ -131,17 +164,22 @@
             // to give some breathing room, we scroll 100px more to the top
             (_a = this.getScrollableParent(this.internalComponentRef.nativeElement)) === null || _a === void 0 ? void 0 : _a.scrollBy(0, -100);
         };
+        FormElementComponent.prototype.getErrorMessages = function (key) {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = this.customMessages) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : this.errorMessages[key];
+        };
         return FormElementComponent;
     }());
     FormElementComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-element',
-                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\n\t\t<div *ngIf=\"showDefaultError('min')\" translate [translateParams]=\"{min: attachedControl.errors.min.min}\">Use a number larger than %min%</div>\n\t\t<div *ngIf=\"showDefaultError('max')\" translate [translateParams]=\"{max: attachedControl.errors.max.max}\">Use a number smaller than %max%</div>\n\t\t<div *ngIf=\"showDefaultError('required')\" translate>This field is required</div>\n\t\t<div *ngIf=\"showDefaultError('email')\" translate>Use a valid email address</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\" translate [translateParams]=\"{minLength: attachedControl.errors.minlength.requiredLength}\">Has to be longer than %minLength% character(s)</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\" translate [translateParams]=\"{maxlength: attachedControl.errors.maxlength.requiredLength}\">Has to be shorter than %maxlength% character(s)</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\" translate>This input is not valid</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\" translate>Passwords must match</div>\n\t\t<div *ngIf=\"showDefaultError('date')\" translate>Enter a valid date</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n<div *ngIf=\"attachedControl\" class=\"componentContainer\" [ngClass]=\"{vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages' }\">\n\t\t<div *ngIf=\"captionRef\" [ngTemplateOutlet]=\"captionRef\"></div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
+                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessages(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessages(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessages(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessages(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessages(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessages(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessages(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessages(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessages(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n<div *ngIf=\"attachedControl\" class=\"componentContainer\" [ngClass]=\"{vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages' }\">\n\t\t<div *ngIf=\"captionRef\" [ngTemplateOutlet]=\"captionRef\"></div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
                     styles: [":host{display:block;margin-top:1.25rem}.componentContainer{align-items:center;display:flex}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block;margin-bottom:1rem}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:0 0 auto}.inputContainer.percentageSpacing{flex:0 0 60%}.errorContainer{color:#ff8000;margin-left:40%}"]
                 },] }
     ];
     FormElementComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Host }, { type: core.Optional }] }
+        { type: FormComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [FORM_ERROR_MESSAGES,] }, { type: core.Optional }] }
     ]; };
     FormElementComponent.propDecorators = {
         caption: [{ type: core.Input }],
@@ -274,6 +312,48 @@
         formControl: [{ type: core.Input }]
     };
 
+    var ButtonComponent = /** @class */ (function () {
+        function ButtonComponent() {
+            this.variant = 'white';
+            this.size = 'medium';
+            this.fullWidth = false;
+            this.hasBorder = true;
+            this.disabled = false;
+            this.isLoading = false;
+            this.type = 'button';
+        }
+        Object.defineProperty(ButtonComponent.prototype, "_", {
+            get: function () {
+                return this.fullWidth;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ButtonComponent.prototype.onClick = function (event) {
+            if (this.disabled) {
+                event.stopPropagation();
+            }
+        };
+        return ButtonComponent;
+    }());
+    ButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-button',
+                    template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n\t[type]=\"type\"\n\t(click)=\"onClick($event)\"\n>\n\t<div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"loadingSpinnerContainer\" *ngIf=\"isLoading\">\n\t\t<klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n\t</div>\n</button>\n",
+                    styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{border:1px solid #e6ecf5;border-radius:5px;color:#888da8;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1px;padding:10px 20px}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.small{padding-bottom:.375rem;padding-top:.375rem}.large{line-height:2}.white{background-color:#fff;border-color:#d4deee;color:#515365;font-weight:500}.white:active,.white:hover{background-color:#edf2f8;border-color:#edf2f8;color:#515365}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{background:none;border:none;color:#27bb5f;padding:0}.greenLink:focus,.greenLink:hover{text-decoration:underline}.contextMenuItem{background-color:#fff;border-color:#fff;color:#888da8}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:active,.contextMenuItem:focus{text-decoration:underline}.redFilled{background-color:#ff3c7e;border-color:#ff3c7e;color:#fff}.redFilled:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#ff236d;border-color:#ff236d}.redOutlined{background-color:#fff;border-color:#ff3c7e;color:#ff3c7e}.redOutlined:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#ff236d;border-color:#ff236d}.orangeFilled{background-color:#ff8000;border-color:#ff8000;color:#fff}.orangeFilled:hover{background-color:#ff8d1a;border-color:#ff8d1a;color:#fff}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}"]
+                },] }
+    ];
+    ButtonComponent.propDecorators = {
+        variant: [{ type: core.Input }],
+        size: [{ type: core.Input }],
+        fullWidth: [{ type: core.Input }],
+        hasBorder: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        isLoading: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        _: [{ type: core.HostBinding, args: ['class._fullWidth',] }]
+    };
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -615,14 +695,16 @@
     var EmailInputComponent = /** @class */ (function (_super) {
         __extends(EmailInputComponent, _super);
         function EmailInputComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.placeholder = '';
+            return _this;
         }
         return EmailInputComponent;
     }(ValueAccessorBase));
     EmailInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-email-input',
-                    template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t(blur)=\"touch()\"\n/>\n",
+                    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/>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }],
                     styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
                 },] }
@@ -631,6 +713,25 @@
         placeholder: [{ type: core.Input }]
     };
 
+    var LoadingIndicatorComponent = /** @class */ (function () {
+        function LoadingIndicatorComponent() {
+            this.variant = '3dots';
+            this.size = 'medium';
+        }
+        return LoadingIndicatorComponent;
+    }());
+    LoadingIndicatorComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-loading-indicator',
+                    template: "<div class=\"threeDots\" [class]=\"size\" *ngIf=\"variant === '3dots'\">\n\t<div></div>\n\t<div></div>\n\t<div></div>\n\t<div></div>\n</div>\n\n<div class=\"spinner\" [class]=\"size\" *ngIf=\"variant === 'spinner'\">\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n\t\t<circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n\t\t<circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n\t</svg>\n</div>\n\n<div class=\"textInput\" *ngIf=\"variant === 'textInput'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n</div>\n\n<div class=\"picker\" *ngIf=\"variant === 'picker'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n\t<div class=\"chevronDown\"></div>\n</div>\n",
+                    styles: [".threeDots,:host{display:block}.threeDots{height:var(--base);position:relative;width:calc(var(--base)*4)}.threeDots.tiny{--base:4px}.threeDots.small{--base:8px}.threeDots.medium{--base:12px}.threeDots.large{--base:18px}.threeDots.huge{--base:26px}.threeDots div{-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0);background:#27bb5f;border-radius:50%;height:var(--base);position:absolute;top:0;width:var(--base)}.threeDots div:first-child{-webkit-animation:lds-ellipsis1 .6s infinite;animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2),.threeDots div:nth-child(3){-webkit-animation:lds-ellipsis2 .6s infinite;animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(var(--base)*1.5)}.threeDots div:nth-child(4){-webkit-animation:lds-ellipsis3 .6s infinite;animation:lds-ellipsis3 .6s infinite;left:calc(var(--base)*3)}@-webkit-keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{height:1rem;width:1rem}.spinner.small svg{height:1.6rem;width:1.6rem}.spinner.medium svg{height:2.5rem;width:2.5rem}.spinner.large svg{height:3rem;width:3rem}.spinner.huge svg{height:4rem;width:4rem}.spinner svg{-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-name:rotate;-moz-animation-timing-function:linear;-moz-transition-property:-moz-transform;-webkit-animation-duration:1.2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:rotate;-webkit-animation-timing-function:linear;-webkit-transition-duration:1.2s;-webkit-transition-property:-webkit-transform;animation-duration:1.2s;animation-iteration-count:infinite;animation-name:rotate;animation-timing-function:linear;transition-property:transform}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.picker{position:relative}.picker .chevronDown{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #888da8;height:0;position:absolute;right:23px;top:18px;width:0}"]
+                },] }
+    ];
+    LoadingIndicatorComponent.propDecorators = {
+        variant: [{ type: core.Input }],
+        size: [{ type: core.Input }]
+    };
+
     var NumberInputComponent = /** @class */ (function (_super) {
         __extends(NumberInputComponent, _super);
         function NumberInputComponent() {
@@ -653,18 +754,23 @@
     var PasswordFieldComponent = /** @class */ (function (_super) {
         __extends(PasswordFieldComponent, _super);
         function PasswordFieldComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.placeholder = 'Password';
+            return _this;
         }
         return PasswordFieldComponent;
     }(ValueAccessorBase));
     PasswordFieldComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'klp-password-field',
-                    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\tplaceholder=\"{{ 'Password' }}\"\n\t(blur)=\"touch()\"\n/>\n<!-- TODO: translate -->\n",
+                    selector: 'klp-form-password-field',
+                    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/>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }],
                     styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
                 },] }
     ];
+    PasswordFieldComponent.propDecorators = {
+        placeholder: [{ type: core.Input }]
+    };
 
     var SelectComponent = /** @class */ (function (_super) {
         __extends(SelectComponent, _super);
@@ -672,17 +778,11 @@
             var _this = _super.call(this, parent, controlContainer) || this;
             _this.parent = parent;
             _this.controlContainer = controlContainer;
+            _this.placeholder = 'Pick an option';
             _this.multiple = false;
             _this.clearable = true;
             return _this;
         }
-        SelectComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-            if (!this.placeholder) {
-                // this.placeholder = this.translate.instant(_('Pick an option'));
-                this.placeholder = ('Pick an option');
-            }
-        };
         return SelectComponent;
     }(ValueAccessorBase));
     SelectComponent.decorators = [
@@ -690,7 +790,7 @@
                     selector: 'klp-form-select',
                     template: "<ng-select\n\t[placeholder]=\"placeholder\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\n\t[dropdownPosition]=\"dropdownPosition\"\n\t[searchFn]=\"customSearchFn\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t{{ item.name }}\n\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t{{ item.description }}\n\t\t</div>\n\t</ng-template>\n</ng-select>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
-                    styles: [":host{display:block}.showErrors ::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-left:7px;padding-right:10px;padding-top:2px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:5px;margin-right:5px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#ff3c7e}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{padding-right:5px;width:25px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #3ed778;box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]
+                    styles: [":host{display:block}.showErrors ::ng-deep .ng-select-container,:host.showErrors ::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-left:7px;padding-right:10px;padding-top:2px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:5px;margin-right:5px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#ff3c7e}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{padding-right:5px;width:25px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #3ed778;box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]
                 },] }
     ];
     SelectComponent.ctorParameters = function () { return [
@@ -859,18 +959,28 @@
                 .trySubmit()
                 .then(function (value) {
                 _this.isLoading = true;
-                _this.submitCallback(value)
-                    .then(function () { return (_this.isLoading = false); })
-                    .catch(function () { return (_this.isLoading = false); });
+                var submitCallbackResult = _this.submitCallback(value);
+                if (isNullOrUndefined(submitCallbackResult)) {
+                    throw new Error('No promise is returned in your submit function.');
+                }
+                return submitCallbackResult.then(function () { return (_this.isLoading = false); }).catch(function (e) {
+                    _this.isLoading = false;
+                    throw e;
+                });
             })
-                .catch(function () { }); // swallow the error, the framework will scroll to the field that needs attention
+                .catch(function (e) {
+                if (e === invalidFieldsSymbol) {
+                    return; // swallow the error, the framework will scroll to the field that needs attention
+                }
+                throw e;
+            });
         };
         return FormSubmitButtonComponent;
     }());
     FormSubmitButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-submit-button',
-                    template: "<klp-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-button>\n",
+                    template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n",
                     styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}"]
                 },] }
     ];
@@ -885,66 +995,133 @@
         _: [{ type: core.HostBinding, args: ['class._fullWidth',] }]
     };
 
-    var ButtonComponent = /** @class */ (function () {
-        function ButtonComponent() {
-            this.variant = 'white';
-            this.size = 'medium';
-            this.fullWidth = false;
-            this.hasBorder = true;
-            this.disabled = false;
-            this.isLoading = false;
-            this.type = 'button';
+    var invalidDateKey = '--invalid_date--';
+    function dateValidator(control) {
+        var invalid = control.value === invalidDateKey;
+        return invalid ? { date: control.value } : null;
+    }
+
+    var KLP_DATE_FORMATS = new core.InjectionToken('klp.form.date.formats');
+    function matDateFormatsFactory(component, dateFormats) {
+        var _a;
+        return (_a = dateFormats === null || dateFormats === void 0 ? void 0 : dateFormats(component.format)) !== null && _a !== void 0 ? _a : core$1.MAT_NATIVE_DATE_FORMATS;
+    }
+    var DatepickerComponent = /** @class */ (function (_super) {
+        __extends(DatepickerComponent, _super);
+        function DatepickerComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.minDate = undefined;
+            _this.maxDate = undefined;
+            _this.placeholder = 'Select date';
+            _this.clearable = false;
+            _this.minDateStartOfDay = undefined;
+            _this.maxDateEndOfDay = undefined;
+            return _this;
         }
-        Object.defineProperty(ButtonComponent.prototype, "_", {
-            get: function () {
-                return this.fullWidth;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ButtonComponent.prototype.onClick = function (event) {
-            if (this.disabled) {
-                event.stopPropagation();
+        DatepickerComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.minDate) {
+                this.setMinDate(changes.minDate.currentValue);
+            }
+            if (changes.maxDate) {
+                this.setMaxDate(changes.maxDate.currentValue);
             }
         };
-        return ButtonComponent;
-    }());
-    ButtonComponent.decorators = [
+        DatepickerComponent.prototype.setMinDate = function (minDate) {
+            if (minDate) {
+                this.minDateStartOfDay = new Date(minDate);
+                this.minDateStartOfDay.setHours(0, 0, 0, 0);
+            }
+            else {
+                this.minDateStartOfDay = undefined;
+            }
+        };
+        DatepickerComponent.prototype.setMaxDate = function (maxDate) {
+            if (maxDate) {
+                this.maxDateEndOfDay = new Date(maxDate);
+                this.maxDateEndOfDay.setHours(23, 59, 59, 999);
+            }
+            else {
+                this.maxDateEndOfDay = undefined;
+            }
+        };
+        // dateChanged is called when the output of the datepicker is changed and
+        // parsed correctly. If the date is invalid, it will be called the first time
+        // with null but never again until a valid input is provided.
+        DatepickerComponent.prototype.dateChanged = function (event) {
+            var nativeInputValue = this.nativeInputRef.nativeElement.value;
+            var date = event.value;
+            if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
+                this.setInnerValueAndNotify(invalidDateKey);
+            }
+            else {
+                this.setInnerValueAndNotify(date);
+            }
+        };
+        DatepickerComponent.prototype.writeValue = function (value) {
+            _super.prototype.writeValue.call(this, value);
+            this.valueForMaterialDatePicker = value === invalidDateKey ? null : value;
+        };
+        // nativeValueChanged is called when the internal text value changes, but not
+        // when the date is changed via the date picker. We need this so that we can
+        // determine if the datepicker is empty or invalid.
+        DatepickerComponent.prototype.nativeValueChanged = function (event) {
+            var nativeInputValue = event.target.value;
+            var date = this.valueForMaterialDatePicker;
+            if (this.datePickerRef.opened) {
+                // if the user is typing instead of using the picker, close it.
+                this.datePickerRef.close();
+            }
+            if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
+                this.setInnerValueAndNotify(invalidDateKey);
+            }
+            else {
+                this.setInnerValueAndNotify(date);
+            }
+        };
+        DatepickerComponent.prototype.resetToNull = function () {
+            this.setInnerValueAndNotify(null);
+            this.valueForMaterialDatePicker = null;
+            this.nativeInputRef.nativeElement.value = null;
+        };
+        return DatepickerComponent;
+    }(ValueAccessorBase));
+    DatepickerComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'klp-button',
-                    template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n\t[type]=\"type\"\n\t(click)=\"onClick($event)\"\n>\n\t<div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"loadingSpinnerContainer\" *ngIf=\"isLoading\">\n\t\t<klp-loading-indicator variant=\"spinner\" size=\"small\"></klp-loading-indicator>\n\t</div>\n</button>\n",
-                    styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{border:1px solid #e6ecf5;border-radius:5px;color:#888da8;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1px;padding:10px 20px}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.small{padding-bottom:.375rem;padding-top:.375rem}.large{line-height:2}.white{background-color:#fff;border-color:#d4deee;color:#515365;font-weight:500}.white:active,.white:hover{background-color:#edf2f8;border-color:#edf2f8;color:#515365}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{background:none;border:none;color:#27bb5f;padding:0}.greenLink:focus,.greenLink:hover{text-decoration:underline}.contextMenuItem{background-color:#fff;border-color:#fff;color:#888da8}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:active,.contextMenuItem:focus{text-decoration:underline}.redFilled{background-color:#ff3c7e;border-color:#ff3c7e;color:#fff}.redFilled:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#ff236d;border-color:#ff236d}.redOutlined{background-color:#fff;border-color:#ff3c7e;color:#ff3c7e}.redOutlined:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#ff236d;border-color:#ff236d}.orangeFilled{background-color:#ff8000;border-color:#ff8000;color:#fff}.orangeFilled:hover{background-color:#ff8d1a;border-color:#ff8d1a;color:#fff}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}"]
+                    selector: 'klp-form-datepicker',
+                    template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<mat-form-field [floatLabel]=\"'never'\">\n\t\t<input\n\t\t\t#nativeInput\n\t\t\tmatInput\n\t\t\t[matDatepicker]=\"picker\"\n\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t(input)=\"nativeValueChanged($event)\"\n\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(click)=\"picker.open()\"\n\t\t\t(blur)=\"touch()\"\n\t\t>\n\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t<mat-datepicker #picker\n\t\t></mat-datepicker>\n\t</mat-form-field>\n\t<button *ngIf=\"clearable\" class=\"clearButton\" (click)=\"resetToNull()\">\u00D7</button>\n</div>\n",
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: DatepickerComponent, multi: true },
+                        { provide: core$1.MAT_DATE_FORMATS,
+                            deps: [DatepickerComponent, [new core.Optional(), KLP_DATE_FORMATS]],
+                            useFactory: matDateFormatsFactory,
+                        }
+                    ],
+                    styles: [":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-label,:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep .mat-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:none}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none}:host ::ng-deep .mat-form-field-suffix{margin-right:.625rem}:host ::ng-deep .mat-form-field-suffix:hover .mat-button-focus-overlay{opacity:.1}:host ::ng-deep .mat-form-field-underline{display:none}.componentContainer{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;display:block;font-size:14px;height:42px;padding:.375rem .625rem;position:relative;transition:all .2s ease-in;width:100%}.componentContainer::-webkit-input-placeholder{color:#adadad}.componentContainer:-moz-placeholder,.componentContainer::-moz-placeholder{color:#adadad}.componentContainer:-ms-input-placeholder{color:#adadad}.componentContainer:focus{border-color:#3ed778;box-shadow:none;outline:0 none}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{background-color:#ffeff4;border-color:#ff3c7e}.componentContainer.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.componentContainer.showErrors{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:none;border:none;bottom:0;color:#7b7b7b;display:flex;font-size:18px;position:absolute;right:1.25rem;top:0}"]
                 },] }
     ];
-    ButtonComponent.propDecorators = {
-        variant: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        fullWidth: [{ type: core.Input }],
-        hasBorder: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        isLoading: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        _: [{ type: core.HostBinding, args: ['class._fullWidth',] }]
+    DatepickerComponent.propDecorators = {
+        minDate: [{ type: core.Input }],
+        maxDate: [{ type: core.Input }],
+        format: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        clearable: [{ type: core.Input }],
+        nativeInputRef: [{ type: core.ViewChild, args: ['nativeInput',] }],
+        datePickerRef: [{ type: core.ViewChild, args: ['picker',] }]
     };
 
-    var LoadingIndicatorComponent = /** @class */ (function () {
-        function LoadingIndicatorComponent() {
-            this.variant = '3dots';
-            this.size = 'medium';
+    // material.module.ts
+    var MaterialModule = /** @class */ (function () {
+        function MaterialModule() {
         }
-        return LoadingIndicatorComponent;
+        return MaterialModule;
     }());
-    LoadingIndicatorComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'klp-loading-indicator',
-                    template: "<div class=\"threeDots\" [class]=\"size\" *ngIf=\"variant === '3dots'\">\n\t<div></div>\n\t<div></div>\n\t<div></div>\n\t<div></div>\n</div>\n\n<div class=\"spinner\" [class]=\"size\" *ngIf=\"variant === 'spinner'\">\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n\t\t<circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n\t\t<circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n\t</svg>\n</div>\n\n<div class=\"textInput\" *ngIf=\"variant === 'textInput'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n</div>\n\n<div class=\"picker\" *ngIf=\"variant === 'picker'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n\t<div class=\"chevronDown\"></div>\n</div>\n",
-                    styles: [".threeDots,:host{display:block}.threeDots{height:var(--base);position:relative;width:calc(var(--base)*4)}.threeDots.tiny{--base:4px}.threeDots.small{--base:8px}.threeDots.medium{--base:12px}.threeDots.large{--base:18px}.threeDots.huge{--base:26px}.threeDots div{-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0);background:#27bb5f;border-radius:50%;height:var(--base);position:absolute;top:0;width:var(--base)}.threeDots div:first-child{-webkit-animation:lds-ellipsis1 .6s infinite;animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2),.threeDots div:nth-child(3){-webkit-animation:lds-ellipsis2 .6s infinite;animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(var(--base)*1.5)}.threeDots div:nth-child(4){-webkit-animation:lds-ellipsis3 .6s infinite;animation:lds-ellipsis3 .6s infinite;left:calc(var(--base)*3)}@-webkit-keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{height:1rem;width:1rem}.spinner.small svg{height:1.6rem;width:1.6rem}.spinner.medium svg{height:2.5rem;width:2.5rem}.spinner.large svg{height:3rem;width:3rem}.spinner.huge svg{height:4rem;width:4rem}.spinner svg{-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-name:rotate;-moz-animation-timing-function:linear;-moz-transition-property:-moz-transform;-webkit-animation-duration:1.2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:rotate;-webkit-animation-timing-function:linear;-webkit-transition-duration:1.2s;-webkit-transition-property:-webkit-transform;animation-duration:1.2s;animation-iteration-count:infinite;animation-name:rotate;animation-timing-function:linear;transition-property:transform}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.picker{position:relative}.picker .chevronDown{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #888da8;height:0;position:absolute;right:23px;top:18px;width:0}"]
+    MaterialModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [datepicker.MatDatepickerModule, formField.MatFormFieldModule, core$1.MatNativeDateModule, input.MatInputModule, button.MatButtonModule],
+                    exports: [datepicker.MatDatepickerModule, formField.MatFormFieldModule, core$1.MatNativeDateModule, input.MatInputModule, button.MatButtonModule],
+                    providers: [datepicker.MatDatepickerModule],
                 },] }
     ];
-    LoadingIndicatorComponent.propDecorators = {
-        variant: [{ type: core.Input }],
-        size: [{ type: core.Input }]
-    };
 
     var NgxEnhancyFormsModule = /** @class */ (function () {
         function NgxEnhancyFormsModule() {
@@ -958,11 +1135,13 @@
                         forms.FormsModule,
                         ngSelect.NgSelectModule,
                         ngxSortablejs.SortablejsModule,
+                        MaterialModule,
                     ],
                     declarations: [
                         ValueAccessorBase,
                         ButtonComponent,
                         CheckboxComponent,
+                        DatepickerComponent,
                         EmailInputComponent,
                         LoadingIndicatorComponent,
                         NumberInputComponent,
@@ -980,6 +1159,7 @@
                     exports: [
                         ValueAccessorBase,
                         ButtonComponent,
+                        DatepickerComponent,
                         CheckboxComponent,
                         EmailInputComponent,
                         LoadingIndicatorComponent,
@@ -1006,23 +1186,32 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.ButtonComponent = ButtonComponent;
+    exports.CheckboxComponent = CheckboxComponent;
+    exports.DEFAULT_ERROR_MESSAGES = DEFAULT_ERROR_MESSAGES;
+    exports.DatepickerComponent = DatepickerComponent;
+    exports.EmailInputComponent = EmailInputComponent;
+    exports.FORM_ERROR_MESSAGES = FORM_ERROR_MESSAGES;
+    exports.FormCaptionComponent = FormCaptionComponent;
+    exports.FormComponent = FormComponent;
+    exports.FormElementComponent = FormElementComponent;
+    exports.FormErrorComponent = FormErrorComponent;
+    exports.FormSubmitButtonComponent = FormSubmitButtonComponent;
+    exports.KLP_DATE_FORMATS = KLP_DATE_FORMATS;
+    exports.LoadingIndicatorComponent = LoadingIndicatorComponent;
     exports.NgxEnhancyFormsModule = NgxEnhancyFormsModule;
-    exports["ɵa"] = ValueAccessorBase;
-    exports["ɵb"] = FormElementComponent;
-    exports["ɵc"] = FormComponent;
-    exports["ɵd"] = ButtonComponent;
-    exports["ɵe"] = CheckboxComponent;
-    exports["ɵf"] = EmailInputComponent;
-    exports["ɵg"] = LoadingIndicatorComponent;
-    exports["ɵh"] = NumberInputComponent;
-    exports["ɵi"] = PasswordFieldComponent;
-    exports["ɵj"] = SelectComponent;
-    exports["ɵk"] = SortableItemsComponent;
-    exports["ɵl"] = TextInputComponent;
-    exports["ɵm"] = ToggleComponent;
-    exports["ɵn"] = FormCaptionComponent;
-    exports["ɵo"] = FormErrorComponent;
-    exports["ɵp"] = FormSubmitButtonComponent;
+    exports.NumberInputComponent = NumberInputComponent;
+    exports.PasswordFieldComponent = PasswordFieldComponent;
+    exports.SelectComponent = SelectComponent;
+    exports.SortableItemsComponent = SortableItemsComponent;
+    exports.TextInputComponent = TextInputComponent;
+    exports.ToggleComponent = ToggleComponent;
+    exports.ValueAccessorBase = ValueAccessorBase;
+    exports.dateValidator = dateValidator;
+    exports.invalidDateKey = invalidDateKey;
+    exports.invalidFieldsSymbol = invalidFieldsSymbol;
+    exports.matDateFormatsFactory = matDateFormatsFactory;
+    exports["ɵa"] = MaterialModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });