@klippa/ngx-enhancy-forms 2.1.0 → 2.3.1

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

@@ -4,432 +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 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
-            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(invalidFieldsSymbol);
-            }
-        };
-        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)
@@ -659,6 +322,398 @@
         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 && isValueSet((_a = this.surroundingFormGroupName) === null || _a === void 0 ? void 0 : _a.name)) {
+                var groupName = String(this.surroundingFormGroupName.name);
+                var groupToOverwrite = this.parent.formGroup.get(groupName);
+                if (groupToOverwrite instanceof SubForm) {
+                    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;
+            }
+            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',] }]
+    };
+
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
         function CheckboxComponent() {
@@ -768,6 +823,7 @@
             _this.placeholder = 'Pick an option';
             _this.multiple = false;
             _this.clearable = true;
+            _this.onSearch = new core.EventEmitter();
             return _this;
         }
         return SelectComponent;
@@ -775,7 +831,7 @@
     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,: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}"]
                 },] }
@@ -790,7 +846,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) {
@@ -1191,6 +1248,7 @@
     exports.PasswordFieldComponent = PasswordFieldComponent;
     exports.SelectComponent = SelectComponent;
     exports.SortableItemsComponent = SortableItemsComponent;
+    exports.SubForm = SubForm;
     exports.TextInputComponent = TextInputComponent;
     exports.ToggleComponent = ToggleComponent;
     exports.ValueAccessorBase = ValueAccessorBase;