@klippa/ngx-enhancy-forms 2.3.1 → 5.0.0

package/fesm2015/klippa-ngx-enhancy-forms.js

@@ -1,16 +1,17 @@
-import { Component, SkipSelf, Optional, Input, InjectionToken, Host, Inject, ViewChild, HostBinding, EventEmitter, Output, ContentChild, TemplateRef, NgModule } from '@angular/core';
+import { Directive, Input, Component, SkipSelf, Optional, InjectionToken, Host, Inject, ViewChild, HostBinding, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormGroup, FormArray, FormControl, FormGroupName, ControlContainer, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormArray, FormGroup, FormControl, ControlContainer, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isString } from 'lodash';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { parse, format, startOfMonth, endOfMonth } from 'date-fns';
 import { MAT_NATIVE_DATE_FORMATS, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 
-function stringIsSetAndNotEmpty(s) {
+function stringIsSetAndFilled(s) {
     return isString(s) && s.length > 0;
 }
 function isNullOrUndefined(value) {
@@ -22,24 +23,15 @@ function numberIsSet(value) {
 function isValueSet(value) {
     return value !== null && value !== undefined;
 }
+function removeDuplicatesFromArray(array) {
+    return array.filter((c, i) => {
+        const firstOccurrenceIndex = array.findIndex((c2) => 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;
@@ -48,29 +40,73 @@ function truncateString(s, length) {
 }
 
 const invalidFieldsSymbol = Symbol('Not all fields are valid');
-// Only used as a 'marker' to define a property will be filled in by a sub form
-class SubForm extends FormGroup {
-    constructor() {
-        super({}, null);
-    }
+class SubFormDirective {
 }
+SubFormDirective.decorators = [
+    { type: Directive, args: [{
+                // tslint:disable-next-line:directive-selector
+                selector: 'klp-sub-form',
+            },] }
+];
+SubFormDirective.propDecorators = {
+    injectInto: [{ type: Input }],
+    at: [{ type: Input }]
+};
 class FormComponent {
-    constructor(parent, surroundingFormGroupName) {
+    constructor(parent, subFormPlaceholder) {
         this.parent = parent;
-        this.surroundingFormGroupName = surroundingFormGroupName;
+        this.subFormPlaceholder = subFormPlaceholder;
         // we keep track of what form controls are actually rendered. Only those count when looking at form validation
         this.activeControls = [];
     }
     ngOnInit() {
-        var _a;
-        if (this.parent && isValueSet((_a = this.surroundingFormGroupName) === null || _a === void 0 ? void 0 : _a.name)) {
-            const groupName = String(this.surroundingFormGroupName.name);
-            const groupToOverwrite = this.parent.formGroup.get(groupName);
-            if (groupToOverwrite instanceof SubForm) {
-                this.parent.formGroup.setControl(groupName, this.formGroup);
+        if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
+            const injectInto = this.subFormPlaceholder.injectInto;
+            const injectAt = this.subFormPlaceholder.at;
+            if (injectInto instanceof FormArray) {
+                if (typeof injectAt !== 'number') {
+                    throw new Error(`cannot index FormArray with ${typeof injectAt}`);
+                }
+                injectInto.setControl(injectAt, this.formGroup);
+            }
+            else if (injectInto instanceof FormGroup) {
+                if (typeof injectAt !== 'string') {
+                    throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
+                }
+                injectInto.setControl(injectAt, this.formGroup);
+            }
+        }
+        if (isValueSet(this.patchValueInterceptor)) {
+            this.addSupportForPatchValueInterceptor();
+        }
+    }
+    ngOnDestroy() {
+        if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
+            const injectInto = this.subFormPlaceholder.injectInto;
+            const injectAt = this.subFormPlaceholder.at;
+            if (injectInto instanceof FormArray) {
+                const idx = injectInto.controls.findIndex(e => e === this.formGroup);
+                injectInto.removeAt(idx);
+            }
+            else if (injectInto instanceof FormGroup) {
+                if (typeof injectAt !== 'string') {
+                    throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
+                }
+                injectInto.removeControl(injectAt);
             }
         }
     }
+    addSupportForPatchValueInterceptor() {
+        const fn = this.formGroup.patchValue;
+        const newFn = (value, options) => {
+            this.patchValueInterceptor(value).then((val) => {
+                setTimeout(() => {
+                    fn.call(this.formGroup, val, options);
+                });
+            });
+        };
+        this.formGroup.patchValue = newFn;
+    }
     registerControl(formControl, formElement) {
         this.activeControls.push({ formControl, formElement });
         if (this.parent) {
@@ -124,6 +160,7 @@ class FormComponent {
     }
     trySubmit() {
         var _a, _b;
+        this.formGroup.updateValueAndValidity();
         this.formGroup.markAllAsTouched();
         const allControls = this.getAllFormControls();
         const originalDisabledStates = allControls.map(e => {
@@ -161,23 +198,24 @@ FormComponent.decorators = [
 ];
 FormComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: SkipSelf }, { type: Optional }] },
-    { type: FormGroupName, decorators: [{ type: Optional }] }
+    { type: SubFormDirective, decorators: [{ type: Optional }] }
 ];
 FormComponent.propDecorators = {
-    formGroup: [{ type: Input }]
+    formGroup: [{ type: Input }],
+    patchValueInterceptor: [{ type: Input }]
 };
 
 const FORM_ERROR_MESSAGES = new InjectionToken('form.error.messages');
 const 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',
 };
 class FormElementComponent {
     constructor(parent, customMessages) {
@@ -195,8 +233,6 @@ class FormElementComponent {
         }, message);
     }
     registerControl(formControl) {
-        // console.log('register');
-        // console.log(this.caption);
         this.attachedControl = formControl;
         this.parent.registerControl(formControl, this);
     }
@@ -243,7 +279,7 @@ class FormElementComponent {
         // 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);
     }
-    getErrorMessages(key) {
+    getErrorMessage(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];
     }
@@ -251,7 +287,7 @@ class FormElementComponent {
 FormElementComponent.decorators = [
     { type: 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",
+                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\" [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%}"]
             },] }
 ];
@@ -292,7 +328,7 @@ class ValueAccessorBase {
         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.`);
@@ -457,92 +493,173 @@ class PasswordFieldComponent extends ValueAccessorBase {
     constructor() {
         super(...arguments);
         this.placeholder = 'Password';
+        this.isPasswordConfirm = false;
     }
 }
 PasswordFieldComponent.decorators = [
     { type: 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: 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: Input }]
+    placeholder: [{ type: Input }],
+    isPasswordConfirm: [{ type: Input }]
 };
 
+const SELECT_TRANSLATIONS = new InjectionToken('klp.form.select.translations');
 class SelectComponent extends ValueAccessorBase {
-    constructor(parent, controlContainer) {
+    constructor(parent, controlContainer, translations) {
         super(parent, controlContainer);
         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 EventEmitter();
     }
+    onTextInput(value) {
+        this.currentQueryString = value;
+        this.onSearch.emit(value);
+    }
+    getDefaultTranslation(key) {
+        switch (key) {
+            case 'placeholder':
+                return () => { var _a; return (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Pick an option'; };
+            case 'amountSelected':
+                return (amount) => `${amount} selected`;
+        }
+    }
+    getTranslation(key, 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);
+    }
 }
 SelectComponent.decorators = [
     { type: 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: 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 = () => [
     { type: FormElementComponent, decorators: [{ type: Optional }, { type: Host }] },
-    { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }] }
+    { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }] },
+    { type: undefined, decorators: [{ type: Inject, args: [SELECT_TRANSLATIONS,] }, { type: Optional }] }
 ];
 SelectComponent.propDecorators = {
     placeholder: [{ type: Input }],
     options: [{ type: Input }],
     multiple: [{ type: Input }],
+    multipleDisplayedAsAmount: [{ type: Input }],
     clearable: [{ type: Input }],
     dropdownPosition: [{ type: Input }],
     customSearchFn: [{ type: Input }],
+    footerElement: [{ type: Input }],
     onSearch: [{ type: Output }]
 };
 
+class SelectFooterComponent {
+}
+SelectFooterComponent.decorators = [
+    { type: 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: Input }],
+    text: [{ type: Input }]
+};
+
 class SortableItemsComponent extends ValueAccessorBase {
     constructor() {
         super(...arguments);
         this.sortableItemSize = 'lg';
+        this.useCustomScroll = false;
+        this.scrollInterval = null;
         this.itemsOrderChanged = () => {
             this.setInnerValueAndNotify(this.innerValue);
         };
+        this.onItemDrag = (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 = () => {
+            this.stopScrolling();
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.useCustomScroll) {
+            this.sortablejsOptions = { onUpdate: this.itemsOrderChanged, onMove: this.onItemDrag, onEnd: this.onEnd };
+        }
+        else {
+            this.sortablejsOptions = { onUpdate: this.itemsOrderChanged };
+        }
+    }
+    scrollPage(scrollAmount) {
+        if (!isValueSet(this.scrollInterval)) {
+            this.scrollInterval = setInterval(() => {
+                window.scroll({
+                    top: document.scrollingElement.scrollTop - scrollAmount,
+                    behavior: 'smooth',
+                });
+                if (document.scrollingElement.scrollTop <= 100) {
+                    this.stopScrolling();
+                }
+            }, 100);
+        }
+    }
+    stopScrolling() {
+        clearInterval(this.scrollInterval);
+        this.scrollInterval = null;
     }
 }
 SortableItemsComponent.decorators = [
     { type: 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: 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: ContentChild, args: [TemplateRef,] }],
-    sortableItemSize: [{ type: Input }]
+    sortableItemSize: [{ type: Input }],
+    useCustomScroll: [{ type: Input }]
 };
 
 class TextInputComponent extends ValueAccessorBase {
     constructor() {
         super(...arguments);
         this.type = 'text';
+        this.clearable = false;
     }
 }
 TextInputComponent.decorators = [
     { type: 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: 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: Input }],
-    type: [{ type: Input }]
+    type: [{ type: Input }],
+    clearable: [{ type: Input }],
+    icon: [{ type: Input }]
 };
 
 class ToggleComponent extends ValueAccessorBase {
@@ -672,33 +789,213 @@ FormSubmitButtonComponent.propDecorators = {
     _: [{ type: HostBinding, args: ['class._fullWidth',] }]
 };
 
+class MultipleValueAccessorBase extends ValueAccessorBase {
+    constructor(parent, controlContainer) {
+        super(parent, controlContainer);
+        this.parent = parent;
+        this.controlContainer = controlContainer;
+        this.multiple = false;
+    }
+    writeValue(value) {
+        if (this.multiple) {
+            if (Array.isArray(value)) {
+                super.writeValue(value.filter(isValueSet));
+            }
+            else {
+                super.writeValue([value].filter(isValueSet));
+            }
+        }
+        else {
+            if (Array.isArray(value)) {
+                super.writeValue(value[0]);
+            }
+            else {
+                super.writeValue(value);
+            }
+        }
+    }
+    setInnerValueAndNotify(value) {
+        if (this.multiple) {
+            if (Array.isArray(value)) {
+                super.setInnerValueAndNotify(value.filter(isValueSet));
+            }
+            else {
+                super.setInnerValueAndNotify([value].filter(isValueSet));
+            }
+        }
+        else {
+            if (Array.isArray(value)) {
+                super.setInnerValueAndNotify(value[0]);
+            }
+            else {
+                super.setInnerValueAndNotify(value);
+            }
+        }
+    }
+}
+MultipleValueAccessorBase.decorators = [
+    { type: Component, args: [{
+                selector: '',
+                template: ''
+            },] }
+];
+MultipleValueAccessorBase.ctorParameters = () => [
+    { type: FormElementComponent, decorators: [{ type: Host }, { type: Optional }] },
+    { type: ControlContainer, decorators: [{ type: Host }, { type: Optional }] }
+];
+MultipleValueAccessorBase.propDecorators = {
+    multiple: [{ type: Input }]
+};
+
 const invalidDateKey = '--invalid_date--';
 function dateValidator(control) {
     const invalid = control.value === invalidDateKey;
     return invalid ? { date: control.value } : null;
 }
 
+const DATE_PICKER_TRANSLATIONS = new InjectionToken('klp.form.date.translations');
+class DatePickerComponent extends MultipleValueAccessorBase {
+    constructor(parent, controlContainer, translations) {
+        super(parent, controlContainer);
+        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;
+    }
+    writeValue(value) {
+        if (value === invalidDateKey) {
+            super.writeValue(invalidDateKey);
+        }
+        else if (isNullOrUndefined(value)) {
+            this.dateValue = null;
+            super.writeValue(null);
+        }
+        else {
+            if (Array.isArray(value)) {
+                this.dateValue = value.map((e) => parse(e, 'yyyy-MM-dd', new Date()));
+            }
+            else {
+                this.dateValue = parse(value, 'yyyy-MM-dd', new Date());
+            }
+            super.writeValue(value);
+        }
+    }
+    dateChanged(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((e) => format(e, 'yyyy-MM-dd')));
+            }
+            else {
+                this.setInnerValueAndNotify(format(value, 'yyyy-MM-dd'));
+            }
+        }
+    }
+    getDefaultTranslation(key) {
+        switch (key) {
+            case 'placeholder':
+                return () => { var _a; return (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+        }
+    }
+    getTranslation(key, 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);
+    }
+}
+DatePickerComponent.decorators = [
+    { type: 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: 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 = () => [
+    { type: FormElementComponent, decorators: [{ type: Host }, { type: Optional }] },
+    { type: ControlContainer, decorators: [{ type: Host }, { type: Optional }] },
+    { type: undefined, decorators: [{ type: Inject, args: [DATE_PICKER_TRANSLATIONS,] }, { type: Optional }] }
+];
+DatePickerComponent.propDecorators = {
+    minDate: [{ type: Input }],
+    maxDate: [{ type: Input }],
+    sameMonthOnly: [{ type: Input }],
+    format: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    clearable: [{ type: Input }]
+};
+
 const KLP_DATE_FORMATS = new InjectionToken('klp.form.date.formats');
+const DATE_TIME_PICKER_TRANSLATIONS = new 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 : MAT_NATIVE_DATE_FORMATS;
 }
-class DatepickerComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
+class DateTimePickerComponent extends MultipleValueAccessorBase {
+    constructor(parent, controlContainer, translations, cdr) {
+        super(parent, controlContainer);
+        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 = (d) => {
+            if (this.multiple) {
+                return this.selectedDates.some((e) => e.getTime() === d.getTime()) ? 'selected' : '';
+            }
+            return '';
+        };
+        this.filterDates = (e) => {
+            if (this.disabled) {
+                return false;
+            }
+            return true;
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.multiple) {
+            this.placeholder = '';
+            this.showTimeInput = false;
+        }
+    }
+    ngAfterViewInit() {
+        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;
+        }
     }
     ngOnChanges(changes) {
         if (changes.minDate) {
-            this.setMinDate(changes.minDate.currentValue);
+            this.determineMinAndMaxDates();
         }
         if (changes.maxDate) {
-            this.setMaxDate(changes.maxDate.currentValue);
+            this.determineMinAndMaxDates();
         }
     }
     setMinDate(minDate) {
@@ -719,66 +1016,227 @@ class DatepickerComponent extends ValueAccessorBase {
             this.maxDateEndOfDay = undefined;
         }
     }
+    getSelectedMonths() {
+        return removeDuplicatesFromArray(this.selectedDates.map((e) => 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.
     dateChanged(event) {
-        const nativeInputValue = this.nativeInputRef.nativeElement.value;
         const date = event.value;
-        if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
-            this.setInnerValueAndNotify(invalidDateKey);
+        if (this.multiple) {
+            this.datePickerRef.close = () => {
+            };
+            if (this.selectedDates.some((e) => e.getTime() === date.getTime())) {
+                this.selectedDates = this.selectedDates.filter((e) => e.getTime() !== date.getTime());
+            }
+            else {
+                this.selectedDates = [...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;
+            const 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 < startOfMonth(this.selectedDates[0]) || date > endOfMonth(this.selectedDates[0])) {
+                        this.selectedDates = [date];
+                    }
+                }
+                this.determineMinAndMaxDates();
+            }
+            this.setInnerValueAndNotify(this.selectedDates);
+            setTimeout(() => {
+                this.datePickerRef.close = this.datePickingClosingFn;
+            });
         }
         else {
-            this.setInnerValueAndNotify(date);
+            this.notifyNewDate();
         }
     }
+    determineMinAndMaxDates() {
+        if (this.sameMonthOnly) {
+            if (this.selectedDates.length >= 2) {
+                this.setMinDate(startOfMonth(this.selectedDates[0]));
+                this.setMaxDate(endOfMonth(this.selectedDates[0]));
+            }
+            else {
+                this.setMinDate(this.minDate);
+                this.setMaxDate(this.maxDate);
+            }
+        }
+        else {
+            this.setMinDate(this.minDate);
+            this.setMinDate(this.maxDate);
+        }
+    }
+    notifyNewDate() {
+        const nativeInputValue = this.nativeInputRef.nativeElement.value;
+        const parsedHours = Number(this.hours);
+        const 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) {
+            const newDateWithHours = new Date(this.valueForMaterialDatePicker.setHours(parsedHours));
+            const 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);
+    }
     writeValue(value) {
         super.writeValue(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.
-    nativeValueChanged(event) {
-        const nativeInputValue = event.target.value;
-        const date = this.valueForMaterialDatePicker;
+    nativeValueChanged() {
         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();
     }
     resetToNull() {
         this.setInnerValueAndNotify(null);
         this.valueForMaterialDatePicker = null;
         this.nativeInputRef.nativeElement.value = null;
+        this.hours = '';
+        this.minutes = '';
+        this.selectedDates = [];
+    }
+    formatTime() {
+        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;
+        }
+    }
+    touchDate() {
+        this.dateTouched = true;
+        this.determineAllTouched();
+    }
+    touchHours() {
+        this.hoursTouched = true;
+        this.determineAllTouched();
+    }
+    touchMinutes() {
+        this.minutesTouched = true;
+        this.determineAllTouched();
+    }
+    determineAllTouched() {
+        if ((this.dateTouched && this.hoursTouched && this.minutesTouched) || (this.dateTouched && !this.showTimeInput)) {
+            this.touch();
+        }
+    }
+    getDefaultTranslation(key) {
+        switch (key) {
+            case 'placeholder':
+                return () => { var _a; return (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+            case 'selectDays':
+                return () => 'Select day(s)';
+            case 'selectedDate':
+                return (d) => d.toLocaleDateString();
+            case 'daysSelected':
+                return (amount) => `${amount} days selected`;
+            case 'selectedInMonth':
+                return (d) => ` in ${format(d, 'MMMM')}`;
+        }
+    }
+    getTranslation(key, 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);
     }
 }
-DatepickerComponent.decorators = [
+DateTimePickerComponent.decorators = [
     { type: 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: NG_VALUE_ACCESSOR, useExisting: DatepickerComponent, multi: true },
-                    { provide: MAT_DATE_FORMATS,
-                        deps: [DatepickerComponent, [new Optional(), KLP_DATE_FORMATS]],
+                    { provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
+                    {
+                        provide: MAT_DATE_FORMATS,
+                        deps: [DateTimePickerComponent, [new 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 = () => [
+    { type: FormElementComponent, decorators: [{ type: Host }, { type: Optional }] },
+    { type: ControlContainer, decorators: [{ type: Host }, { type: Optional }] },
+    { type: undefined, decorators: [{ type: Inject, args: [DATE_TIME_PICKER_TRANSLATIONS,] }, { type: Optional }] },
+    { type: ChangeDetectorRef }
+];
+DateTimePickerComponent.propDecorators = {
     minDate: [{ type: Input }],
     maxDate: [{ type: Input }],
+    sameMonthOnly: [{ type: Input }],
     format: [{ type: Input }],
     placeholder: [{ type: Input }],
     clearable: [{ type: Input }],
+    showTimeInput: [{ type: Input }],
+    invalidTimeAsMidnight: [{ type: Input }],
     nativeInputRef: [{ type: ViewChild, args: ['nativeInput',] }],
     datePickerRef: [{ type: ViewChild, args: ['picker',] }]
 };
@@ -807,14 +1265,17 @@ NgxEnhancyFormsModule.decorators = [
                 ],
                 declarations: [
                     ValueAccessorBase,
+                    MultipleValueAccessorBase,
                     ButtonComponent,
                     CheckboxComponent,
-                    DatepickerComponent,
+                    DatePickerComponent,
+                    DateTimePickerComponent,
                     EmailInputComponent,
                     LoadingIndicatorComponent,
                     NumberInputComponent,
                     PasswordFieldComponent,
                     SelectComponent,
+                    SelectFooterComponent,
                     SortableItemsComponent,
                     TextInputComponent,
                     ToggleComponent,
@@ -823,17 +1284,21 @@ NgxEnhancyFormsModule.decorators = [
                     FormErrorComponent,
                     FormSubmitButtonComponent,
                     FormComponent,
+                    SubFormDirective,
                 ],
                 exports: [
                     ValueAccessorBase,
+                    MultipleValueAccessorBase,
                     ButtonComponent,
-                    DatepickerComponent,
+                    DatePickerComponent,
+                    DateTimePickerComponent,
                     CheckboxComponent,
                     EmailInputComponent,
                     LoadingIndicatorComponent,
                     NumberInputComponent,
                     PasswordFieldComponent,
                     SelectComponent,
+                    SelectFooterComponent,
                     SortableItemsComponent,
                     TextInputComponent,
                     ToggleComponent,
@@ -842,6 +1307,7 @@ NgxEnhancyFormsModule.decorators = [
                     FormErrorComponent,
                     FormSubmitButtonComponent,
                     FormComponent,
+                    SubFormDirective,
                 ]
             },] }
 ];
@@ -854,5 +1320,5 @@ NgxEnhancyFormsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, DEFAULT_ERROR_MESSAGES, DatepickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, KLP_DATE_FORMATS, LoadingIndicatorComponent, NgxEnhancyFormsModule, NumberInputComponent, PasswordFieldComponent, SelectComponent, SortableItemsComponent, SubForm, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory, MaterialModule as ɵa };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, KLP_DATE_FORMATS, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, PasswordFieldComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory, MaterialModule as ɵa };
 //# sourceMappingURL=klippa-ngx-enhancy-forms.js.map