@klippa/ngx-enhancy-forms 4.0.0 → 5.2.0

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

@@ -1,10 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('lodash'), require('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';
 
-    function stringIsSetAndNotEmpty(s) {
+    function stringIsSetAndFilled(s) {
         return lodash.isString(s) && s.length > 0;
     }
     function isNullOrUndefined(value) {
@@ -16,30 +16,24 @@
     function isValueSet(value) {
         return value !== null && value !== undefined;
     }
+    function removeDuplicatesFromArray(array) {
+        return array.filter(function (c, i) {
+            var firstOccurrenceIndex = array.findIndex(function (c2) { return c2 === c; });
+            return i === firstOccurrenceIndex;
+        });
+    }
     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) + '...';
     }
+    function arrayIsSetAndFilled(arr) {
+        return arr !== null && arr !== undefined && arr.length > 0;
+    }
 
     var invalidFieldsSymbol = Symbol('Not all fields are valid');
     var SubFormDirective = /** @class */ (function () {
@@ -69,18 +63,21 @@
                 var injectInto = this.subFormPlaceholder.injectInto;
                 var injectAt = this.subFormPlaceholder.at;
                 if (injectInto instanceof forms.FormArray) {
-                    if (typeof injectAt !== "number") {
+                    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") {
+                    if (typeof injectAt !== 'string') {
                         throw new Error("cannot index FormGroup with " + typeof injectAt);
                     }
                     injectInto.setControl(injectAt, this.formGroup);
                 }
             }
+            if (isValueSet(this.patchValueInterceptor)) {
+                this.addSupportForPatchValueInterceptor();
+            }
         };
         FormComponent.prototype.ngOnDestroy = function () {
             var _this = this;
@@ -92,13 +89,25 @@
                     injectInto.removeAt(idx);
                 }
                 else if (injectInto instanceof forms.FormGroup) {
-                    if (typeof injectAt !== "string") {
+                    if (typeof injectAt !== 'string') {
                         throw new Error("cannot index FormGroup with " + typeof injectAt);
                     }
                     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) {
@@ -155,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) {
@@ -196,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) {
@@ -217,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 = [];
@@ -226,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;
@@ -275,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];
         };
@@ -284,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 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 [
@@ -296,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',] }]
     };
@@ -319,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.");
@@ -337,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 () {
@@ -368,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 = [
@@ -383,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 () {
@@ -830,6 +867,7 @@
         function PasswordFieldComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.placeholder = 'Password';
+            _this.isPasswordConfirm = false;
             return _this;
         }
         return PasswordFieldComponent;
@@ -837,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) {
@@ -912,6 +1033,7 @@
         function TextInputComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.type = 'text';
+            _this.clearable = false;
             return _this;
         }
         return TextInputComponent;
@@ -919,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) {
@@ -1071,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);
@@ -1111,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);
@@ -1120,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.setInnerValueAndNotify(date);
+                this.notifyNewDate();
             }
         };
-        DatepickerComponent.prototype.writeValue = function (value) {
+        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.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);
+        };
+        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',] }]
     };
@@ -1215,14 +1691,17 @@
                     ],
                     declarations: [
                         ValueAccessorBase,
+                        MultipleValueAccessorBase,
                         ButtonComponent,
                         CheckboxComponent,
-                        DatepickerComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
                         EmailInputComponent,
                         LoadingIndicatorComponent,
                         NumberInputComponent,
                         PasswordFieldComponent,
                         SelectComponent,
+                        SelectFooterComponent,
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
@@ -1235,14 +1714,17 @@
                     ],
                     exports: [
                         ValueAccessorBase,
+                        MultipleValueAccessorBase,
                         ButtonComponent,
-                        DatepickerComponent,
+                        DatePickerComponent,
+                        DateTimePickerComponent,
                         CheckboxComponent,
                         EmailInputComponent,
                         LoadingIndicatorComponent,
                         NumberInputComponent,
                         PasswordFieldComponent,
                         SelectComponent,
+                        SelectFooterComponent,
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
@@ -1266,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;
@@ -1277,10 +1762,13 @@
     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.SubFormDirective = SubFormDirective;
     exports.TextInputComponent = TextInputComponent;