@klippa/ngx-enhancy-forms 3.0.0 → 5.1.0

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

@@ -1,414 +1,113 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('lodash'), require('ngx-sortablejs'), require('@ng-select/ng-select'), require('@angular/material/core'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/button')) :
-    typeof define === 'function' && define.amd ? define('@klippa/ngx-enhancy-forms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'lodash', 'ngx-sortablejs', '@ng-select/ng-select', '@angular/material/core', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/button'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.klippa = global.klippa || {}, global.klippa["ngx-enhancy-forms"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.lodash, global.ngxSortablejs, global.ngSelect, global.ng.material.core, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.button));
-})(this, (function (exports, core, common, forms, lodash, ngxSortablejs, ngSelect, core$1, datepicker, formField, input, button) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('lodash'), require('ngx-sortablejs'), require('@ng-select/ng-select'), require('date-fns'), require('@angular/material/core'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/button')) :
+    typeof define === 'function' && define.amd ? define('@klippa/ngx-enhancy-forms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'lodash', 'ngx-sortablejs', '@ng-select/ng-select', 'date-fns', '@angular/material/core', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/button'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.klippa = global.klippa || {}, global.klippa["ngx-enhancy-forms"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.lodash, global.ngxSortablejs, global.ngSelect, global.dateFns, 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, dateFns, core$1, datepicker, formField, input, button) { 'use strict';
 
-    /*! *****************************************************************************
-    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 stringIsSetAndFilled(s) {
+        return lodash.isString(s) && s.length > 0;
     }
-    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 isNullOrUndefined(value) {
+        return value === null || value === undefined;
     }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
+    function numberIsSet(value) {
+        return isValueSet(value) && typeof value === 'number';
     }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
+    function isValueSet(value) {
+        return value !== null && value !== undefined;
     }
-    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 removeDuplicatesFromArray(array) {
+        return array.filter(function (c, i) {
+            var firstOccurrenceIndex = array.findIndex(function (c2) { return c2 === c; });
+            return i === firstOccurrenceIndex;
         });
     }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
+    function stringOrArrayIsSetAndEmpty(value) {
+        return value !== null && value !== undefined && value.length === 0;
     }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
+    function truncateString(s, length) {
+        if (s.length < length) {
+            return s;
+        }
+        return s.substring(0, length) + '...';
     }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    function arrayIsSetAndFilled(arr) {
+        return arr !== null && arr !== undefined && arr.length > 0;
     }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
+
+    var invalidFieldsSymbol = Symbol('Not all fields are valid');
+    var SubFormDirective = /** @class */ (function () {
+        function SubFormDirective() {
         }
-        catch (error) {
-            e = { error: error };
+        return SubFormDirective;
+    }());
+    SubFormDirective.decorators = [
+        { type: core.Directive, args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: 'klp-sub-form',
+                },] }
+    ];
+    SubFormDirective.propDecorators = {
+        injectInto: [{ type: core.Input }],
+        at: [{ type: core.Input }]
+    };
+    var FormComponent = /** @class */ (function () {
+        function FormComponent(parent, subFormPlaceholder) {
+            this.parent = parent;
+            this.subFormPlaceholder = subFormPlaceholder;
+            // we keep track of what form controls are actually rendered. Only those count when looking at form validation
+            this.activeControls = [];
         }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
+        FormComponent.prototype.ngOnInit = function () {
+            if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
+                var injectInto = this.subFormPlaceholder.injectInto;
+                var injectAt = this.subFormPlaceholder.at;
+                if (injectInto instanceof forms.FormArray) {
+                    if (typeof injectAt !== 'number') {
+                        throw new Error("cannot index FormArray with " + typeof injectAt);
+                    }
+                    injectInto.setControl(injectAt, this.formGroup);
+                }
+                else if (injectInto instanceof forms.FormGroup) {
+                    if (typeof injectAt !== 'string') {
+                        throw new Error("cannot index FormGroup with " + typeof injectAt);
+                    }
+                    injectInto.setControl(injectAt, this.formGroup);
+                }
             }
-            finally {
-                if (e)
-                    throw e.error;
+            if (isValueSet(this.patchValueInterceptor)) {
+                this.addSupportForPatchValueInterceptor();
             }
-        }
-        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');
-    var SubFormDirective = /** @class */ (function () {
-        function SubFormDirective() {
-        }
-        return SubFormDirective;
-    }());
-    SubFormDirective.decorators = [
-        { type: core.Directive, args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: 'klp-sub-form',
-                },] }
-    ];
-    SubFormDirective.propDecorators = {
-        injectInto: [{ type: core.Input }]
-    };
-    // 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, subFormPlaceholder) {
-            this.parent = parent;
-            this.subFormPlaceholder = subFormPlaceholder;
-            // we keep track of what form controls are actually rendered. Only those count when looking at form validation
-            this.activeControls = [];
-        }
-        FormComponent.prototype.ngOnInit = function () {
+        };
+        FormComponent.prototype.ngOnDestroy = function () {
             var _this = this;
             if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
-                var parentOfInjectInto = this.subFormPlaceholder.injectInto.parent;
-                if (parentOfInjectInto instanceof forms.FormArray) {
-                    var i = parentOfInjectInto.controls.findIndex(function (e) { return e === _this.subFormPlaceholder.injectInto; });
-                    parentOfInjectInto.setControl(i, this.formGroup);
+                var injectInto = this.subFormPlaceholder.injectInto;
+                var injectAt = this.subFormPlaceholder.at;
+                if (injectInto instanceof forms.FormArray) {
+                    var idx = injectInto.controls.findIndex(function (e) { return e === _this.formGroup; });
+                    injectInto.removeAt(idx);
                 }
-                else if (parentOfInjectInto instanceof forms.FormGroup) {
-                    var toReplace = Object.entries(parentOfInjectInto.controls).find(function (_c) {
-                        var _d = __read(_c, 2), key = _d[0], val = _d[1];
-                        return val === _this.subFormPlaceholder.injectInto;
-                    });
-                    if (!((toReplace === null || toReplace === void 0 ? void 0 : toReplace[1]) instanceof SubForm)) {
-                        throw new Error("You are trying to inject a subForm ('" + (toReplace === null || toReplace === void 0 ? void 0 : toReplace[0]) + "') within something that is not annotated as such.");
+                else if (injectInto instanceof forms.FormGroup) {
+                    if (typeof injectAt !== 'string') {
+                        throw new Error("cannot index FormGroup with " + typeof injectAt);
                     }
-                    parentOfInjectInto.setControl(toReplace[0], this.formGroup);
+                    injectInto.removeControl(injectAt);
                 }
             }
         };
+        FormComponent.prototype.addSupportForPatchValueInterceptor = function () {
+            var _this = this;
+            var fn = this.formGroup.patchValue;
+            var newFn = function (value, options) {
+                _this.patchValueInterceptor(value).then(function (val) {
+                    setTimeout(function () {
+                        fn.call(_this.formGroup, val, options);
+                    });
+                });
+            };
+            this.formGroup.patchValue = newFn;
+        };
         FormComponent.prototype.registerControl = function (formControl, formElement) {
             this.activeControls.push({ formControl: formControl, formElement: formElement });
             if (this.parent) {
@@ -465,6 +164,7 @@
         FormComponent.prototype.trySubmit = function () {
             var _this = this;
             var _a, _b;
+            this.formGroup.updateValueAndValidity();
             this.formGroup.markAllAsTouched();
             var allControls = this.getAllFormControls();
             var originalDisabledStates = allControls.map(function (e) {
@@ -506,20 +206,21 @@
         { type: SubFormDirective, decorators: [{ type: core.Optional }] }
     ]; };
     FormComponent.propDecorators = {
-        formGroup: [{ type: core.Input }]
+        formGroup: [{ type: core.Input }],
+        patchValueInterceptor: [{ 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",
+        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) {
@@ -527,6 +228,7 @@
             this.customMessages = customMessages;
             this.direction = 'horizontal';
             this.captionSpacing = 'percentages';
+            this.spaceDistribution = '40-60';
             this.swapInputAndCaption = false;
             this.errorMessages = DEFAULT_ERROR_MESSAGES;
             this.customErrorHandlers = [];
@@ -536,11 +238,11 @@
                 return msg.replace("%" + key + "%", parameters[key]);
             }, message);
         };
-        FormElementComponent.prototype.registerControl = function (formControl) {
-            // console.log('register');
-            // console.log(this.caption);
+        FormElementComponent.prototype.registerControl = function (formControl, input) {
+            if (input === void 0) { input = null; }
             this.attachedControl = formControl;
             this.parent.registerControl(formControl, this);
+            this.input = input;
         };
         FormElementComponent.prototype.unregisterControl = function (formControl) {
             this.attachedControl = null;
@@ -585,7 +287,13 @@
             // 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) {
+        FormElementComponent.prototype.isRequired = function () {
+            if (isValueSet(this.input)) {
+                return this.input.hasValidator('required');
+            }
+            return false;
+        };
+        FormElementComponent.prototype.getErrorMessage = 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];
         };
@@ -594,8 +302,8 @@
     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%}"]
+                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"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\" *ngIf=\"caption || captionRef\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
+                    styles: [":host{display:block}.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}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000;margin-left:40%}.errorContainer.d30-70{margin-left:30%}"]
                 },] }
     ];
     FormElementComponent.ctorParameters = function () { return [
@@ -606,6 +314,7 @@
         caption: [{ type: core.Input }],
         direction: [{ type: core.Input }],
         captionSpacing: [{ type: core.Input }],
+        spaceDistribution: [{ type: core.Input }],
         swapInputAndCaption: [{ type: core.Input }],
         internalComponentRef: [{ type: core.ViewChild, args: ['internalComponentRef',] }]
     };
@@ -629,14 +338,16 @@
             // we support both providing just the formControlName and the full formControl
             this.formControlName = null;
             this.formControl = null;
+            this.onTouch = new core.EventEmitter();
+            this.validators = [];
         }
         ValueAccessorBase.prototype.ngOnInit = function () {
             var _this = this;
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (this.formControl) {
                 this.attachedFormControl = this.formControl;
             }
-            else if (stringIsSetAndNotEmpty(this.formControlName)) {
+            else if (stringIsSetAndFilled(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.");
@@ -647,7 +358,16 @@
                 this.attachedFormControl.statusChanges.subscribe(function () {
                     _this.disabled = _this.attachedFormControl.disabled;
                 });
-                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl);
+                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl, this);
+                if ((_d = this.attachedFormControl) === null || _d === void 0 ? void 0 : _d.validator) {
+                    var vals = this.attachedFormControl.validator({});
+                    if (isValueSet(vals)) {
+                        this.validators = Object.keys(vals);
+                    }
+                    else {
+                        this.validators = [];
+                    }
+                }
             }
         };
         ValueAccessorBase.prototype.isInErrorState = function () {
@@ -678,6 +398,12 @@
         ValueAccessorBase.prototype.resetToNull = function () {
             this.setInnerValueAndNotify(null);
         };
+        ValueAccessorBase.prototype.hasValidator = function (validatorName) {
+            if (arrayIsSetAndFilled(this.validators)) {
+                return this.validators.includes(validatorName);
+            }
+            return false;
+        };
         return ValueAccessorBase;
     }());
     ValueAccessorBase.decorators = [
@@ -693,7 +419,8 @@
     ValueAccessorBase.propDecorators = {
         disabled: [{ type: core.Input }],
         formControlName: [{ type: core.Input }],
-        formControl: [{ type: core.Input }]
+        formControl: [{ type: core.Input }],
+        onTouch: [{ type: core.Output }]
     };
 
     var ButtonComponent = /** @class */ (function () {
@@ -706,37 +433,355 @@
             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',] }]
+        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 __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: 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;
+    }
 
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
@@ -822,6 +867,7 @@
         function PasswordFieldComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.placeholder = 'Password';
+            _this.isPasswordConfirm = false;
             return _this;
         }
         return PasswordFieldComponent;
@@ -829,74 +875,157 @@
     PasswordFieldComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-password-field',
-                    template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n  [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n/>\n",
+                    template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n  [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"isPasswordConfirm ? 'Confirm password': 'Password'\"\n\t(blur)=\"touch()\"\n/>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }],
                     styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
                 },] }
     ];
     PasswordFieldComponent.propDecorators = {
-        placeholder: [{ type: core.Input }]
+        placeholder: [{ type: core.Input }],
+        isPasswordConfirm: [{ type: core.Input }]
     };
 
+    var SELECT_TRANSLATIONS = new core.InjectionToken('klp.form.select.translations');
     var SelectComponent = /** @class */ (function (_super) {
         __extends(SelectComponent, _super);
-        function SelectComponent(parent, controlContainer) {
+        function SelectComponent(parent, controlContainer, translations) {
             var _this = _super.call(this, parent, controlContainer) || this;
             _this.parent = parent;
             _this.controlContainer = controlContainer;
-            _this.placeholder = 'Pick an option';
+            _this.translations = translations;
             _this.multiple = false;
+            _this.multipleDisplayedAsAmount = false;
             _this.clearable = true;
             _this.onSearch = new core.EventEmitter();
             return _this;
         }
+        SelectComponent.prototype.onTextInput = function (value) {
+            this.currentQueryString = value;
+            this.onSearch.emit(value);
+        };
+        SelectComponent.prototype.getDefaultTranslation = function (key) {
+            var _this = this;
+            switch (key) {
+                case 'placeholder':
+                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Pick an option'; };
+                case 'amountSelected':
+                    return function (amount) { return amount + " selected"; };
+            }
+        };
+        SelectComponent.prototype.getTranslation = function (key, params) {
+            if (params === void 0) { params = null; }
+            var _a, _b, _c;
+            return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
+        };
         return SelectComponent;
     }(ValueAccessorBase));
     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(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",
+                    template: "<ng-select\n\t[placeholder]=\"getTranslation('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\t(input)=\"onTextInput($event.target.value)\"\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\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\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}"]
+                    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 .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;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 [
         { type: FormElementComponent, decorators: [{ type: core.Optional }, { type: core.Host }] },
-        { type: forms.ControlContainer, decorators: [{ type: core.Optional }, { type: core.Host }] }
+        { type: forms.ControlContainer, decorators: [{ type: core.Optional }, { type: core.Host }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [SELECT_TRANSLATIONS,] }, { type: core.Optional }] }
     ]; };
     SelectComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
         options: [{ type: core.Input }],
         multiple: [{ type: core.Input }],
