@klippa/ngx-enhancy-forms 2.0.0 → 2.3.0

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

@@ -4,431 +4,95 @@
     (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 FormComponent = /** @class */ (function () {
-        function FormComponent() {
-            // we keep track of what form controls are actually rendered. Only those count when looking at form validation
-            this.activeControls = [];
-        }
-        FormComponent.prototype.registerControl = function (formControl, formElement) {
-            this.activeControls.push({ formControl: formControl, formElement: formElement });
-        };
-        FormComponent.prototype.unregisterControl = function (formControl) {
-            this.activeControls = this.activeControls.filter(function (e) { return e.formControl !== formControl; });
-        };
-        FormComponent.prototype.disableInactiveFormGroupControls = function (formGroup) {
-            var _this = this;
-            Object.values(formGroup.controls).forEach(function (value) {
-                if (value instanceof forms.FormGroup) {
-                    _this.disableInactiveFormGroupControls(value);
-                }
-                else if (value instanceof forms.FormArray) {
-                    _this.disableInactiveFormArrayControls(value);
-                }
-                else if (value instanceof forms.FormControl) {
-                    _this.disableInactiveFormControl(value);
-                }
-            });
-        };
-        FormComponent.prototype.disableInactiveFormArrayControls = function (formArray) {
-            var _this = this;
-            formArray.controls.forEach(function (value) {
-                if (value instanceof forms.FormGroup) {
-                    _this.disableInactiveFormGroupControls(value);
-                }
-                else if (value instanceof forms.FormArray) {
-                    _this.disableInactiveFormArrayControls(value);
-                }
-                else if (value instanceof forms.FormControl) {
-                    _this.disableInactiveFormControl(value);
-                }
-            });
-        };
-        FormComponent.prototype.disableInactiveFormControl = function (control) {
-            if (this.activeControls.some(function (e) { return e.formControl === control; })) {
-                control.enable();
-            }
-            else {
-                control.disable();
-            }
-        };
-        FormComponent.prototype.trySubmit = function () {
-            var _a, _b;
-            this.formGroup.markAllAsTouched();
-            this.disableInactiveFormGroupControls(this.formGroup);
-            if (this.formGroup.valid) {
-                return Promise.resolve(this.formGroup.value);
-            }
-            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');
-            }
-        };
-        return FormComponent;
-    }());
-    FormComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'klp-form',
-                    template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n",
-                    styles: [":host{display:block}:host.row{display:flex}"]
-                },] }
-    ];
-    FormComponent.propDecorators = {
-        formGroup: [{ type: core.Input }]
-    };
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
 
-    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",
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    var FormElementComponent = /** @class */ (function () {
-        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);
-        };
-        FormElementComponent.prototype.unregisterControl = function (formControl) {
-            this.attachedControl = null;
-            this.parent.unregisterControl(formControl);
-        };
-        FormElementComponent.prototype.getAttachedControl = function () {
-            return this.attachedControl;
-        };
-        FormElementComponent.prototype.registerErrorHandler = function (error, templateRef) {
-            this.customErrorHandlers.push({ error: error, templateRef: templateRef });
-        };
-        FormElementComponent.prototype.registerCaption = function (templateRef) {
-            this.captionRef = templateRef;
-        };
-        FormElementComponent.prototype.getErrorToShow = function () {
-            var _a, _b, _c;
-            if (((_a = this.attachedControl) === null || _a === void 0 ? void 0 : _a.touched) === true && ((_b = this.attachedControl) === null || _b === void 0 ? void 0 : _b.errors)) {
-                return Object.keys((_c = this.attachedControl) === null || _c === void 0 ? void 0 : _c.errors)[0];
-            }
-            return null;
-        };
-        FormElementComponent.prototype.getCustomErrorHandler = function (error) {
-            return this.customErrorHandlers.find(function (e) { return e.error === error; });
-        };
-        FormElementComponent.prototype.showDefaultError = function (error) {
-            return this.getErrorToShow() === error && !this.customErrorHandlers.some(function (e) { return e.error === error; });
-        };
-        FormElementComponent.prototype.getScrollableParent = function (node) {
-            if (node == null) {
-                return null;
-            }
-            if (node.scrollHeight > node.clientHeight) {
-                return node;
-            }
-            else {
-                return this.getScrollableParent(node.parentNode);
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
             }
+            return t;
         };
