@klippa/ngx-enhancy-forms 14.0.1 → 16.0.0

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

@@ -1,2052 +0,0 @@
-import * as i0 from '@angular/core';
-import { Directive, Input, Component, SkipSelf, Optional, InjectionToken, Host, Inject, ViewChild, EventEmitter, Output, HostBinding, TemplateRef, ContentChild, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, FormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { isString } from 'lodash-es';
-import { isArray } from 'lodash';
-import { __awaiter } from 'tslib';
-import * as i4 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import * as i2$1 from 'ngx-sortablejs';
-import { SortablejsModule } from 'ngx-sortablejs';
-import { isSameDay, format, startOfMonth, endOfMonth, parse } from 'date-fns';
-import * as i3 from '@angular/material/core';
-import { MAT_NATIVE_DATE_FORMATS, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
-import * as i5 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i6 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i7 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-
-function stringIsSetAndFilled(s) {
-    return isString(s) && s.length > 0;
-}
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
-}
-function numberIsSet(value) {
-    return isValueSet(value) && typeof value === 'number';
-}
-function isValueSet(value) {
-    return value !== null && value !== undefined;
-}
-function stringOrArrayIsSetAndEmpty(value) {
-    return value !== null && value !== undefined && value.length === 0;
-}
-function truncateString(s, length) {
-    if (s.length < length) {
-        return s;
-    }
-    return s.substring(0, length) + '...';
-}
-
-function removeDuplicatesFromArraysWithComparator(comparator, ...arrays) {
-    let combined = [];
-    for (const array of arrays) {
-        combined = combined.concat(array);
-    }
-    return combined.filter((c, i) => {
-        const firstOccurrenceIndex = combined.findIndex((c2) => comparator(c, c2));
-        return i === firstOccurrenceIndex;
-    });
-}
-function removeDuplicatesFromArray(array) {
-    return array.filter((c, i) => {
-        const firstOccurrenceIndex = array.findIndex((c2) => c2 === c);
-        return i === firstOccurrenceIndex;
-    });
-}
-function insertAtIndex(arr, index, item) {
-    arr.splice(index, 0, item);
-}
-function arrayIsSetAndFilled(arr) {
-    return isArray(arr) && arr !== null && arr !== undefined && arr.length > 0;
-}
-function asArray(value) {
-    if (isValueSet(value)) {
-        if (Array.isArray(value)) {
-            return value;
-        }
-        return [value];
-    }
-    return [];
-}
-function splitArrayByCondition(value, condition) {
-    return value.reduce((acc, cur) => {
-        if (condition(cur)) {
-            acc.push([]);
-        }
-        else {
-            acc[acc.length - 1].push(cur);
-        }
-        return acc;
-    }, [[]]);
-}
-
-function mergeArray(arrA, arrB) {
-    var _a;
-    const arr = new Array(Math.max(arrA.length, arrB.length));
-    for (let i = 0; i < arr.length; i++) {
-        if (typeof arrA[i] === 'object' && typeof arrB[i] === 'object') {
-            arr[i] = deepMerge(arrA[i], arrB[i]);
-        }
-        else {
-            arr[i] = (_a = arrB[i]) !== null && _a !== void 0 ? _a : arrA[i];
-        }
-    }
-    return arr;
-}
-function deepMerge(objA, objB) {
-    if (Array.isArray(objA) || Array.isArray(objB)) {
-        if (Array.isArray(objA) && Array.isArray(objB)) {
-            return mergeArray(objA, objB);
-        }
-        // if a and b differ in type, prefer b.
-        return objB !== null && objB !== void 0 ? objB : objA;
-    }
-    const merged = {};
-    const keys = new Set([
-        ...Object.keys(objA),
-        ...Object.keys(objB),
-    ]);
-    keys.forEach((key) => {
-        const a = objA[key];
-        const b = objB[key];
-        if (typeof a === 'object' && typeof b === 'object') {
-            merged[key] = deepMerge(a, b);
-            return;
-        }
-        // if a and b differ in type, prefer b.
-        merged[key] = (b !== null && b !== void 0 ? b : a);
-    });
-    return merged;
-}
-
-const invalidFieldsSymbol = Symbol('Not all fields are valid');
-class SubFormDirective {
-}
-SubFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SubFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SubFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: SubFormDirective, selector: "klp-sub-form", inputs: { injectInto: "injectInto", at: "at" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SubFormDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: 'klp-sub-form',
-                }]
-        }], propDecorators: { injectInto: [{
-                type: Input
-            }], at: [{
-                type: Input
-            }] } });
-class FormComponent {
-    constructor(parent, subFormPlaceholder) {
-        this.parent = parent;
-        this.subFormPlaceholder = subFormPlaceholder;
-        this.readOnly = false;
-        this.showErrorMessages = true;
-        this.errorMessageLocation = 'belowCaption';
-        // we keep track of what form controls are actually rendered. Only those count when looking at form validation
-        this.activeControls = [];
-    }
-    ngOnInit() {
-        var _a, _b, _c, _d;
-        if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
-            const injectInto = this.subFormPlaceholder.injectInto;
-            const injectAt = this.subFormPlaceholder.at;
-            if (injectInto instanceof UntypedFormArray) {
-                if (typeof injectAt !== 'number') {
-                    throw new Error(`cannot index FormArray with ${typeof injectAt}`);
-                }
-                if ((_a = injectInto.at(injectAt)) === null || _a === void 0 ? void 0 : _a.disabled) {
-                    this.formGroup.disable();
-                }
-                const valueBeforeInject = (_b = injectInto.at(injectAt)) === null || _b === void 0 ? void 0 : _b.value;
-                injectInto.setControl(injectAt, this.formGroup);
-                if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject);
-                }
-            }
-            else if (injectInto instanceof UntypedFormGroup) {
-                if (typeof injectAt !== 'string') {
-                    throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
-                }
-                if ((_c = injectInto.get(injectAt)) === null || _c === void 0 ? void 0 : _c.disabled) {
-                    this.formGroup.disable();
-                }
-                const valueBeforeInject = (_d = injectInto.get(injectAt)) === null || _d === void 0 ? void 0 : _d.value;
-                injectInto.setControl(injectAt, this.formGroup);
-                if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject);
-                }
-            }
-        }
-        if (isValueSet(this.patchValueInterceptor)) {
-            this.addSupportForPatchValueInterceptor();
-        }
-    }
-    ngOnChanges(simpleChanges) {
-        var _a;
-        if (((_a = simpleChanges.readOnly) === null || _a === void 0 ? void 0 : _a.currentValue) === true) {
-            this.activeControls.forEach(e => e.formControl.disable());
-        }
-    }
-    ngOnDestroy() {
-        if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
-            const injectInto = this.subFormPlaceholder.injectInto;
-            const injectAt = this.subFormPlaceholder.at;
-            if (injectInto instanceof UntypedFormArray) {
-                const idx = injectInto.controls.findIndex(e => e === this.formGroup);
-                injectInto.removeAt(idx);
-            }
-            else if (injectInto instanceof UntypedFormGroup) {
-                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) {
-            this.parent.registerControl(formControl, formElement);
-        }
-        if (this.readOnly) {
-            formControl.disable();
-        }
-    }
-    unregisterControl(formControl) {
-        this.activeControls = this.activeControls.filter((e) => e.formControl !== formControl);
-        if (this.parent) {
-            this.parent.unregisterControl(formControl);
-        }
-    }
-    addFormGroupControls(formGroup, result) {
-        Object.values(formGroup.controls).forEach((value) => {
-            if (value instanceof UntypedFormGroup) {
-                this.addFormGroupControls(value, result);
-            }
-            else if (value instanceof UntypedFormArray) {
-                this.addFormArrayControls(value, result);
-            }
-            else if (value instanceof UntypedFormControl) {
-                this.addFormControl(value, result);
-            }
-        });
-    }
-    addFormArrayControls(formArray, result) {
-        formArray.controls.forEach((value) => {
-            if (value instanceof UntypedFormGroup) {
-                this.addFormGroupControls(value, result);
-            }
-            else if (value instanceof UntypedFormArray) {
-                this.addFormArrayControls(value, result);
-            }
-            else if (value instanceof UntypedFormControl) {
-                this.addFormControl(value, result);
-            }
-        });
-    }
-    getAllFormControls() {
-        const result = [];
-        this.addFormGroupControls(this.formGroup, result);
-        return result;
-    }
-    addFormControl(control, result) {
-        result.push(control);
-    }
-    disableInactiveFormControl(control) {
-        if (!this.activeControls.some((e) => e.formControl === control)) {
-            control.disable();
-        }
-    }
-    trySubmit() {
-        var _a, _b;
-        this.formGroup.markAllAsTouched();
-        const allControls = this.getAllFormControls();
-        const originalDisabledStates = allControls.map(e => {
-            return { control: e, disabled: e.disabled };
-        });
-        allControls.forEach(e => this.disableInactiveFormControl(e));
-        allControls.forEach(e => e.updateValueAndValidity());
-        const formGroupValue = this.formGroup.value;
-        const renderedAndEnabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, true);
-        const renderedButDisabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, false);
-        if (this.formGroup.invalid) {
-            (_b = (_a = this.activeControls.find((e) => !e.formControl.valid)) === null || _a === void 0 ? void 0 : _a.formElement) === null || _b === void 0 ? void 0 : _b.scrollTo();
-            this.setDisabledStatesForAllControls(originalDisabledStates);
-            return Promise.reject(invalidFieldsSymbol);
-        }
-        else {
-            this.setDisabledStatesForAllControls(originalDisabledStates);
-            const renderedValues = deepMerge(renderedAndEnabledValues, renderedButDisabledValues);
-            return Promise.resolve([formGroupValue, renderedValues]);
-        }
-    }
-    getRenderedFieldValuesFormGroup(formGroup, enabled, valueObject = {}) {
-        Object.entries(formGroup.controls).forEach(([name, control]) => {
-            if (control instanceof FormControl && control.enabled === enabled && this.activeControls.some(e => e.formControl === control)) {
-                valueObject[name] = control.value;
-            }
-            else if (control instanceof FormArray) {
-                valueObject[name] = [];
-                this.getRenderedFieldValuesFormArray(control, enabled, valueObject[name]);
-            }
-            else if (control instanceof FormGroup) {
-                valueObject[name] = {};
-                this.getRenderedFieldValuesFormGroup(control, enabled, valueObject[name]);
-            }
-        });
-        return valueObject;
-    }
-    getRenderedFieldValuesFormArray(formArray, enabled, valueArray) {
-        formArray.controls.forEach((control) => {
-            if (control instanceof FormControl && control.enabled === enabled && this.activeControls.some(e => e.formControl === control)) {
-                valueArray.push(control.value);
-            }
-            else if (control instanceof FormArray) {
-                const newArray = [];
-                valueArray.push(newArray);
-                this.getRenderedFieldValuesFormArray(control, enabled, newArray);
-            }
-            else if (control instanceof FormGroup) {
-                const newObject = {};
-                valueArray.push(newObject);
-                this.getRenderedFieldValuesFormGroup(control, enabled, newObject);
-            }
-        });
-    }
-    setDisabledStatesForAllControls(originalDisabledStates) {
-        originalDisabledStates.forEach((e) => {
-            if (e.disabled) {
-                e.control.disable();
-            }
-            else {
-                e.control.enable();
-            }
-        });
-    }
-}
-FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormComponent, deps: [{ token: FormComponent, optional: true, skipSelf: true }, { token: SubFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", patchValueInterceptor: "patchValueInterceptor" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form', template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormComponent, decorators: [{
-                        type: SkipSelf
-                    }, {
-                        type: Optional
-                    }] }, { type: SubFormDirective, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { readOnly: [{
-                type: Input
-            }], showErrorMessages: [{
-                type: Input
-            }], errorMessageLocation: [{
-                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',
-};
-class FormElementComponent {
-    constructor(parent, customMessages) {
-        this.parent = parent;
-        this.customMessages = customMessages;
-        this.direction = 'horizontal';
-        this.captionSpacing = 'percentages';
-        this.spaceDistribution = '40-60';
-        this.swapInputAndCaption = false;
-        this.errorMessages = DEFAULT_ERROR_MESSAGES;
-        this.customErrorHandlers = [];
-    }
-    shouldShowErrorMessages() {
-        var _a;
-        return ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.showErrorMessages) !== false;
-    }
-    substituteParameters(message, parameters) {
-        return Object.keys(parameters).reduce((msg, key) => {
-            return msg.replace(`%${key}%`, parameters[key]);
-        }, message);
-    }
-    registerControl(formControl, input = null) {
-        this.attachedControl = formControl;
-        this.parent.registerControl(formControl, this);
-        this.input = input;
-    }
-    unregisterControl(formControl) {
-        this.attachedControl = null;
-        this.parent.unregisterControl(formControl);
-    }
-    getAttachedControl() {
-        return this.attachedControl;
-    }
-    registerErrorHandler(error, templateRef) {
-        this.customErrorHandlers.push({ error, templateRef });
-    }
-    registerCaption(templateRef) {
-        this.captionRef = templateRef;
-    }
-    getErrorToShow() {
-        var _a, _b, _c;
-        if (((_a = this.attachedControl) === null || _a === void 0 ? void 0 : _a.touched) === true && ((_b = this.attachedControl) === null || _b === void 0 ? void 0 : _b.errors)) {
-            return Object.keys((_c = this.attachedControl) === null || _c === void 0 ? void 0 : _c.errors)[0];
-        }
-        return null;
-    }
-    getCustomErrorHandler(error) {
-        return this.customErrorHandlers.find((e) => e.error === error);
-    }
-    showDefaultError(error) {
-        return this.getErrorToShow() === error && !this.customErrorHandlers.some((e) => e.error === error);
-    }
-    getScrollableParent(node) {
-        if (node == null) {
-            return null;
-        }
-        if (node.scrollHeight > node.clientHeight) {
-            return node;
-        }
-        else {
-            return this.getScrollableParent(node.parentNode);
-        }
-    }
-    scrollTo() {
-        var _a;
-        this.internalComponentRef.nativeElement.scrollIntoView(true);
-        // to give some breathing room, we scroll 100px more to the top
-        (_a = this.getScrollableParent(this.internalComponentRef.nativeElement)) === null || _a === void 0 ? void 0 : _a.scrollBy(0, -100);
-    }
-    isRequired() {
-        if (isValueSet(this.input)) {
-            return this.input.hasValidator('required');
-        }
-        return false;
-    }
-    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];
-    }
-    getErrorLocation() {
-        var _a, _b;
-        return (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.errorMessageLocation) !== null && _b !== void 0 ? _b : 'belowCaption';
-    }
-}
-FormElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, host: true, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption" }, viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }], ngImport: i0, template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\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\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\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\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66'\n\t}\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.percentageSpacing.d34-66{flex-basis:34%}.caption.hasErrors{color:#ff8000}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:2.5rem}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden}.caption.withErrorRightOfCaption .rightOfCaptionError *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.inputContainer.percentageSpacing.d34-66{flex-basis:66%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}.errorContainer.hasCaption.d34-66{margin-left:34%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-element', template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\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\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\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\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66'\n\t}\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.percentageSpacing.d34-66{flex-basis:34%}.caption.hasErrors{color:#ff8000}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:2.5rem}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden}.caption.withErrorRightOfCaption .rightOfCaptionError *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.inputContainer.percentageSpacing.d34-66{flex-basis:66%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}.errorContainer.hasCaption.d34-66{margin-left:34%}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [FORM_ERROR_MESSAGES]
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { caption: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], captionSpacing: [{
-                type: Input
-            }], spaceDistribution: [{
-                type: Input
-            }], swapInputAndCaption: [{
-                type: Input
-            }], internalComponentRef: [{
-                type: ViewChild,
-                args: ['internalComponentRef']
-            }] } });
-
-/**
- * This component is a base in order to create a component that supports ngModel.
- * Some important things to know about it:
- *
- * innerValue = your own inner state, which you should use to store the current state of what ngModel should be.
- * writeValue() = called by angular, when ngModel is changed from OUTSIDE of the component. Feel free to patch this method if you need inner logic to happen when ngModel is altered from the outside. Always remember to also call the super.writeValue if you do!
- * setInnerValueAndNotify() = call this when you want your ngModel to be updated from INSIDE of your component, and provide it to the OUTSIDE.
- * ngOnInit() = Used to support the angular reactive forms framework. If you use ngOnInit in your own component (which happens fairly often) you must not forget to call the super.ngOnInit() method.
- */
-class ValueAccessorBase {
-    constructor(parent, controlContainer) {
-        this.parent = parent;
-        this.controlContainer = controlContainer;
-        this.changed = new Array();
-        this.touched = new Array();
-        this.prevValue = null;
-        this.disabled = false;
-        // we support both providing just the formControlName and the full formControl
-        this.formControlName = null;
-        this.formControl = null;
-        this.onTouch = new EventEmitter();
-        this.focus = () => {
-            var _a, _b, _c;
-            if (isValueSet((_a = this.nativeInputRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
-                (_c = (_b = this.nativeInputRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.focus();
-            }
-            else {
-                throw new Error('the focus() method is not implemented in this element!');
-            }
-        };
-    }
-    ngOnInit() {
-        var _a, _b, _c;
-        if (this.formControl) {
-            this.attachedFormControl = this.formControl;
-        }
-        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.`);
-            }
-        }
-        if (this.attachedFormControl) {
-            this.disabled = this.attachedFormControl.disabled;
-            this.attachedFormControl.statusChanges.subscribe(() => {
-                this.disabled = this.attachedFormControl.disabled;
-            });
-            (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl, this);
-        }
-    }
-    isInErrorState() {
-        return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
-    }
-    ngOnDestroy() {
-        var _a;
-        if (this.attachedFormControl) {
-            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.unregisterControl(this.attachedFormControl);
-        }
-    }
-    touch() {
-        this.touched.forEach((f) => f());
-    }
-    writeValue(value) {
-        this.innerValue = value;
-        this.prevValue = value;
-    }
-    registerOnChange(fn) {
-        this.changed.push(fn);
-    }
-    registerOnTouched(fn) {
-        this.touched.push(fn);
-    }
-    setInnerValueAndNotify(value) {
-        const actuallySetValue = (valueToSet) => {
-            this.innerValue = valueToSet;
-            this.prevValue = valueToSet;
-            this.changed.forEach((fn) => fn(valueToSet));
-        };
-        if (isValueSet(this.innerValueChangeInterceptor)) {
-            this.latestInnerValueChangedInterceptorPromise = this.innerValueChangeInterceptor(this.prevValue, value);
-            const myPromise = this.latestInnerValueChangedInterceptorPromise;
-            this.latestInnerValueChangedInterceptorPromise.then(() => {
-                if (this.latestInnerValueChangedInterceptorPromise === myPromise) {
-                    actuallySetValue(value);
-                }
-                else {
-                    // ignore outdated promises
-                }
-            }).catch(() => {
-                if (this.latestInnerValueChangedInterceptorPromise === myPromise) {
-                    actuallySetValue(this.prevValue);
-                }
-                else {
-                    // ignore outdated promises
-                }
-            });
-        }
-        else {
-            actuallySetValue(value);
-        }
-    }
-    resetToNull() {
-        this.setInnerValueAndNotify(null);
-    }
-    hasValidator(validatorName) {
-        var _a, _b, _c;
-        const validators = Object.keys((_c = (_b = (_a = this.attachedFormControl) === null || _a === void 0 ? void 0 : _a.validator) === null || _b === void 0 ? void 0 : _b.call(_a, {})) !== null && _c !== void 0 ? _c : {});
-        if (arrayIsSetAndFilled(validators)) {
-            return validators.includes(validatorName);
-        }
-        return false;
-    }
-}
-ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ValueAccessorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ValueAccessorBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '',
-                    template: '',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: i2.ControlContainer, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { disabled: [{
-                type: Input
-            }], innerValueChangeInterceptor: [{
-                type: Input
-            }], formControlName: [{
-                type: Input
-            }], formControl: [{
-                type: Input
-            }], onTouch: [{
-                type: Output
-            }], nativeInputRef: [{
-                type: ViewChild,
-                args: ['nativeInputRef']
-            }] } });
-
-class LoadingIndicatorComponent {
-    constructor() {
-        this.variant = '3dots';
-        this.size = 'medium';
-    }
-}
-LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: LoadingIndicatorComponent, selector: "klp-form-loading-indicator", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<div class=\"threeDots\" [ngClass]=\"[size]\" *ngIf=\"variant === '3dots'\">\n\t<div></div>\n\t<div></div>\n\t<div></div>\n\t<div></div>\n</div>\n\n<div class=\"spinner\" [ngClass]=\"[size]\" *ngIf=\"variant === 'spinner'\">\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n\t\t<circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n\t\t<circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n\t</svg>\n</div>\n\n<div class=\"textInput\" *ngIf=\"variant === 'textInput'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n</div>\n\n<div class=\"picker\" *ngIf=\"variant === 'picker'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n\t<div class=\"chevronDown\"></div>\n</div>\n", styles: [":host{display:block}.threeDots{display:block;position:relative;width:calc(4 * var(--base));height:var(--base)}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#27bb5f;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker{position:relative}.picker .chevronDown{position:absolute;top:18px;right:23px;width:0;height:0;border-top:5px solid #888da8;border-left:5px solid transparent;border-right:5px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-loading-indicator', template: "<div class=\"threeDots\" [ngClass]=\"[size]\" *ngIf=\"variant === '3dots'\">\n\t<div></div>\n\t<div></div>\n\t<div></div>\n\t<div></div>\n</div>\n\n<div class=\"spinner\" [ngClass]=\"[size]\" *ngIf=\"variant === 'spinner'\">\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n\t\t<circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n\t\t<circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n\t</svg>\n</div>\n\n<div class=\"textInput\" *ngIf=\"variant === 'textInput'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n</div>\n\n<div class=\"picker\" *ngIf=\"variant === 'picker'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n\t<div class=\"chevronDown\"></div>\n</div>\n", styles: [":host{display:block}.threeDots{display:block;position:relative;width:calc(4 * var(--base));height:var(--base)}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#27bb5f;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker{position:relative}.picker .chevronDown{position:absolute;top:18px;right:23px;width:0;height:0;border-top:5px solid #888da8;border-left:5px solid transparent;border-right:5px solid transparent}\n"] }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class ButtonComponent {
-    constructor() {
-        this.variant = 'white';
-        this.size = 'medium';
-        this.fullWidth = false;
-        this.hasBorder = true;
-        this.disabled = false;
-        this.isLoading = false;
-        this.type = 'button';
-    }
-    get _() {
-        return this.fullWidth;
-    }
-    onClick(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.disabled) {
-                event.stopPropagation();
-                return;
-            }
-            if (isValueSet(this.clickCallback)) {
-                this.isLoading = true;
-                yield this.clickCallback(event).finally(() => {
-                    this.isLoading = false;
-                });
-            }
-        });
-    }
-}
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ButtonComponent, selector: "klp-form-button", inputs: { variant: "variant", size: "size", fullWidth: "fullWidth", hasBorder: "hasBorder", disabled: "disabled", isLoading: "isLoading", type: "type", clickCallback: "clickCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n\t[type]=\"type\"\n\t(click)=\"onClick($event)\"\n>\n\t<div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"loadingSpinnerContainer\" *ngIf=\"isLoading\">\n\t\t<klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n\t</div>\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #e6ecf5;border-radius:5px;color:#888da8;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#515365;background-color:#fff;border-color:#d4deee;font-weight:500}.white:hover,.white:active{color:#515365;background-color:#edf2f8;border-color:#edf2f8}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{color:#fff;background-color:#2bd06a;border-color:#2bd06a}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{color:#fff;background-color:#2bd06a;border-color:#2bd06a}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{color:#27bb5f;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#888da8;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "klp-form-loading-indicator", inputs: ["variant", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-button', template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n\t[type]=\"type\"\n\t(click)=\"onClick($event)\"\n>\n\t<div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"loadingSpinnerContainer\" *ngIf=\"isLoading\">\n\t\t<klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n\t</div>\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #e6ecf5;border-radius:5px;color:#888da8;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#515365;background-color:#fff;border-color:#d4deee;font-weight:500}.white:hover,.white:active{color:#515365;background-color:#edf2f8;border-color:#edf2f8}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{color:#fff;background-color:#2bd06a;border-color:#2bd06a}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{color:#fff;background-color:#2bd06a;border-color:#2bd06a}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{color:#27bb5f;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#888da8;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"] }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], hasBorder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], clickCallback: [{
-                type: Input
-            }], _: [{
-                type: HostBinding,
-                args: ['class._fullWidth']
-            }] } });
-
-class CheckboxComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.renderUndefinedAsIndeterminate = false;
-    }
-}
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CheckboxComponent, selector: "klp-form-checkbox", inputs: { caption: "caption", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t#nativeInputRef\n\t\t/>\n    <div class=\"checkboxVisual\">\n      <svg *ngIf=\"innerValue === true\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n      </svg>\n\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path d=\"m0.5 2.11665 3.2333 0\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n\t\t\t</svg>\n    </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n", styles: [":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{cursor:pointer;font-weight:700;color:#888da8}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:22px;height:22px;cursor:pointer}.checkboxVisual{pointer-events:none;color:#27bb5f;padding:.125rem;width:22px;height:22px;display:inline-block;border:2px solid #e6ecf5;border-radius:3px;margin-right:10px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t#nativeInputRef\n\t\t/>\n    <div class=\"checkboxVisual\">\n      <svg *ngIf=\"innerValue === true\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n      </svg>\n\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path d=\"m0.5 2.11665 3.2333 0\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n\t\t\t</svg>\n    </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n", styles: [":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{cursor:pointer;font-weight:700;color:#888da8}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:22px;height:22px;cursor:pointer}.checkboxVisual{pointer-events:none;color:#27bb5f;padding:.125rem;width:22px;height:22px;display:inline-block;border:2px solid #e6ecf5;border-radius:3px;margin-right:10px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}\n"] }]
-        }], propDecorators: { caption: [{
-                type: Input
-            }], renderUndefinedAsIndeterminate: [{
-                type: Input
-            }] } });
-
-class EmailInputComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.placeholder = '';
-    }
-}
-EmailInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-EmailInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EmailInputComponent, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EmailInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], template: "<input\n\ttype=\"email\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }] } });
-
-class NumberInputComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.parseNumber = false;
-    }
-    setInnerValueAndNotify(value) {
-        if (this.parseNumber && typeof value === "string") {
-            super.setInnerValueAndNotify(Number(value));
-        }
-        else {
-            super.setInnerValueAndNotify(value);
-        }
-    }
-}
-NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NumberInputComponent, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NumberInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], parseNumber: [{
-                type: Input
-            }] } });
-
-class PasswordFieldComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.placeholder = 'Password';
-    }
-}
-PasswordFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PasswordFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PasswordFieldComponent, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, 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\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PasswordFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], 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\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.showErrors{border-color:#ff8000}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }] } });
-
-const SELECT_TRANSLATIONS = new InjectionToken('klp.form.select.translations');
-class KlpSelectOptionTemplateDirective {
-}
-KlpSelectOptionTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KlpSelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-KlpSelectOptionTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: KlpSelectOptionTemplateDirective, selector: "[klpSelectOptionTpl]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: KlpSelectOptionTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[klpSelectOptionTpl]' }]
-        }] });
-class SelectComponent extends ValueAccessorBase {
-    constructor(parent, controlContainer, translations, elRef) {
-        super(parent, controlContainer);
-        this.parent = parent;
-        this.controlContainer = controlContainer;
-        this.translations = translations;
-        this.elRef = elRef;
-        this.orientation = 'horizontal';
-        this.multiple = false;
-        this.multipleDisplayedAsAmount = false;
-        this.clearable = true;
-        this.truncateOptions = true;
-        this.onSearch = new EventEmitter();
-        this.onEndReached = new EventEmitter();
-        this.onOpened = new EventEmitter();
-        this.onBlur = new EventEmitter();
-        this.onClear = new EventEmitter();
-        this.lastItemIndexReached = -1;
-        this.focus = () => {
-            this.ngSelect.focus();
-        };
-    }
-    ngOnChanges(changes) {
-        if (isValueSet(changes.options)) {
-            this.lastItemIndexReached = -1;
-        }
-    }
-    getDefaultTranslation(key) {
-        switch (key) {
-            case 'placeholder':
-                return () => 'Pick an option';
-            case 'amountSelected':
-                return (amount) => `${amount} selected`;
-        }
-    }
-    getTranslation(key, params = null) {
-        var _a, _b, _c;
-        if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
-            return this.placeholder;
-        }
-        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);
-    }
-    onScroll(lastItemIndex) {
-        var _a, _b, _c, _d;
-        const visibleItems = (_d = (_c = (_b = (_a = this.ngSelect) === null || _a === void 0 ? void 0 : _a.itemsList) === null || _b === void 0 ? void 0 : _b.filteredItems) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
-        if (this.lastItemIndexReached < lastItemIndex && lastItemIndex === visibleItems) {
-            this.onEndReached.emit();
-        }
-        this.lastItemIndexReached = Math.max(lastItemIndex, this.lastItemIndexReached);
-    }
-    searchQueryChanged(searchQuery) {
-        this.onSearch.emit(searchQuery);
-    }
-    onOpen() {
-        // waiting for the thing to render until we fire the event
-        setTimeout(() => {
-            this.onOpened.emit();
-            if (this.truncateOptions === false) {
-                const widths = Array.from(this.elRef.nativeElement.querySelectorAll('.ng-option div')).map((e) => e.scrollWidth);
-                const maxWidth = Math.max(...widths);
-                const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
-                dropdownPanel.style.width = `${maxWidth + 40}px`;
-            }
-        });
-    }
-}
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: SELECT_TRANSLATIONS, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", dropdownPosition: "dropdownPosition", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onBlur: "onBlur", onClear: "onClear" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\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(), verticalOrientation: orientation === 'vertical'}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[dropdownPosition]=\"dropdownPosition\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\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", styles: [":host{display:block}ng-select.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{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}: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-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-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-placeholder,:host ::ng-deep .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container{display:flex;flex-direction:row;border:1px solid #ccc;min-height:42px;align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;font-size:1rem;font-size:14px;line-height:1.5;margin:0;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 #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}: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{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#e7faee;border-radius:2px;border:1px solid #93e8b3;display:flex;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;padding:0 5px;overflow:hidden;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{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}: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 #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-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{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}: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:#000000de;padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:#333;background-color:#e7faee}: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{padding-right:5px;font-size:80%;font-weight:400}: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{top:9px;color:#888da8}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{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}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\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(), verticalOrientation: orientation === 'vertical'}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[dropdownPosition]=\"dropdownPosition\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\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", styles: [":host{display:block}ng-select.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{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}: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-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-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-placeholder,:host ::ng-deep .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container{display:flex;flex-direction:row;border:1px solid #ccc;min-height:42px;align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;font-size:1rem;font-size:14px;line-height:1.5;margin:0;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 #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}: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{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#e7faee;border-radius:2px;border:1px solid #93e8b3;display:flex;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;padding:0 5px;overflow:hidden;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{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}: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 #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-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{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}: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:#000000de;padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:#333;background-color:#e7faee}: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{padding-right:5px;font-size:80%;font-weight:400}: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{top:9px;color:#888da8}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{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}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Host
-                    }] }, { type: i2.ControlContainer, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Host
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [SELECT_TRANSLATIONS]
-                    }, {
-                        type: Optional
-                    }] }, { type: i0.ElementRef }];
-    }, propDecorators: { placeholder: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], multipleDisplayedAsAmount: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], truncateOptions: [{
-                type: Input
-            }], dropdownPosition: [{
-                type: Input
-            }], customSearchFn: [{
-                type: Input
-            }], footerElement: [{
-                type: Input
-            }], onSearch: [{
-                type: Output
-            }], onEndReached: [{
-                type: Output
-            }], onOpened: [{
-                type: Output
-            }], onBlur: [{
-                type: Output
-            }], onClear: [{
-                type: Output
-            }], ngSelect: [{
-                type: ViewChild,
-                args: ['ngSelect']
-            }], customOptionTpl: [{
-                type: ContentChild,
-                args: [KlpSelectOptionTemplateDirective, { read: TemplateRef }]
-            }] } });
-
-class SelectFooterComponent {
-}
-SelectFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SelectFooterComponent, selector: "klp-select-footer", inputs: { prefix: "prefix", text: "text" }, ngImport: i0, 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}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: 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}\n"] }]
-        }], 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SortableItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SortableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize", useCustomScroll: "useCustomScroll" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableItemsComponent, multi: true }], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, 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", styles: [":host{display:block}.itemsContainer{border:1px solid #e6ecf5;border-radius:5px;padding:0;margin-bottom:0}.sortableItem{list-style:none;border-top:1px solid #e6ecf5;cursor:grab}.sortableItem:hover{background:#f8f9fa}.sortableItem:first-child{border-top:none}.largeSortableItem{padding:15px}.smallSortableItem{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions", "sortablejsCloneFunction"], outputs: ["sortablejsInit"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SortableItemsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-sortable-items', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableItemsComponent, multi: true }], 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", styles: [":host{display:block}.itemsContainer{border:1px solid #e6ecf5;border-radius:5px;padding:0;margin-bottom:0}.sortableItem{list-style:none;border-top:1px solid #e6ecf5;cursor:grab}.sortableItem:hover{background:#f8f9fa}.sortableItem:first-child{border-top:none}.largeSortableItem{padding:15px}.smallSortableItem{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"] }]
-        }], propDecorators: { template: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], sortableItemSize: [{
-                type: Input
-            }], useCustomScroll: [{
-                type: Input
-            }] } });
-
-class TextInputComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.type = 'text';
-        this.clearable = false;
-        this.onBlur = new EventEmitter();
-    }
-}
-TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, 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(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], 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(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], onBlur: [{
-                type: Output
-            }] } });
-
-class ToggleComponent extends ValueAccessorBase {
-}
-ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ToggleComponent, selector: "klp-form-toggle", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
-        }] });
-
-class FormCaptionComponent {
-    constructor(parent) {
-        this.parent = parent;
-    }
-    ngOnInit() {
-        // this is being run next cycle, because we dont want to fail if the order of components is as follows:
-        // <app-form-error />
-        // <some-input />
-        // That would fail, because the logic of the form error is run first, and at that moment, the `some-input` isnt registered yet
-        setTimeout(() => {
-            this.parent.registerCaption(this.contentRef);
-        });
-    }
-}
-FormCaptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormCaptionComponent, deps: [{ token: FormElementComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormCaptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormCaptionComponent, selector: "klp-form-caption", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormCaptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-caption', template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { contentRef: [{
-                type: ViewChild,
-                args: ['contentRef']
-            }] } });
-
-class FormErrorComponent {
-    constructor(parent) {
-        this.parent = parent;
-        this.showError = false;
-    }
-    ngOnInit() {
-        // this is being run next cycle, because we dont want to fail if the order of components is as follows:
-        // <app-form-error />
-        // <some-input />
-        // That would fail, because the logic of the form error is run first, and at that moment, the `some-input` isnt registered yet
-        setTimeout(() => {
-            const attachedControl = this.parent.getAttachedControl();
-            this.parent.registerErrorHandler(this.error, this.contentRef);
-            if (isNullOrUndefined(attachedControl)) {
-                throw new Error('You added a Form Error component without an attached Form Control');
-            }
-        });
-    }
-}
-FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormErrorComponent, deps: [{ token: FormElementComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormErrorComponent, selector: "klp-form-error", inputs: { error: "error" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-error', template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { error: [{
-                type: Input
-            }], contentRef: [{
-                type: ViewChild,
-                args: ['contentRef']
-            }] } });
-
-class FormSubmitButtonComponent {
-    constructor(parentForm) {
-        this.parentForm = parentForm;
-        this.isLoading = false;
-        this.fullWidth = false;
-        this.variant = 'greenFilled';
-        this.before = () => Promise.resolve();
-        this.after = () => Promise.resolve();
-    }
-    get _() {
-        return this.fullWidth;
-    }
-    submitForm() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                yield this.before();
-            }
-            catch (e) {
-                return;
-            }
-            this.parentForm
-                .trySubmit()
-                .then(([renderedAndEnabledValues, renderedValues]) => {
-                this.isLoading = true;
-                const submitCallbackResult = this.submitCallback(renderedAndEnabledValues, renderedValues);
-                if (isNullOrUndefined(submitCallbackResult)) {
-                    throw new Error('No promise is returned in your submit function.');
-                }
-                return submitCallbackResult.then(() => (this.isLoading = false)).catch((e) => {
-                    this.isLoading = false;
-                    throw e;
-                });
-            })
-                .catch((e) => {
-                if (e === invalidFieldsSymbol) {
-                    return; // swallow the error, the framework will scroll to the field that needs attention
-                }
-                throw e;
-            });
-            yield this.after();
-        });
-    }
-}
-FormSubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, deps: [{ token: FormComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormSubmitButtonComponent, selector: "klp-form-submit-button", inputs: { isLoading: "isLoading", fullWidth: "fullWidth", variant: "variant", before: "before", after: "after", submitCallback: "submitCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-submit-button', template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { isLoading: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], before: [{
-                type: Input
-            }], after: [{
-                type: Input
-            }], submitCallback: [{
-                type: Input
-            }], _: [{
-                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 the outside world passes a value in the wrong format, it should be corrected
-        if (this.multiple && !Array.isArray(value)) {
-            const correctedVal = [value].filter(isValueSet);
-            super.writeValue(correctedVal);
-            super.setInnerValueAndNotify(correctedVal);
-        }
-        else if (!this.multiple && Array.isArray(value)) {
-            const correctedVal = value[0];
-            super.writeValue(correctedVal);
-            super.setInnerValueAndNotify(correctedVal);
-        }
-        else {
-            super.writeValue(value);
-        }
-    }
-    setInnerValueAndNotify(value) {
-        if (this.multiple && !Array.isArray(value)) {
-            super.setInnerValueAndNotify([value].filter(isValueSet));
-        }
-        else if (!this.multiple && Array.isArray(value)) {
-            super.setInnerValueAndNotify(value[0]);
-        }
-        else {
-            super.setInnerValueAndNotify(value);
-        }
-    }
-}
-MultipleValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MultipleValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultipleValueAccessorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: MultipleValueAccessorBase, selector: "ng-component", inputs: { multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MultipleValueAccessorBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '',
-                    template: '',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: i2.ControlContainer, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { multiple: [{
-                type: Input
-            }] } });
-
-const invalidDateKey = '--invalid_date--';
-function dateValidator(control) {
-    const invalid = control.value === invalidDateKey;
-    return invalid ? { date: control.value } : null;
-}
-
-const KLP_DATE_FORMATS = new InjectionToken('klp.form.date.formats');
-const DATE_TIME_PICKER_TRANSLATIONS = new InjectionToken('klp.form.dateTime.translations');
-const DATE_PICKER_LOCALE = new InjectionToken('klp.form.dateTime.locale');
-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 DateTimePickerComponent extends MultipleValueAccessorBase {
-    constructor(parent, controlContainer, translations, datePickerLocale, dateAdapter, cdr) {
-        super(parent, controlContainer);
-        this.parent = parent;
-        this.controlContainer = controlContainer;
-        this.translations = translations;
-        this.datePickerLocale = datePickerLocale;
-        this.dateAdapter = dateAdapter;
-        this.cdr = cdr;
-        this.minDate = undefined;
-        this.maxDate = undefined;
-        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.openPickerOnDate = null;
-        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) => isSameDay(e, d)) ? 'selected' : '';
-            }
-            return '';
-        };
-        this.filterDates = (e) => {
-            if (this.disabled) {
-                return false;
-            }
-            return true;
-        };
-        if (isValueSet(datePickerLocale)) {
-            dateAdapter.setLocale(datePickerLocale());
-        }
-    }
-    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.determineMinAndMaxDates();
-        }
-        if (changes.maxDate) {
-            this.determineMinAndMaxDates();
-        }
-    }
-    setMinDate(minDate) {
-        if (minDate) {
-            this.minDateStartOfDay = new Date(minDate);
-            this.minDateStartOfDay.setHours(0, 0, 0, 0);
-        }
-        else {
-            this.minDateStartOfDay = undefined;
-        }
-    }
-    setMaxDate(maxDate) {
-        if (maxDate) {
-            this.maxDateEndOfDay = new Date(maxDate);
-            this.maxDateEndOfDay.setHours(23, 59, 59, 999);
-        }
-        else {
-            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 date = event.value;
-        if (this.multiple) {
-            this.datePickerRef.close = () => {
-            };
-            if (this.selectedDates.some((e) => isSameDay(e, date))) {
-                this.selectedDates = this.selectedDates.filter((e) => !isSameDay(e, date));
-            }
-            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.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.setMaxDate(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);
-        if (Array.isArray(value)) {
-            this.selectedDates = value;
-            this.determineMinAndMaxDates();
-            this.valueForMaterialDatePicker = null;
-            if (arrayIsSetAndFilled(value)) {
-                this.openPickerOnDate = this.selectedDates[0];
-            }
-        }
-        else {
-            this.valueForMaterialDatePicker = value === invalidDateKey ? null : value;
-            if (value instanceof Date) {
-                this.hours = String(value.getHours());
-                this.minutes = String(value.getMinutes());
-                this.formatTime();
-                this.openPickerOnDate = value;
-            }
-            else {
-                this.hours = '';
-                this.minutes = '';
-                this.openPickerOnDate = null;
-                this.selectedDates = [];
-            }
-        }
-    }
-    // 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() {
-        if (this.datePickerRef.opened) {
-            // if the user is typing instead of using the picker, close it.
-            this.datePickerRef.close();
-        }
-        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 () => '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 '';
-        }
-        if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
-            return this.placeholder;
-        }
-        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);
-    }
-}
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_TIME_PICKER_TRANSLATIONS, optional: true }, { token: DATE_PICKER_LOCALE, optional: true }, { token: i3.DateAdapter }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", invalidTimeAsMidnight: "invalidTimeAsMidnight" }, providers: [
-        { provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
-        {
-            provide: MAT_DATE_FORMATS,
-            deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
-            useFactory: matDateFormatsFactory,
-        },
-    ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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\t[startAt]=\"openPickerOnDate\"\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", styles: [":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep mat-form-field.mat-focused .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{display:flex;position:relative;border-radius:2px;color:#888da8}.componentContainer .placeholderForMultipleSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#ffffff;color:#7b7b7b;border:1px solid #e6ecf5;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #e6ecf5;background:#f9f9f9}.componentContainer .dateContainer{flex:1 1 auto;padding:6px;background:#ffffff;border:1px solid #e6ecf5}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer{flex:0 0 auto;margin-left:1.25rem;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer .timeContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer input{color:#888da8;text-align:center;width:20px;padding:0;border:none}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DateTimePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-date-time-picker', providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
-                        {
-                            provide: MAT_DATE_FORMATS,
-                            deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
-                            useFactory: matDateFormatsFactory,
-                        },
-                    ], 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\t[startAt]=\"openPickerOnDate\"\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", styles: [":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep mat-form-field.mat-focused .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{display:flex;position:relative;border-radius:2px;color:#888da8}.componentContainer .placeholderForMultipleSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#ffffff;color:#7b7b7b;border:1px solid #e6ecf5;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #e6ecf5;background:#f9f9f9}.componentContainer .dateContainer{flex:1 1 auto;padding:6px;background:#ffffff;border:1px solid #e6ecf5}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer{flex:0 0 auto;margin-left:1.25rem;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer .timeContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer input{color:#888da8;text-align:center;width:20px;padding:0;border:none}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: i2.ControlContainer, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DATE_TIME_PICKER_TRANSLATIONS]
-                    }, {
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DATE_PICKER_LOCALE]
-                    }, {
-                        type: Optional
-                    }] }, { type: i3.DateAdapter }, { type: i0.ChangeDetectorRef }];
-    }, 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']
-            }] } });
-
-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 = this.multiple ? [] : null;
-            super.writeValue(this.multiple ? [] : 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 = this.multiple ? [] : null;
-            this.setInnerValueAndNotify(this.multiple ? [] : 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 () => 'Select date';
-        }
-    }
-    getTranslation(key, params = null) {
-        var _a, _b, _c;
-        if (key === 'placeholder' && this.multiple) {
-            return '';
-        }
-        if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
-            return this.placeholder;
-        }
-        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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DatePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_PICKER_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DatePickerComponent, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], usesInheritance: true, ngImport: i0, 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", styles: [":host{display:block}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "invalidTimeAsMidnight"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], 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", styles: [":host{display:block}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: FormElementComponent, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: i2.ControlContainer, decorators: [{
-                        type: Host
-                    }, {
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DATE_PICKER_TRANSLATIONS]
-                    }, {
-                        type: Optional
-                    }] }];
-    }, propDecorators: { minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], sameMonthOnly: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }] } });
-
-// material.module.ts
-class MaterialModule {
-}
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: MaterialModule, imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule], exports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MaterialModule, providers: [MatDatepickerModule], imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule],
-                    exports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule],
-                    providers: [MatDatepickerModule],
-                }]
-        }] });
-
-class FileInputComponent extends MultipleValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.isLoading = false;
-        this.clearable = false;
-        this.onlyShowUploadButton = false;
-        this.useFullParentSize = false;
-    }
-    onChange(files) {
-        const result = [];
-        for (let i = 0; i < files.length; i++) {
-            result.push(files.item(i));
-        }
-        this.setInnerValueAndNotify(result);
-        // to make sure we can select the same file again
-        this.nativeInputRef.nativeElement.value = null;
-    }
-    getFileNames() {
-        if (Array.isArray(this.innerValue)) {
-            return this.innerValue.map(e => e.name).join(', ');
-        }
-        else if (this.innerValue instanceof File) {
-            return this.innerValue.name;
-        }
-        return null;
-    }
-    shouldShowClearButton() {
-        if (this.onlyShowUploadButton) {
-            return false;
-        }
-        if (this.multiple) {
-            if (arrayIsSetAndFilled(this.innerValue)) {
-                return true;
-            }
-            return false;
-        }
-        if (isValueSet(this.innerValue)) {
-            return true;
-        }
-        return false;
-    }
-    uploadFileClicked() {
-        this.nativeInputRef.nativeElement.click();
-    }
-}
-FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"] }]
-        }], propDecorators: { isLoading: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], onlyShowUploadButton: [{
-                type: Input
-            }], useFullParentSize: [{
-                type: Input
-            }], nativeInputRef: [{
-                type: ViewChild,
-                args: ['nativeInputRef']
-            }] } });
-
-class SortableGroupedItemsComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.reloader = true; // sortable items doesnt correctly update, so we have this boolean that flips to rerender the sortable items comp
-    }
-    writeValue(value) {
-        super.writeValue(value);
-        this.reloader = false;
-        setTimeout(() => {
-            if (arrayIsSetAndFilled(value)) {
-                this.items = value.flatMap(e => [...e, '']);
-            }
-            else {
-                this.items = [];
-            }
-            this.reloader = true;
-        });
-    }
-    onItemsRearranged(value) {
-        const result = splitArrayByCondition(value, e => e === '').filter(arrayIsSetAndFilled);
-        this.setInnerValueAndNotify(result);
-        this.reloader = false;
-        setTimeout(() => {
-            this.items = [...this.items, ''].filter((e, i) => {
-                if (i === 0 && e === '') {
-                    return false;
-                }
-                if (e === '' && this.items[i - 1] === '') {
-                    return false;
-                }
-                return true;
-            });
-            this.reloader = true;
-        });
-    }
-}
-SortableGroupedItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SortableGroupedItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SortableGroupedItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SortableGroupedItemsComponent, selector: "klp-form-sortable-grouped-items", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"reloader\">\n\t<klp-form-sortable-items\n\t\t[(ngModel)]=\"items\"\n\t\t(ngModelChange)=\"onItemsRearranged($event)\"\n\t>\n\t\t<ng-template let-item=\"item\">\n\t\t\t<div>{{item}}</div>\n\t\t</ng-template>\n\t</klp-form-sortable-items>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: ["sortableItemSize", "useCustomScroll"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SortableGroupedItemsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-sortable-grouped-items', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], template: "<ng-container *ngIf=\"reloader\">\n\t<klp-form-sortable-items\n\t\t[(ngModel)]=\"items\"\n\t\t(ngModelChange)=\"onItemsRearranged($event)\"\n\t>\n\t\t<ng-template let-item=\"item\">\n\t\t\t<div>{{item}}</div>\n\t\t</ng-template>\n\t</klp-form-sortable-items>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
-        }] });
-
-const invalidTimeKey = '--invalid_time--';
-function timeValidator(control) {
-    const invalid = control.value === invalidTimeKey;
-    return invalid ? { date: control.value } : null;
-}
-
-class HourMinuteInputComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.placeholders = ['hour', 'min'];
-        this.hoursTouched = false;
-        this.minutesTouched = false;
-    }
-    formatHours() {
-        if (!stringIsSetAndFilled(this.hours)) {
-            this.hours = '0';
-        }
-    }
-    formatMinutes() {
-        if (!stringIsSetAndFilled(this.minutes)) {
-            this.minutes = '0';
-        }
-    }
-    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;
-        }
-    }
-    writeValue(value) {
-        if (Number.isFinite(value)) {
-            this.hours = Math.floor(value / 60) + '';
-            this.minutes = value % 60 + '';
-            this.formatTime();
-            super.writeValue(value);
-        }
-        else {
-            this.hours = '';
-            this.minutes = '';
-            super.writeValue(invalidTimeKey);
-        }
-    }
-    notifyNewTime() {
-        const parsedHours = Number(this.hours);
-        const parsedMinutes = Number(this.minutes);
-        // when all inputs are empty
-        if (!stringIsSetAndFilled(this.hours) && !stringIsSetAndFilled(this.minutes)) {
-            this.setInnerValueAndNotify(null);
-            return;
-        }
-        // if we have valid time
-        if (Number.isFinite(parsedHours) &&
-            parsedHours >= 0 &&
-            parsedHours <= 9999 &&
-            Number.isFinite(parsedMinutes) &&
-            parsedMinutes >= 0 &&
-            parsedMinutes <= 59) {
-            this.setInnerValueAndNotify(parsedHours * 60 + parsedMinutes);
-            return;
-        }
-        // all other cases, we are not in a valid state
-        this.setInnerValueAndNotify(invalidTimeKey);
-    }
-    touchHours() {
-        this.hoursTouched = true;
-        this.determineAllTouched();
-    }
-    touchMinutes() {
-        this.minutesTouched = true;
-        this.determineAllTouched();
-    }
-    determineAllTouched() {
-        if (this.hoursTouched && this.minutesTouched) {
-            this.touch();
-        }
-    }
-}
-HourMinuteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HourMinuteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HourMinuteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: HourMinuteInputComponent, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;flex:0 0 auto;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{color:#888da8;text-align:center;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HourMinuteInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;flex:0 0 auto;padding:6px .625rem;background:#ffffff;display:flex;align-items:center;border:1px solid #e6ecf5}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{color:#888da8;text-align:center;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}\n"] }]
-        }], propDecorators: { placeholders: [{
-                type: Input
-            }] } });
-
-var Orientation;
-(function (Orientation) {
-    Orientation["COLUMN"] = "column";
-    Orientation["ROW"] = "row";
-})(Orientation || (Orientation = {}));
-class RadioComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
-        this.orientation = Orientation.ROW;
-        this.variant = 'classic';
-    }
-}
-RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [class]=\"orientation\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t</div>\n\t\t\t<div>{{option.name}}</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.column{flex-direction:column}.componentContainer.column .optionContainer{margin-bottom:.3125rem}.componentContainer.column .optionContainer:last-child{margin-bottom:0}.componentContainer.row{flex-direction:row}.componentContainer.row .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.row .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{display:flex;flex-direction:row;margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [class]=\"orientation\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t</div>\n\t\t\t<div>{{option.name}}</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.column{flex-direction:column}.componentContainer.column .optionContainer{margin-bottom:.3125rem}.componentContainer.column .optionContainer:last-child{margin-bottom:0}.componentContainer.row{flex-direction:row}.componentContainer.row .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.row .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{display:flex;flex-direction:row;margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }] } });
-
-class NgxEnhancyFormsModule {
-}
-NgxEnhancyFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, declarations: [ValueAccessorBase,
-        MultipleValueAccessorBase,
-        ButtonComponent,
-        CheckboxComponent,
-        DatePickerComponent,
-        DateTimePickerComponent,
-        EmailInputComponent,
-        LoadingIndicatorComponent,
-        NumberInputComponent,
-        PasswordFieldComponent,
-        SelectComponent,
-        KlpSelectOptionTemplateDirective,
-        SelectFooterComponent,
-        SortableItemsComponent,
-        SortableGroupedItemsComponent,
-        TextInputComponent,
-        ToggleComponent,
-        FileInputComponent,
-        FormCaptionComponent,
-        FormElementComponent,
-        FormErrorComponent,
-        FormSubmitButtonComponent,
-        FormComponent,
-        SubFormDirective,
-        HourMinuteInputComponent,
-        RadioComponent], imports: [CommonModule,
-        FormsModule,
-        NgSelectModule,
-        SortablejsModule,
-        MaterialModule], exports: [ValueAccessorBase,
-        MultipleValueAccessorBase,
-        ButtonComponent,
-        DatePickerComponent,
-        DateTimePickerComponent,
-        CheckboxComponent,
-        EmailInputComponent,
-        LoadingIndicatorComponent,
-        NumberInputComponent,
-        PasswordFieldComponent,
-        SelectComponent,
-        KlpSelectOptionTemplateDirective,
-        SelectFooterComponent,
-        SortableItemsComponent,
-        SortableGroupedItemsComponent,
-        TextInputComponent,
-        ToggleComponent,
-        FileInputComponent,
-        FormCaptionComponent,
-        FormElementComponent,
-        FormErrorComponent,
-        FormSubmitButtonComponent,
-        FormComponent,
-        SubFormDirective,
-        HourMinuteInputComponent,
-        RadioComponent] });
-NgxEnhancyFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, imports: [CommonModule,
-        FormsModule,
-        NgSelectModule,
-        SortablejsModule,
-        MaterialModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        NgSelectModule,
-                        SortablejsModule,
-                        MaterialModule,
-                    ],
-                    declarations: [
-                        ValueAccessorBase,
-                        MultipleValueAccessorBase,
-                        ButtonComponent,
-                        CheckboxComponent,
-                        DatePickerComponent,
-                        DateTimePickerComponent,
-                        EmailInputComponent,
-                        LoadingIndicatorComponent,
-                        NumberInputComponent,
-                        PasswordFieldComponent,
-                        SelectComponent,
-                        KlpSelectOptionTemplateDirective,
-                        SelectFooterComponent,
-                        SortableItemsComponent,
-                        SortableGroupedItemsComponent,
-                        TextInputComponent,
-                        ToggleComponent,
-                        FileInputComponent,
-                        FormCaptionComponent,
-                        FormElementComponent,
-                        FormErrorComponent,
-                        FormSubmitButtonComponent,
-                        FormComponent,
-                        SubFormDirective,
-                        HourMinuteInputComponent,
-                        RadioComponent
-                    ],
-                    exports: [
-                        ValueAccessorBase,
-                        MultipleValueAccessorBase,
-                        ButtonComponent,
-                        DatePickerComponent,
-                        DateTimePickerComponent,
-                        CheckboxComponent,
-                        EmailInputComponent,
-                        LoadingIndicatorComponent,
-                        NumberInputComponent,
-                        PasswordFieldComponent,
-                        SelectComponent,
-                        KlpSelectOptionTemplateDirective,
-                        SelectFooterComponent,
-                        SortableItemsComponent,
-                        SortableGroupedItemsComponent,
-                        TextInputComponent,
-                        ToggleComponent,
-                        FileInputComponent,
-                        FormCaptionComponent,
-                        FormElementComponent,
-                        FormErrorComponent,
-                        FormSubmitButtonComponent,
-                        FormComponent,
-                        SubFormDirective,
-                        HourMinuteInputComponent,
-                        RadioComponent
-                    ]
-                }]
-        }] });
-
-/*
- * Public API Surface of ngx-enhancy-forms
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, HourMinuteInputComponent, KLP_DATE_FORMATS, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
-//# sourceMappingURL=klippa-ngx-enhancy-forms.mjs.map