+        multipleDisplayedAsAmount: [{ type: core.Input }],
         clearable: [{ type: core.Input }],
         dropdownPosition: [{ type: core.Input }],
         customSearchFn: [{ type: core.Input }],
+        footerElement: [{ type: core.Input }],
         onSearch: [{ type: core.Output }]
     };
 
+    var SelectFooterComponent = /** @class */ (function () {
+        function SelectFooterComponent() {
+        }
+        return SelectFooterComponent;
+    }());
+    SelectFooterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-select-footer',
+                    template: "<div class=\"componentContainer\">\n\t<span class=\"prefix\">{{prefix}}</span>\n\t<span class=\"text\">{{text}}</span>\n</div>\n",
+                    styles: [":host{display:block}.componentContainer{cursor:pointer;padding:6px 10px}.componentContainer:hover{background:#e7faee}.prefix{font-size:80%;padding-right:.625rem}"]
+                },] }
+    ];
+    SelectFooterComponent.propDecorators = {
+        prefix: [{ type: core.Input }],
+        text: [{ type: core.Input }]
+    };
+
     var SortableItemsComponent = /** @class */ (function (_super) {
         __extends(SortableItemsComponent, _super);
         function SortableItemsComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.sortableItemSize = 'lg';
+            _this.useCustomScroll = false;
+            _this.scrollInterval = null;
             _this.itemsOrderChanged = function () {
                 _this.setInnerValueAndNotify(_this.innerValue);
             };
+            _this.onItemDrag = function (data) {
+                // if the item you're dragging is reaching the top, start scrolling.
+                if (data.relatedRect.top < 100) {
+                    _this.scrollPage(100);
+                }
+                else {
+                    _this.stopScrolling();
+                }
+            };
+            _this.onEnd = function () {
+                _this.stopScrolling();
+            };
             return _this;
         }
+        SortableItemsComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (this.useCustomScroll) {
+                this.sortablejsOptions = { onUpdate: this.itemsOrderChanged, onMove: this.onItemDrag, onEnd: this.onEnd };
+            }
+            else {
+                this.sortablejsOptions = { onUpdate: this.itemsOrderChanged };
+            }
+        };
+        SortableItemsComponent.prototype.scrollPage = function (scrollAmount) {
+            var _this = this;
+            if (!isValueSet(this.scrollInterval)) {
+                this.scrollInterval = setInterval(function () {
+                    window.scroll({
+                        top: document.scrollingElement.scrollTop - scrollAmount,
+                        behavior: 'smooth',
+                    });
+                    if (document.scrollingElement.scrollTop <= 100) {
+                        _this.stopScrolling();
+                    }
+                }, 100);
+            }
+        };
+        SortableItemsComponent.prototype.stopScrolling = function () {
+            clearInterval(this.scrollInterval);
+            this.scrollInterval = null;
+        };
         return SortableItemsComponent;
     }(ValueAccessorBase));
     SortableItemsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-sortable-items',