-        FormElementComponent.prototype.scrollTo = function () {
-            var _a;
-            this.internalComponentRef.nativeElement.scrollIntoView(true);
-            // 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')\">{{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: undefined, decorators: [{ type: core.Inject, args: [FORM_ERROR_MESSAGES,] }, { type: core.Optional }] }
-    ]; };
-    FormElementComponent.propDecorators = {
-        caption: [{ type: core.Input }],
-        direction: [{ type: core.Input }],
-        captionSpacing: [{ type: core.Input }],
-        swapInputAndCaption: [{ type: core.Input }],
-        internalComponentRef: [{ type: core.ViewChild, args: ['internalComponentRef',] }]
+        return __assign.apply(this, arguments);
     };
-
-    function stringIsSetAndNotEmpty(s) {
-        return lodash.isString(s) && s.length > 0;
-    }
-    function isNullOrUndefined(value) {
-        return value === null || value === undefined;
-    }
-    function numberIsSet(value) {
-        return isValueSet(value) && typeof value === 'number';
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
     }
-    function isValueSet(value) {
-        return value !== null && value !== undefined;
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
-    function stringOrArrayIsSetAndEmpty(value) {
-        return value !== null && value !== undefined && value.length === 0;
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
     }
-    function useIfStringIsSet(s) {
-        if (stringIsSetAndNotEmpty(s)) {
-            return s;
-        }
-        return undefined;
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
     }
-    function useIfArrayIsSetWithOneItem(a) {
-        if (!isNullOrUndefined(a) && a.length === 1) {
-            return a[0];
-        }
-        return undefined;
-    }
-    function convertParentToChild(originalClass, newClass) {
-        return Object.assign(newClass, originalClass);
-    }
-    function truncateString(s, length) {
-        if (s.length < length) {
-            return s;
-        }
-        return s.substring(0, length) + '...';
-    }
-
-    /**
-     * This component is a base in order to create a component that supports ngModel.
-     * Some important things to know about it:
-     *
-     * innerValue = your own inner state, which you should use to store the current state of what ngModel should be.
-     * writeValue() = called by angular, when ngModel is changed from OUTSIDE of the component. Feel free to patch this method if you need inner logic to happen when ngModel is altered from the outside. Always remember to also call the super.writeValue if you do!
-     * setInnerValueAndNotify() = call this when you want your ngModel to be updated from INSIDE of your component, and provide it to the OUTSIDE.
-     * ngOnInit() = Used to support the angular reactive forms framework. If you use ngOnInit in your own component (which happens fairly often) you must not forget to call the super.ngOnInit() method.
-     */
-    var ValueAccessorBase = /** @class */ (function () {
-        function ValueAccessorBase(parent, controlContainer) {
-            this.parent = parent;
-            this.controlContainer = controlContainer;
-            this.changed = new Array();
-            this.touched = new Array();
-            this.disabled = false;
-            // we support both providing just the formControlName and the full formControl
-            this.formControlName = null;
-            this.formControl = null;
-        }
-        ValueAccessorBase.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a, _b, _c;
-            if (this.formControl) {
-                this.attachedFormControl = this.formControl;
-            }
-            else if (stringIsSetAndNotEmpty(this.formControlName)) {
-                this.attachedFormControl = (_a = this.controlContainer) === null || _a === void 0 ? void 0 : _a.control.get(this.formControlName);
-                if (isNullOrUndefined(this.attachedFormControl)) {
-                    throw new Error("Form element '" + this.formControlName + "' with caption '" + ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.caption) + "' is not declared in your FormGroup.");
-                }
-            }
-            if (this.attachedFormControl) {
-                this.disabled = this.attachedFormControl.disabled;
-                this.attachedFormControl.statusChanges.subscribe(function () {
-                    _this.disabled = _this.attachedFormControl.disabled;
-                });
-                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl);
-            }
-        };
-        ValueAccessorBase.prototype.isInErrorState = function () {
-            return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
-        };
-        ValueAccessorBase.prototype.ngOnDestroy = function () {
-            var _a;
-            if (this.attachedFormControl) {
-                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.unregisterControl(this.attachedFormControl);
-            }
-        };
-        ValueAccessorBase.prototype.touch = function () {
-            this.touched.forEach(function (f) { return f(); });
-        };
-        ValueAccessorBase.prototype.writeValue = function (value) {
-            this.innerValue = value;
-        };
-        ValueAccessorBase.prototype.registerOnChange = function (fn) {
-            this.changed.push(fn);
-        };
-        ValueAccessorBase.prototype.registerOnTouched = function (fn) {
-            this.touched.push(fn);
-        };
-        ValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
-            this.innerValue = value;
-            this.changed.forEach(function (fn) { return fn(value); });
-        };
-        ValueAccessorBase.prototype.resetToNull = function () {
-            this.setInnerValueAndNotify(null);
-        };
-        return ValueAccessorBase;
-    }());
-    ValueAccessorBase.decorators = [
-        { type: core.Component, args: [{
-                    selector: '',
-                    template: ''
-                },] }
-    ];
-    ValueAccessorBase.ctorParameters = function () { return [
-        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] }
-    ]; };
-    ValueAccessorBase.propDecorators = {
-        disabled: [{ type: core.Input }],
-        formControlName: [{ type: core.Input }],
-        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.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
     }
     function __generator(thisArg, body) {
         var _ = { label: 0, sent: function () { if (t[0] & 1)
@@ -539,124 +203,520 @@
         catch (error) {
             e = { error: error };
         }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    function stringIsSetAndNotEmpty(s) {
+        return lodash.isString(s) && s.length > 0;
+    }
+    function isNullOrUndefined(value) {
+        return value === null || value === undefined;
+    }
+    function numberIsSet(value) {
+        return isValueSet(value) && typeof value === 'number';
+    }
+    function isValueSet(value) {
+        return value !== null && value !== undefined;
+    }
+    function stringOrArrayIsSetAndEmpty(value) {
+        return value !== null && value !== undefined && value.length === 0;
+    }
+    function useIfStringIsSet(s) {
+        if (stringIsSetAndNotEmpty(s)) {
+            return s;
+        }
+        return undefined;
+    }
+    function useIfArrayIsSetWithOneItem(a) {
+        if (!isNullOrUndefined(a) && a.length === 1) {
+            return a[0];
+        }
+        return undefined;
+    }
+    function convertParentToChild(originalClass, newClass) {
+        return Object.assign(newClass, originalClass);
+    }
+    function truncateString(s, length) {
+        if (s.length < length) {
+            return s;
+        }
+        return s.substring(0, length) + '...';
+    }
+
+    var invalidFieldsSymbol = Symbol('Not all fields are valid');
+    // Only used as a 'marker' to define a property will be filled in by a sub form
+    var SubForm = /** @class */ (function (_super) {
+        __extends(SubForm, _super);
+        function SubForm() {
+            return _super.call(this, {}, null) || this;
+        }
+        return SubForm;
+    }(forms.FormGroup));
+    var FormComponent = /** @class */ (function () {
+        function FormComponent(parent, surroundingFormGroupName) {
+            this.parent = parent;
+            this.surroundingFormGroupName = surroundingFormGroupName;
+            // we keep track of what form controls are actually rendered. Only those count when looking at form validation
+            this.activeControls = [];
+        }
+        FormComponent.prototype.ngOnInit = function () {
+            var _a;
+            if (this.parent) {
+                if (!isValueSet((_a = this.surroundingFormGroupName) === null || _a === void 0 ? void 0 : _a.name)) {
+                    throw new Error('No surrounding groupname is found for a nested form');
+                }
+                var groupName = String(this.surroundingFormGroupName.name);
+                var groupToOverwrite = this.parent.formGroup.get(groupName);
+                if (!(groupToOverwrite instanceof SubForm)) {
+                    throw new Error("Surrounding groupname '" + groupName + "' is not a subFormSubstitute'");
+                }
+                this.parent.formGroup.setControl(groupName, this.formGroup);
+            }
+        };
+        FormComponent.prototype.registerControl = function (formControl, formElement) {
+            this.activeControls.push({ formControl: formControl, formElement: formElement });
+            if (this.parent) {
+                this.parent.registerControl(formControl, formElement);
+            }
+        };
+        FormComponent.prototype.unregisterControl = function (formControl) {
+            this.activeControls = this.activeControls.filter(function (e) { return e.formControl !== formControl; });
+            if (this.parent) {
+                this.parent.unregisterControl(formControl);
+            }
+        };
+        FormComponent.prototype.addFormGroupControls = function (formGroup, result) {
+            var _this = this;
+            Object.values(formGroup.controls).forEach(function (value) {
+                if (value instanceof forms.FormGroup) {
+                    _this.addFormGroupControls(value, result);
+                }
+                else if (value instanceof forms.FormArray) {
+                    _this.addFormArrayControls(value, result);
+                }
+                else if (value instanceof forms.FormControl) {
+                    _this.addFormControl(value, result);
+                }
+            });
+        };
+        FormComponent.prototype.addFormArrayControls = function (formArray, result) {
+            var _this = this;
+            formArray.controls.forEach(function (value) {
+                if (value instanceof forms.FormGroup) {
+                    _this.addFormGroupControls(value, result);
+                }
+                else if (value instanceof forms.FormArray) {
+                    _this.addFormArrayControls(value, result);
+                }
+                else if (value instanceof forms.FormControl) {
+                    _this.addFormControl(value, result);
+                }
+            });
+        };
+        FormComponent.prototype.getAllFormControls = function () {
+            var result = [];
+            this.addFormGroupControls(this.formGroup, result);
+            return result;
+        };
+        FormComponent.prototype.addFormControl = function (control, result) {
+            result.push(control);
+        };
+        FormComponent.prototype.disableInactiveFormControl = function (control) {
+            if (!this.activeControls.some(function (e) { return e.formControl === control; })) {
+                control.disable();
+            }
+        };
+        FormComponent.prototype.trySubmit = function () {
+            var _this = this;
+            var _a, _b;
+            this.formGroup.markAllAsTouched();
+            var allControls = this.getAllFormControls();
+            var originalDisabledStates = allControls.map(function (e) {
+                return { control: e, disabled: e.disabled };
+            });
+            allControls.forEach(function (e) { return _this.disableInactiveFormControl(e); });
+            var values = this.formGroup.value;
+            if (this.formGroup.valid) {
+                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();
+                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 = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form',
+                    template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n",
+                    styles: [":host{display:block}:host.row{display:flex}"]
+                },] }
+    ];
+    FormComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.SkipSelf }, { type: core.Optional }] },
+        { type: forms.FormGroupName, decorators: [{ type: core.Optional }] }
+    ]; };
+    FormComponent.propDecorators = {
+        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, 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) {
+            // console.log('register');
+            // console.log(this.caption);
+            this.attachedControl = formControl;
+            this.parent.registerControl(formControl, this);
+        };
+        FormElementComponent.prototype.unregisterControl = function (formControl) {
+            this.attachedControl = null;
+            this.parent.unregisterControl(formControl);
+        };
+        FormElementComponent.prototype.getAttachedControl = function () {
+            return this.attachedControl;
+        };
+        FormElementComponent.prototype.registerErrorHandler = function (error, templateRef) {
+            this.customErrorHandlers.push({ error: error, templateRef: templateRef });
+        };
+        FormElementComponent.prototype.registerCaption = function (templateRef) {
+            this.captionRef = templateRef;
+        };
+        FormElementComponent.prototype.getErrorToShow = function () {
+            var _a, _b, _c;
+            if (((_a = this.attachedControl) === null || _a === void 0 ? void 0 : _a.touched) === true && ((_b = this.attachedControl) === null || _b === void 0 ? void 0 : _b.errors)) {
+                return Object.keys((_c = this.attachedControl) === null || _c === void 0 ? void 0 : _c.errors)[0];
+            }
+            return null;
+        };
+        FormElementComponent.prototype.getCustomErrorHandler = function (error) {
+            return this.customErrorHandlers.find(function (e) { return e.error === error; });
+        };
+        FormElementComponent.prototype.showDefaultError = function (error) {
+            return this.getErrorToShow() === error && !this.customErrorHandlers.some(function (e) { return e.error === error; });
+        };
+        FormElementComponent.prototype.getScrollableParent = function (node) {
+            if (node == null) {
+                return null;
+            }
+            if (node.scrollHeight > node.clientHeight) {
+                return node;
+            }
+            else {
+                return this.getScrollableParent(node.parentNode);
+            }
+        };
+        FormElementComponent.prototype.scrollTo = function () {
+            var _a;
+            this.internalComponentRef.nativeElement.scrollIntoView(true);
+            // 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')\">{{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: undefined, decorators: [{ type: core.Inject, args: [FORM_ERROR_MESSAGES,] }, { type: core.Optional }] }
+    ]; };
+    FormElementComponent.propDecorators = {
+        caption: [{ type: core.Input }],
+        direction: [{ type: core.Input }],
+        captionSpacing: [{ type: core.Input }],
+        swapInputAndCaption: [{ type: core.Input }],
+        internalComponentRef: [{ type: core.ViewChild, args: ['internalComponentRef',] }]
+    };
+
+    /**
+     * This component is a base in order to create a component that supports ngModel.
+     * Some important things to know about it:
+     *
+     * innerValue = your own inner state, which you should use to store the current state of what ngModel should be.
+     * writeValue() = called by angular, when ngModel is changed from OUTSIDE of the component. Feel free to patch this method if you need inner logic to happen when ngModel is altered from the outside. Always remember to also call the super.writeValue if you do!
+     * setInnerValueAndNotify() = call this when you want your ngModel to be updated from INSIDE of your component, and provide it to the OUTSIDE.
+     * ngOnInit() = Used to support the angular reactive forms framework. If you use ngOnInit in your own component (which happens fairly often) you must not forget to call the super.ngOnInit() method.
+     */
+    var ValueAccessorBase = /** @class */ (function () {
+        function ValueAccessorBase(parent, controlContainer) {
+            this.parent = parent;
+            this.controlContainer = controlContainer;
+            this.changed = new Array();
+            this.touched = new Array();
+            this.disabled = false;
+            // we support both providing just the formControlName and the full formControl
+            this.formControlName = null;
+            this.formControl = null;
+        }
+        ValueAccessorBase.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b, _c;
+            if (this.formControl) {
+                this.attachedFormControl = this.formControl;
             }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
+            else if (stringIsSetAndNotEmpty(this.formControlName)) {
+                this.attachedFormControl = (_a = this.controlContainer) === null || _a === void 0 ? void 0 : _a.control.get(this.formControlName);
+                if (isNullOrUndefined(this.attachedFormControl)) {
+                    throw new Error("Form element '" + this.formControlName + "' with caption '" + ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.caption) + "' is not declared in your FormGroup.");
                 }
             }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
+            if (this.attachedFormControl) {
+                this.disabled = this.attachedFormControl.disabled;
+                this.attachedFormControl.statusChanges.subscribe(function () {
+                    _this.disabled = _this.attachedFormControl.disabled;
+                });
+                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl);
+            }
+        };
+        ValueAccessorBase.prototype.isInErrorState = function () {
+            return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
+        };
+        ValueAccessorBase.prototype.ngOnDestroy = function () {
+            var _a;
+            if (this.attachedFormControl) {
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.unregisterControl(this.attachedFormControl);
+            }
+        };
+        ValueAccessorBase.prototype.touch = function () {
+            this.touched.forEach(function (f) { return f(); });
+        };
+        ValueAccessorBase.prototype.writeValue = function (value) {
+            this.innerValue = value;
+        };
+        ValueAccessorBase.prototype.registerOnChange = function (fn) {
+            this.changed.push(fn);
+        };
+        ValueAccessorBase.prototype.registerOnTouched = function (fn) {
+            this.touched.push(fn);
+        };
+        ValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
+            this.innerValue = value;
+            this.changed.forEach(function (fn) { return fn(value); });
+        };
+        ValueAccessorBase.prototype.resetToNull = function () {
+            this.setInnerValueAndNotify(null);
+        };
+        return ValueAccessorBase;
+    }());
+    ValueAccessorBase.decorators = [
+        { type: core.Component, args: [{
+                    selector: '',
+                    template: ''
+                },] }
+    ];
+    ValueAccessorBase.ctorParameters = function () { return [
+        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] }
+    ]; };
+    ValueAccessorBase.propDecorators = {
+        disabled: [{ type: core.Input }],
+        formControlName: [{ type: core.Input }],
+        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';
         }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