-                    template: "<ng-template #listItem>\n\t<li *ngFor=\"let item of innerValue; index as index\"\n\t    class=\"sortableItem\"\n\t    [ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm'\n\t\t }\"\n\t>\n\t\t<ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\" ></ng-container>\n\t</li>\n</ng-template>\n\n<ol *ngIf='!disabled'\n        [sortablejs]=\"innerValue\"\n        [sortablejsOptions]=\"{ onUpdate: itemsOrderChanged }\"\n        class=\"itemsContainer\"\n>\n\t<ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n</ol>\n\n<ol *ngIf='disabled' class=\"itemsContainer disabled-mouse-cursor\">\n\t<ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n</ol>\n",
+                    template: "<ng-template #listItem>\n\t<li *ngFor=\"let item of innerValue; index as index\"\n\t\t\tclass=\"sortableItem\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm'\n\t\t }\"\n\t>\n\t\t<ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n\t</li>\n</ng-template>\n\n<ol *ngIf='!disabled'\n\t\t[sortablejs]=\"innerValue\"\n\t\t[sortablejsOptions]=\"sortablejsOptions\"\n\t\tclass=\"itemsContainer\"\n>\n\t<ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n</ol>\n\n<ol *ngIf='disabled' class=\"itemsContainer disabled-mouse-cursor\">\n\t<ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n</ol>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SortableItemsComponent, multi: true }],
                     styles: [":host{display:block}.itemsContainer{border:1px solid #e6ecf5;border-radius:5px;margin-bottom:0;padding:0}.sortableItem{border-top:1px solid #e6ecf5;cursor:-webkit-grab;cursor:grab;list-style:none}.sortableItem:hover{background:#f8f9fa}.sortableItem:first-child{border-top:none}.largeSortableItem{padding:15px}.smallSortableItem{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}"]
                 },] }
     ];
     SortableItemsComponent.propDecorators = {
         template: [{ type: core.ContentChild, args: [core.TemplateRef,] }],
-        sortableItemSize: [{ type: core.Input }]
+        sortableItemSize: [{ type: core.Input }],
+        useCustomScroll: [{ type: core.Input }]
     };
 
     var TextInputComponent = /** @class */ (function (_super) {
@@ -904,6 +1033,7 @@
         function TextInputComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.type = 'text';
+            _this.clearable = false;
             return _this;
         }
         return TextInputComponent;
@@ -911,14 +1041,16 @@
     TextInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-text-input',
-                    template: "<input\n\t[type]=\"type\"\n\tclass=\"form-control\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t(blur)=\"touch()\"\n\t[disabled]='disabled'\n/>\n",
+                    template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]='disabled'\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }],
-                    styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
+                    styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{left:.625rem;position:absolute;top:14px}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;display:block;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{cursor:pointer;font-size:18px;position:absolute;right:.625rem;top:7px}.showErrors{border-color:#ff8000}"]
                 },] }
     ];
     TextInputComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
-        type: [{ type: core.Input }]
+        type: [{ type: core.Input }],
+        clearable: [{ type: core.Input }],
+        icon: [{ type: core.Input }]
     };
 
     var ToggleComponent = /** @class */ (function (_super) {
@@ -1063,38 +1195,226 @@
         _: [{ type: core.HostBinding, args: ['class._fullWidth',] }]
     };
 
+    var MultipleValueAccessorBase = /** @class */ (function (_super) {
+        __extends(MultipleValueAccessorBase, _super);
+        function MultipleValueAccessorBase(parent, controlContainer) {
+            var _this = _super.call(this, parent, controlContainer) || this;
+            _this.parent = parent;
+            _this.controlContainer = controlContainer;
+            _this.multiple = false;
+            return _this;
+        }
+        MultipleValueAccessorBase.prototype.writeValue = function (value) {
+            if (this.multiple) {
+                if (Array.isArray(value)) {
+                    _super.prototype.writeValue.call(this, value.filter(isValueSet));
+                }
+                else {
+                    _super.prototype.writeValue.call(this, [value].filter(isValueSet));
+                }
+            }
+            else {
+                if (Array.isArray(value)) {
+                    _super.prototype.writeValue.call(this, value[0]);
+                }
+                else {
+                    _super.prototype.writeValue.call(this, value);
+                }
+            }
+        };
+        MultipleValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
+            if (this.multiple) {
+                if (Array.isArray(value)) {
+                    _super.prototype.setInnerValueAndNotify.call(this, value.filter(isValueSet));
+                }
+                else {
+                    _super.prototype.setInnerValueAndNotify.call(this, [value].filter(isValueSet));
+                }
+            }
+            else {
+                if (Array.isArray(value)) {
+                    _super.prototype.setInnerValueAndNotify.call(this, value[0]);
+                }
+                else {
+                    _super.prototype.setInnerValueAndNotify.call(this, value);
+                }
+            }
+        };
+        return MultipleValueAccessorBase;
+    }(ValueAccessorBase));
+    MultipleValueAccessorBase.decorators = [
+        { type: core.Component, args: [{
+                    selector: '',
+                    template: ''
+                },] }
+    ];
+    MultipleValueAccessorBase.ctorParameters = function () { return [
+        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] }
+    ]; };
+    MultipleValueAccessorBase.propDecorators = {
+        multiple: [{ type: core.Input }]
+    };
+
     var invalidDateKey = '--invalid_date--';
     function dateValidator(control) {
         var invalid = control.value === invalidDateKey;
         return invalid ? { date: control.value } : null;
     }
 