+        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',] }]
     };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
 
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
@@ -767,6 +827,7 @@
             _this.placeholder = 'Pick an option';
             _this.multiple = false;
             _this.clearable = true;
+            _this.onSearch = new core.EventEmitter();
             return _this;
         }
         return SelectComponent;
@@ -774,9 +835,9 @@
     SelectComponent.decorators = [
         { type: core.Component, args: [{
                     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",
+                    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(search)=\"onSearch.emit($event.term)\"\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 [
@@ -789,7 +850,8 @@
         multiple: [{ type: core.Input }],
         clearable: [{ type: core.Input }],
         dropdownPosition: [{ type: core.Input }],
-        customSearchFn: [{ type: core.Input }]
+        customSearchFn: [{ type: core.Input }],
+        onSearch: [{ type: core.Output }]
     };
 
     var SortableItemsComponent = /** @class */ (function (_super) {
@@ -945,11 +1007,21 @@
                 .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;
     }());
@@ -1180,11 +1252,13 @@
     exports.PasswordFieldComponent = PasswordFieldComponent;
     exports.SelectComponent = SelectComponent;
     exports.SortableItemsComponent = SortableItemsComponent;
+    exports.SubForm = SubForm;
     exports.TextInputComponent = TextInputComponent;
     exports.ToggleComponent = ToggleComponent;
     exports.ValueAccessorBase = ValueAccessorBase;
     exports.dateValidator = dateValidator;
     exports.invalidDateKey = invalidDateKey;
+    exports.invalidFieldsSymbol = invalidFieldsSymbol;
     exports.matDateFormatsFactory = matDateFormatsFactory;
     exports["ɵa"] = MaterialModule;