+    var DATE_PICKER_TRANSLATIONS = new core.InjectionToken('klp.form.date.translations');
+    var DatePickerComponent = /** @class */ (function (_super) {
+        __extends(DatePickerComponent, _super);
+        function DatePickerComponent(parent, controlContainer, translations) {
+            var _this = _super.call(this, parent, controlContainer) || this;
+            _this.parent = parent;
+            _this.controlContainer = controlContainer;
+            _this.translations = translations;
+            _this.minDate = undefined;
+            _this.maxDate = undefined;
+            _this.sameMonthOnly = false;
+            _this.format = 'dd-MM-yyyy';
+            _this.clearable = false;
+            return _this;
+        }
+        DatePickerComponent.prototype.writeValue = function (value) {
+            if (value === invalidDateKey) {
+                _super.prototype.writeValue.call(this, invalidDateKey);
+            }
+            else if (isNullOrUndefined(value)) {
+                this.dateValue = null;
+                _super.prototype.writeValue.call(this, null);
+            }
+            else {
+                if (Array.isArray(value)) {
+                    this.dateValue = value.map(function (e) { return dateFns.parse(e, 'yyyy-MM-dd', new Date()); });
+                }
+                else {
+                    this.dateValue = dateFns.parse(value, 'yyyy-MM-dd', new Date());
+                }
+                _super.prototype.writeValue.call(this, value);
+            }
+        };
+        DatePickerComponent.prototype.dateChanged = function (value) {
+            if (value === invalidDateKey) {
+                this.setInnerValueAndNotify(invalidDateKey);
+            }
+            else if (isNullOrUndefined(value)) {
+                this.dateValue = null;
+                this.setInnerValueAndNotify(null);
+            }
+            else {
+                this.dateValue = value;
+                if (Array.isArray(value)) {
+                    this.setInnerValueAndNotify(value.map(function (e) { return dateFns.format(e, 'yyyy-MM-dd'); }));
+                }
+                else {
+                    this.setInnerValueAndNotify(dateFns.format(value, 'yyyy-MM-dd'));
+                }
+            }
+        };
+        DatePickerComponent.prototype.getDefaultTranslation = function (key) {
+            var _this = this;
+            switch (key) {
+                case 'placeholder':
+                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+            }
+        };
+        DatePickerComponent.prototype.getTranslation = function (key, params) {
+            if (params === void 0) { params = null; }
+            var _a, _b, _c;
+            if (key === 'placeholder' && this.multiple) {
+                return '';
+            }
+            return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
+        };
+        return DatePickerComponent;
+    }(MultipleValueAccessorBase));
+    DatePickerComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-date-picker',
+                    template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t(onTouch)=\"touch()\"\n\t></klp-form-date-time-picker>\n</div>\n",
+                    providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }],
+                    styles: [":host{display:block}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer{border-color:#ff8000}"]
+                },] }
+    ];
+    DatePickerComponent.ctorParameters = function () { return [
+        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [DATE_PICKER_TRANSLATIONS,] }, { type: core.Optional }] }
+    ]; };
+    DatePickerComponent.propDecorators = {
+        minDate: [{ type: core.Input }],
+        maxDate: [{ type: core.Input }],
+        sameMonthOnly: [{ type: core.Input }],
+        format: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        clearable: [{ type: core.Input }]
+    };
+
     var KLP_DATE_FORMATS = new core.InjectionToken('klp.form.date.formats');
+    var DATE_TIME_PICKER_TRANSLATIONS = new core.InjectionToken('klp.form.dateTime.translations');
     function matDateFormatsFactory(component, dateFormats) {
         var _a;
         return (_a = dateFormats === null || dateFormats === void 0 ? void 0 : dateFormats(component.format)) !== null && _a !== void 0 ? _a : core$1.MAT_NATIVE_DATE_FORMATS;
     }
-    var DatepickerComponent = /** @class */ (function (_super) {
-        __extends(DatepickerComponent, _super);
-        function DatepickerComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+    var DateTimePickerComponent = /** @class */ (function (_super) {
+        __extends(DateTimePickerComponent, _super);
+        function DateTimePickerComponent(parent, controlContainer, translations, cdr) {
+            var _this = _super.call(this, parent, controlContainer) || this;
+            _this.parent = parent;
+            _this.controlContainer = controlContainer;
+            _this.translations = translations;
+            _this.cdr = cdr;
             _this.minDate = undefined;
             _this.maxDate = undefined;
-            _this.placeholder = 'Select date';
+            _this.sameMonthOnly = false;
+            _this.format = 'dd-MM-yyyy';
             _this.clearable = false;
+            _this.showTimeInput = true;
+            _this.invalidTimeAsMidnight = false; // if the time is not valid, use 00:00 as the time
             _this.minDateStartOfDay = undefined;
             _this.maxDateEndOfDay = undefined;
+            _this.selectedDates = [];
+            _this.dateTouched = false;
+            _this.hoursTouched = false;
+            _this.minutesTouched = false;
+            _this.isSelected = function (d) {
+                if (_this.multiple) {
+                    return _this.selectedDates.some(function (e) { return e.getTime() === d.getTime(); }) ? 'selected' : '';
+                }
+                return '';
+            };
+            _this.filterDates = function (e) {
+                if (_this.disabled) {
+                    return false;
+                }
+                return true;
+            };
             return _this;
         }
-        DatepickerComponent.prototype.ngOnChanges = function (changes) {
+        DateTimePickerComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (this.multiple) {
+                this.placeholder = '';
+                this.showTimeInput = false;
+            }
+        };
+        DateTimePickerComponent.prototype.ngAfterViewInit = function () {
+            if (this.multiple) {
+                // we are going to overwrite the datepicker closing fn later, so we are saving it here to restore it when needed
+                this.datePickingClosingFn = this.datePickerRef.close;
+            }
+        };
+        DateTimePickerComponent.prototype.ngOnChanges = function (changes) {
             if (changes.minDate) {
-                this.setMinDate(changes.minDate.currentValue);
+                this.determineMinAndMaxDates();
             }
             if (changes.maxDate) {
-                this.setMaxDate(changes.maxDate.currentValue);
+                this.determineMinAndMaxDates();
             }
         };
-        DatepickerComponent.prototype.setMinDate = function (minDate) {
+        DateTimePickerComponent.prototype.setMinDate = function (minDate) {
             if (minDate) {
                 this.minDateStartOfDay = new Date(minDate);
                 this.minDateStartOfDay.setHours(0, 0, 0, 0);
@@ -1103,7 +1423,7 @@
                 this.minDateStartOfDay = undefined;
             }
         };
-        DatepickerComponent.prototype.setMaxDate = function (maxDate) {
+        DateTimePickerComponent.prototype.setMaxDate = function (maxDate) {
             if (maxDate) {
                 this.maxDateEndOfDay = new Date(maxDate);
                 this.maxDateEndOfDay.setHours(23, 59, 59, 999);
@@ -1112,67 +1432,231 @@
                 this.maxDateEndOfDay = undefined;
             }
         };
+        DateTimePickerComponent.prototype.getSelectedMonths = function () {
+            return removeDuplicatesFromArray(this.selectedDates.map(function (e) { return dateFns.format(e, 'MMMM'); })).length;
+        };
         // dateChanged is called when the output of the datepicker is changed and
         // parsed correctly. If the date is invalid, it will be called the first time
         // with null but never again until a valid input is provided.
-        DatepickerComponent.prototype.dateChanged = function (event) {
-            var nativeInputValue = this.nativeInputRef.nativeElement.value;
+        DateTimePickerComponent.prototype.dateChanged = function (event) {
+            var _this = this;
             var date = event.value;
-            if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
-                this.setInnerValueAndNotify(invalidDateKey);
+            if (this.multiple) {
+                this.datePickerRef.close = function () {
+                };
+                if (this.selectedDates.some(function (e) { return e.getTime() === date.getTime(); })) {
+                    this.selectedDates = this.selectedDates.filter(function (e) { return e.getTime() !== date.getTime(); });
+                }
+                else {
+                    this.selectedDates = __spread(this.selectedDates, [date]);
+                }
+                // START HACK
+                // the date picker does not provide any rerender calls. Therefore, we are going to change the minDate in order to force the render
+                // This is needed to show all selected days in our date picker
+                // We also set the innerValue to null (with this.valueForMaterialDatePicker = null;), otherwise you can not
+                // deselect your last picked date
+                this.cdr.detectChanges();
+                this.valueForMaterialDatePicker = null;
+                var oldMinDate = this.minDateStartOfDay;
+                this.minDateStartOfDay = new Date(0);
+                this.cdr.detectChanges();
+                this.minDateStartOfDay = oldMinDate;
+                // END HACK
+                if (this.sameMonthOnly) {
+                    if (this.selectedDates.length >= 2) {
+                        if (date < dateFns.startOfMonth(this.selectedDates[0]) || date > dateFns.endOfMonth(this.selectedDates[0])) {
+                            this.selectedDates = [date];
+                        }
+                    }
+                    this.determineMinAndMaxDates();
+                }
+                this.setInnerValueAndNotify(this.selectedDates);
+                setTimeout(function () {
+                    _this.datePickerRef.close = _this.datePickingClosingFn;
+                });
+            }
+            else {
+                this.notifyNewDate();
+            }
+        };
+        DateTimePickerComponent.prototype.determineMinAndMaxDates = function () {
+            if (this.sameMonthOnly) {
+                if (this.selectedDates.length >= 2) {
+                    this.setMinDate(dateFns.startOfMonth(this.selectedDates[0]));
+                    this.setMaxDate(dateFns.endOfMonth(this.selectedDates[0]));
+                }
+                else {
+                    this.setMinDate(this.minDate);
+                    this.setMaxDate(this.maxDate);
+                }
             }
             else {
-                this.setInnerValueAndNotify(date);
+                this.setMinDate(this.minDate);
+                this.setMinDate(this.maxDate);
+            }
+        };
+        DateTimePickerComponent.prototype.notifyNewDate = function () {
+            var nativeInputValue = this.nativeInputRef.nativeElement.value;
+            var parsedHours = Number(this.hours);
+            var parsedMinutes = Number(this.minutes);
+            // if we dont have the time element
+            if (!this.showTimeInput) {
+                if (!stringIsSetAndFilled(nativeInputValue)) {
+                    this.setInnerValueAndNotify(null);
+                    return;
+                }
+                if (this.valueForMaterialDatePicker instanceof Date) {
+                    this.setInnerValueAndNotify(this.valueForMaterialDatePicker);
+                    return;
+                }
+            }
+            // when all inputs are empty
+            if (!stringIsSetAndFilled(nativeInputValue) && !stringIsSetAndFilled(this.hours) && !stringIsSetAndFilled(this.minutes)) {
+                this.setInnerValueAndNotify(null);
+                return;
+            }
+            // if we have date and time
+            if (stringIsSetAndFilled(this.hours) &&
+                Number.isFinite(parsedHours) &&
+                parsedHours >= 0 &&
+                parsedHours <= 23 &&
+                stringIsSetAndFilled(this.minutes) &&
+                Number.isFinite(parsedMinutes) &&
+                parsedMinutes >= 0 &&
+                parsedMinutes <= 59 &&
+                this.valueForMaterialDatePicker instanceof Date) {
+                var newDateWithHours = new Date(this.valueForMaterialDatePicker.setHours(parsedHours));
+                var newDateWithMinutes = new Date(newDateWithHours.setMinutes(parsedMinutes));
+                this.setInnerValueAndNotify(newDateWithMinutes);
+                return;
+            }
+            if (this.invalidTimeAsMidnight) {
+                if (this.valueForMaterialDatePicker instanceof Date) {
+                    this.setInnerValueAndNotify(this.valueForMaterialDatePicker);
+                    return;
+                }
             }
+            // all other cases, we are not in a valid state
+            this.setInnerValueAndNotify(invalidDateKey);
         };
-        DatepickerComponent.prototype.writeValue = function (value) {
+        DateTimePickerComponent.prototype.writeValue = function (value) {
             _super.prototype.writeValue.call(this, value);
-            this.valueForMaterialDatePicker = value === invalidDateKey ? null : value;
+            if (Array.isArray(value)) {
+                this.selectedDates = value;
+                this.determineMinAndMaxDates();
+                this.valueForMaterialDatePicker = null;
+            }
+            else {
+                this.valueForMaterialDatePicker = value === invalidDateKey ? null : value;
+                if (value instanceof Date) {
+                    this.hours = String(value.getHours());
+                    this.minutes = String(value.getMinutes());
+                    this.formatTime();
+                }
+                else {
+                    this.hours = '';
+                    this.minutes = '';
+                }
+            }
         };
         // nativeValueChanged is called when the internal text value changes, but not
         // when the date is changed via the date picker. We need this so that we can
         // determine if the datepicker is empty or invalid.
-        DatepickerComponent.prototype.nativeValueChanged = function (event) {
-            var nativeInputValue = event.target.value;
-            var date = this.valueForMaterialDatePicker;
+        DateTimePickerComponent.prototype.nativeValueChanged = function () {
             if (this.datePickerRef.opened) {
                 // if the user is typing instead of using the picker, close it.
                 this.datePickerRef.close();
             }
-            if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
-                this.setInnerValueAndNotify(invalidDateKey);
-            }
-            else {
-                this.setInnerValueAndNotify(date);
-            }
+            this.notifyNewDate();
         };
-        DatepickerComponent.prototype.resetToNull = function () {
+        DateTimePickerComponent.prototype.resetToNull = function () {
             this.setInnerValueAndNotify(null);
             this.valueForMaterialDatePicker = null;
             this.nativeInputRef.nativeElement.value = null;
+            this.hours = '';
+            this.minutes = '';
+            this.selectedDates = [];
         };
-        return DatepickerComponent;
-    }(ValueAccessorBase));
-    DatepickerComponent.decorators = [
+        DateTimePickerComponent.prototype.formatTime = function () {
+            if (Number.isFinite(Number(this.hours)) && this.hours.length === 1) {
+                this.hours = '0' + this.hours;
+            }
+            if (Number.isFinite(Number(this.minutes)) && this.minutes.length === 1) {
+                this.minutes = '0' + this.minutes;
+            }
+        };
+        DateTimePickerComponent.prototype.touchDate = function () {
+            this.dateTouched = true;
+            this.determineAllTouched();
+        };
+        DateTimePickerComponent.prototype.touchHours = function () {
+            this.hoursTouched = true;
+            this.determineAllTouched();
+        };
+        DateTimePickerComponent.prototype.touchMinutes = function () {
+            this.minutesTouched = true;
+            this.determineAllTouched();
+        };
+        DateTimePickerComponent.prototype.determineAllTouched = function () {
+            if ((this.dateTouched && this.hoursTouched && this.minutesTouched) || (this.dateTouched && !this.showTimeInput)) {
+                this.touch();
+            }
+        };
+        DateTimePickerComponent.prototype.getDefaultTranslation = function (key) {
+            var _this = this;
+            switch (key) {
+                case 'placeholder':
+                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+                case 'selectDays':
+                    return function () { return 'Select day(s)'; };
+                case 'selectedDate':
+                    return function (d) { return d.toLocaleDateString(); };
+                case 'daysSelected':
+                    return function (amount) { return amount + " days selected"; };
+                case 'selectedInMonth':
+                    return function (d) { return " in " + dateFns.format(d, 'MMMM'); };
+            }
+        };
+        DateTimePickerComponent.prototype.getTranslation = function (key, params) {
+            if (params === void 0) { params = null; }
+            var _a, _b, _c;
+            if (key === 'placeholder' && this.multiple) {
+                return '';
+            }
+            return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
+        };
+        return DateTimePickerComponent;
+    }(MultipleValueAccessorBase));
+    DateTimePickerComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'klp-form-datepicker',
-                    template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<mat-form-field [floatLabel]=\"'never'\">\n\t\t<input\n\t\t\t#nativeInput\n\t\t\tmatInput\n\t\t\t[matDatepicker]=\"picker\"\n\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t(input)=\"nativeValueChanged($event)\"\n\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(click)=\"picker.open()\"\n\t\t\t(blur)=\"touch()\"\n\t\t>\n\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t<mat-datepicker #picker\n\t\t></mat-datepicker>\n\t</mat-form-field>\n\t<button *ngIf=\"clearable\" class=\"clearButton\" (click)=\"resetToNull()\">\u00D7</button>\n</div>\n",
+                    selector: 'klp-form-date-time-picker',
+                    template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t<div *ngIf=\"multiple\" class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t<ng-container *ngIf=\"selectedDates.length >= 2\">\n\t\t\t\t\t<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf=\"getSelectedMonths() === 1\">{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 1\">{{getTranslation('selectedDate', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 0\" class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple}\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (blur)=\"formatTime(); touchHours()\">\n\t\t<div class=\"divider\">:</div>\n\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (blur)=\"formatTime(); touchMinutes()\">\n\t</div>\n\t<button *ngIf=\"clearable && !disabled\" class=\"clearButton\" (click)=\"resetToNull()\" [ngClass]=\"{withoutSpacing: !showTimeInput}\">\u00D7</button>\n</div>\n",
                     providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: DatepickerComponent, multi: true },
-                        { provide: core$1.MAT_DATE_FORMATS,
-                            deps: [DatepickerComponent, [new core.Optional(), KLP_DATE_FORMATS]],
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
+                        {
+                            provide: core$1.MAT_DATE_FORMATS,
+                            deps: [DateTimePickerComponent, [new core.Optional(), KLP_DATE_FORMATS]],
                             useFactory: matDateFormatsFactory,
                         }
                     ],
-                    styles: [":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-label,:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep .mat-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:none}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none}:host ::ng-deep .mat-form-field-suffix{margin-right:.625rem}:host ::ng-deep .mat-form-field-suffix:hover .mat-button-focus-overlay{opacity:.1}:host ::ng-deep .mat-form-field-underline{display:none}.componentContainer{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;display:block;font-size:14px;height:42px;padding:.375rem .625rem;position:relative;transition:all .2s ease-in;width:100%}.componentContainer::-webkit-input-placeholder{color:#adadad}.componentContainer:-moz-placeholder,.componentContainer::-moz-placeholder{color:#adadad}.componentContainer:-ms-input-placeholder{color:#adadad}.componentContainer:focus{border-color:#3ed778;box-shadow:none;outline:0 none}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{background-color:#ffeff4;border-color:#ff3c7e}.componentContainer.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.componentContainer.showErrors{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:none;border:none;bottom:0;color:#7b7b7b;display:flex;font-size:18px;position:absolute;right:1.25rem;top:0}"]
+                    styles: [":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-label,:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep .mat-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none;width:auto}:host ::ng-deep .mat-form-field-suffix{margin-right:.625rem}:host ::ng-deep .mat-form-field-suffix:hover .mat-button-focus-overlay{opacity:.1}:host ::ng-deep .mat-form-field-underline{display:none}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}.componentContainer{border-radius:2px;color:#888da8;display:flex;position:relative}.componentContainer .placeholderForMultipleSelection{color:#adadad}.componentContainer.showErrors .clearButton.withoutSpacing,.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:#fff;border:1px solid #e6ecf5;color:#7b7b7b;display:flex;flex:0 0 auto;font-size:18px;margin-left:1.25rem;padding:6px 14px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{background:#f9f9f9;border:1px solid #e6ecf5}.componentContainer .dateContainer{background:#fff;border:1px solid #e6ecf5;flex:1 1 auto;padding:6px}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer{align-items:center;background:#fff;border:1px solid #e6ecf5;display:flex;flex:0 0 auto;margin-left:1.25rem;padding:6px .625rem}.componentContainer .timeContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer input{border:none;color:#888da8;padding:0;text-align:center;width:20px}.componentContainer .timeContainer input::-moz-placeholder{color:#adadad}.componentContainer .timeContainer input:-ms-input-placeholder{color:#adadad}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}"]
                 },] }
     ];
-    DatepickerComponent.propDecorators = {
+    DateTimePickerComponent.ctorParameters = function () { return [
+        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [DATE_TIME_PICKER_TRANSLATIONS,] }, { type: core.Optional }] },
+        { type: core.ChangeDetectorRef }
+    ]; };
+    DateTimePickerComponent.propDecorators = {
         minDate: [{ type: core.Input }],
         maxDate: [{ type: core.Input }],
+        sameMonthOnly: [{ type: core.Input }],
         format: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         clearable: [{ type: core.Input }],
+        showTimeInput: [{ type: core.Input }],
+        invalidTimeAsMidnight: [{ type: core.Input }],
         nativeInputRef: [{ type: core.ViewChild, args: ['nativeInput',] }],
         datePickerRef: [{ type: core.ViewChild, args: ['picker',] }]
     };
@@ -1207,14 +1691,17 @@
                     ],
                     declarations: [
                         ValueAccessorBase,
+                        MultipleValueAccessorBase,
                         ButtonComponent,
                         CheckboxComponent,
-                        DatepickerComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
                         EmailInputComponent,
                         LoadingIndicatorComponent,
                         NumberInputComponent,
                         PasswordFieldComponent,
                         SelectComponent,
+                        SelectFooterComponent,
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
@@ -1227,14 +1714,17 @@
                     ],
                     exports: [
                         ValueAccessorBase,
+                        MultipleValueAccessorBase,
                         ButtonComponent,
-                        DatepickerComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
                         CheckboxComponent,
                         EmailInputComponent,
                         LoadingIndicatorComponent,
                         NumberInputComponent,
                         PasswordFieldComponent,
                         SelectComponent,
+                        SelectFooterComponent,
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
@@ -1258,8 +1748,11 @@
 
     exports.ButtonComponent = ButtonComponent;
     exports.CheckboxComponent = CheckboxComponent;
+    exports.DATE_PICKER_TRANSLATIONS = DATE_PICKER_TRANSLATIONS;
+    exports.DATE_TIME_PICKER_TRANSLATIONS = DATE_TIME_PICKER_TRANSLATIONS;
     exports.DEFAULT_ERROR_MESSAGES = DEFAULT_ERROR_MESSAGES;
-    exports.DatepickerComponent = DatepickerComponent;
+    exports.DatePickerComponent = DatePickerComponent;
+    exports.DateTimePickerComponent = DateTimePickerComponent;
     exports.EmailInputComponent = EmailInputComponent;
     exports.FORM_ERROR_MESSAGES = FORM_ERROR_MESSAGES;
     exports.FormCaptionComponent = FormCaptionComponent;
@@ -1269,12 +1762,14 @@
     exports.FormSubmitButtonComponent = FormSubmitButtonComponent;
     exports.KLP_DATE_FORMATS = KLP_DATE_FORMATS;
     exports.LoadingIndicatorComponent = LoadingIndicatorComponent;
+    exports.MultipleValueAccessorBase = MultipleValueAccessorBase;
     exports.NgxEnhancyFormsModule = NgxEnhancyFormsModule;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordFieldComponent = PasswordFieldComponent;
+    exports.SELECT_TRANSLATIONS = SELECT_TRANSLATIONS;
     exports.SelectComponent = SelectComponent;
+    exports.SelectFooterComponent = SelectFooterComponent;
     exports.SortableItemsComponent = SortableItemsComponent;
-    exports.SubForm = SubForm;
     exports.SubFormDirective = SubFormDirective;
     exports.TextInputComponent = TextInputComponent;
     exports.ToggleComponent = ToggleComponent;