@klippa/ngx-enhancy-forms 7.2.1 → 7.5.0

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

@@ -16,12 +16,6 @@
     function isValueSet(value) {
         return value !== null && value !== undefined;
     }
-    function removeDuplicatesFromArray(array) {
-        return array.filter(function (c, i) {
-            var firstOccurrenceIndex = array.findIndex(function (c2) { return c2 === c; });
-            return i === firstOccurrenceIndex;
-        });
-    }
     function stringOrArrayIsSetAndEmpty(value) {
         return value !== null && value !== undefined && value.length === 0;
     }
@@ -31,9 +25,6 @@
         }
         return s.substring(0, length) + '...';
     }
-    function arrayIsSetAndFilled(arr) {
-        return Array.isArray(arr) && arr !== null && arr !== undefined && arr.length > 0;
-    }
 
     var invalidFieldsSymbol = Symbol('Not all fields are valid');
     var SubFormDirective = /** @class */ (function () {
@@ -325,152 +316,6 @@
         internalComponentRef: [{ type: core.ViewChild, args: ['internalComponentRef',] }]
     };
 
-    /**
-     * This component is a base in order to create a component that supports ngModel.
-     * Some important things to know about it:
-     *
-     * innerValue = your own inner state, which you should use to store the current state of what ngModel should be.
-     * writeValue() = called by angular, when ngModel is changed from OUTSIDE of the component. Feel free to patch this method if you need inner logic to happen when ngModel is altered from the outside. Always remember to also call the super.writeValue if you do!
-     * setInnerValueAndNotify() = call this when you want your ngModel to be updated from INSIDE of your component, and provide it to the OUTSIDE.
-     * ngOnInit() = Used to support the angular reactive forms framework. If you use ngOnInit in your own component (which happens fairly often) you must not forget to call the super.ngOnInit() method.
-     */
-    var ValueAccessorBase = /** @class */ (function () {
-        function ValueAccessorBase(parent, controlContainer) {
-            this.parent = parent;
-            this.controlContainer = controlContainer;
-            this.changed = new Array();
-            this.touched = new Array();
-            this.disabled = false;
-            // we support both providing just the formControlName and the full formControl
-            this.formControlName = null;
-            this.formControl = null;
-            this.onTouch = new core.EventEmitter();
-            this.validators = [];
-        }
-        ValueAccessorBase.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a, _b, _c, _d;
-            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(function () {
-                    _this.disabled = _this.attachedFormControl.disabled;
-                });
-                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl, this);
-                if ((_d = this.attachedFormControl) === null || _d === void 0 ? void 0 : _d.validator) {
-                    var vals = this.attachedFormControl.validator({});
-                    if (isValueSet(vals)) {
-                        this.validators = Object.keys(vals);
-                    }
-                    else {
-                        this.validators = [];
-                    }
-                }
-            }
-        };
-        ValueAccessorBase.prototype.isInErrorState = function () {
-            return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
-        };
-        ValueAccessorBase.prototype.ngOnDestroy = function () {
-            var _a;
-            if (this.attachedFormControl) {
-                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.unregisterControl(this.attachedFormControl);
-            }
-        };
-        ValueAccessorBase.prototype.touch = function () {
-            this.touched.forEach(function (f) { return f(); });
-        };
-        ValueAccessorBase.prototype.writeValue = function (value) {
-            this.innerValue = value;
-        };
-        ValueAccessorBase.prototype.registerOnChange = function (fn) {
-            this.changed.push(fn);
-        };
-        ValueAccessorBase.prototype.registerOnTouched = function (fn) {
-            this.touched.push(fn);
-        };
-        ValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
-            this.innerValue = value;
-            this.changed.forEach(function (fn) { return fn(value); });
-        };
-        ValueAccessorBase.prototype.resetToNull = function () {
-            this.setInnerValueAndNotify(null);
-        };
-        ValueAccessorBase.prototype.hasValidator = function (validatorName) {
-            if (arrayIsSetAndFilled(this.validators)) {
-                return this.validators.includes(validatorName);
-            }
-            return false;
-        };
-        return ValueAccessorBase;
-    }());
-    ValueAccessorBase.decorators = [
-        { type: core.Component, args: [{
-                    selector: '',
-                    template: ''
-                },] }
-    ];
-    ValueAccessorBase.ctorParameters = function () { return [
-        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] }
-    ]; };
-    ValueAccessorBase.propDecorators = {
-        disabled: [{ type: core.Input }],
-        formControlName: [{ type: core.Input }],
-        formControl: [{ type: core.Input }],
-        onTouch: [{ type: core.Output }]
-    };
-
-    var ButtonComponent = /** @class */ (function () {
-        function ButtonComponent() {
-            this.variant = 'white';
-            this.size = 'medium';
-            this.fullWidth = false;
-            this.hasBorder = true;
-            this.disabled = false;
-            this.isLoading = false;
-            this.type = 'button';
-        }
-        Object.defineProperty(ButtonComponent.prototype, "_", {
-            get: function () {
-                return this.fullWidth;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ButtonComponent.prototype.onClick = function (event) {
-            if (this.disabled) {
-                event.stopPropagation();
-            }
-        };
-        return ButtonComponent;
-    }());
-    ButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'klp-form-button',
-                    template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n\t[type]=\"type\"\n\t(click)=\"onClick($event)\"\n>\n\t<div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"loadingSpinnerContainer\" *ngIf=\"isLoading\">\n\t\t<klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n\t</div>\n</button>\n",
-                    styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{border:1px solid #e6ecf5;border-radius:5px;color:#888da8;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1px;padding:10px 20px}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.small{padding-bottom:.375rem;padding-top:.375rem}.large{line-height:2}.white{background-color:#fff;border-color:#d4deee;color:#515365;font-weight:500}.white:active,.white:hover{background-color:#edf2f8;border-color:#edf2f8;color:#515365}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{background:none;border:none;color:#27bb5f;padding:0}.greenLink:focus,.greenLink:hover{text-decoration:underline}.contextMenuItem{background-color:#fff;border-color:#fff;color:#888da8}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:active,.contextMenuItem:focus{text-decoration:underline}.redFilled{background-color:#dc3545;border-color:#dc3545;color:#fff}.redFilled:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{background-color:#fff;border-color:#dc3545;color:#dc3545}.redOutlined:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{background-color:#ff8000;border-color:#ff8000;color:#fff}.orangeFilled:hover{background-color:#ff8d1a;border-color:#ff8d1a;color:#fff}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}"]
-                },] }
-    ];
-    ButtonComponent.propDecorators = {
-        variant: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        fullWidth: [{ type: core.Input }],
-        hasBorder: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        isLoading: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        _: [{ type: core.HostBinding, args: ['class._fullWidth',] }]
-    };
-
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -789,6 +634,239 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    function removeDuplicatesFromArraysWithComparator(comparator) {
+        var e_1, _a;
+        var arrays = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            arrays[_i - 1] = arguments[_i];
+        }
+        var combined = [];
+        try {
+            for (var arrays_1 = __values(arrays), arrays_1_1 = arrays_1.next(); !arrays_1_1.done; arrays_1_1 = arrays_1.next()) {
+                var array = arrays_1_1.value;
+                combined = combined.concat(array);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (arrays_1_1 && !arrays_1_1.done && (_a = arrays_1.return)) _a.call(arrays_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return combined.filter(function (c, i) {
+            var firstOccurrenceIndex = combined.findIndex(function (c2) { return comparator(c, c2); });
+            return i === firstOccurrenceIndex;
+        });
+    }
+    function removeDuplicatesFromArray(array) {
+        return array.filter(function (c, i) {
+            var firstOccurrenceIndex = array.findIndex(function (c2) { return c2 === c; });
+            return i === firstOccurrenceIndex;
+        });
+    }
+    function insertAtIndex(arr, index, item) {
+        arr.splice(index, 0, item);
+    }
+    function arrayIsSetAndFilled(arr) {
+        return lodash.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(function (acc, cur) {
+            if (condition(cur)) {
+                acc.push([]);
+            }
+            else {
+                acc[acc.length - 1].push(cur);
+            }
+            return acc;
+        }, [[]]);
+    }
+
+    /**
+     * This component is a base in order to create a component that supports ngModel.
+     * Some important things to know about it:
+     *
+     * innerValue = your own inner state, which you should use to store the current state of what ngModel should be.
+     * writeValue() = called by angular, when ngModel is changed from OUTSIDE of the component. Feel free to patch this method if you need inner logic to happen when ngModel is altered from the outside. Always remember to also call the super.writeValue if you do!
+     * setInnerValueAndNotify() = call this when you want your ngModel to be updated from INSIDE of your component, and provide it to the OUTSIDE.
+     * ngOnInit() = Used to support the angular reactive forms framework. If you use ngOnInit in your own component (which happens fairly often) you must not forget to call the super.ngOnInit() method.
+     */
+    var ValueAccessorBase = /** @class */ (function () {
+        function ValueAccessorBase(parent, controlContainer) {
+            this.parent = parent;
+            this.controlContainer = controlContainer;
+            this.changed = new Array();
+            this.touched = new Array();
+            this.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 core.EventEmitter();
+            this.validators = [];
+        }
+        ValueAccessorBase.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b, _c, _d;
+            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(function () {
+                    _this.disabled = _this.attachedFormControl.disabled;
+                });
+                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl, this);
+                if ((_d = this.attachedFormControl) === null || _d === void 0 ? void 0 : _d.validator) {
+                    var vals = this.attachedFormControl.validator({});
+                    if (isValueSet(vals)) {
+                        this.validators = Object.keys(vals);
+                    }
+                    else {
+                        this.validators = [];
+                    }
+                }
+            }
+        };
+        ValueAccessorBase.prototype.isInErrorState = function () {
+            return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
+        };
+        ValueAccessorBase.prototype.ngOnDestroy = function () {
+            var _a;
+            if (this.attachedFormControl) {
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.unregisterControl(this.attachedFormControl);
+            }
+        };
+        ValueAccessorBase.prototype.touch = function () {
+            this.touched.forEach(function (f) { return f(); });
+        };
+        ValueAccessorBase.prototype.writeValue = function (value) {
+            this.innerValue = value;
+            this.prevValue = value;
+        };
+        ValueAccessorBase.prototype.registerOnChange = function (fn) {
+            this.changed.push(fn);
+        };
+        ValueAccessorBase.prototype.registerOnTouched = function (fn) {
+            this.touched.push(fn);
+        };
+        ValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
+            var _this = this;
+            var actuallySetValue = function (valueToSet) {
+                _this.innerValue = valueToSet;
+                _this.prevValue = valueToSet;
+                _this.changed.forEach(function (fn) { return fn(valueToSet); });
+            };
+            if (isValueSet(this.innerValueChangeInterceptor)) {
+                this.latestInnerValueChangedInterceptorPromise = this.innerValueChangeInterceptor();
+                var myPromise_1 = this.latestInnerValueChangedInterceptorPromise;
+                this.latestInnerValueChangedInterceptorPromise.then(function () {
+                    if (_this.latestInnerValueChangedInterceptorPromise === myPromise_1) {
+                        actuallySetValue(value);
+                    }
+                    else {
+                        // ignore outdated promises
+                    }
+                }).catch(function () {
+                    if (_this.latestInnerValueChangedInterceptorPromise === myPromise_1) {
+                        actuallySetValue(_this.prevValue);
+                    }
+                    else {
+                        // ignore outdated promises
+                    }
+                });
+            }
+            else {
+                actuallySetValue(value);
+            }
+        };
+        ValueAccessorBase.prototype.resetToNull = function () {
+            this.setInnerValueAndNotify(null);
+        };
+        ValueAccessorBase.prototype.hasValidator = function (validatorName) {
+            if (arrayIsSetAndFilled(this.validators)) {
+                return this.validators.includes(validatorName);
+            }
+            return false;
+        };
+        return ValueAccessorBase;
+    }());
+    ValueAccessorBase.decorators = [
+        { type: core.Component, args: [{
+                    selector: '',
+                    template: ''
+                },] }
+    ];
+    ValueAccessorBase.ctorParameters = function () { return [
+        { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
+        { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] }
+    ]; };
+    ValueAccessorBase.propDecorators = {
+        disabled: [{ type: core.Input }],
+        innerValueChangeInterceptor: [{ type: core.Input }],
+        formControlName: [{ type: core.Input }],
+        formControl: [{ type: core.Input }],
+        onTouch: [{ type: core.Output }]
+    };
+
+    var ButtonComponent = /** @class */ (function () {
+        function ButtonComponent() {
+            this.variant = 'white';
+            this.size = 'medium';
+            this.fullWidth = false;
+            this.hasBorder = true;
+            this.disabled = false;
+            this.isLoading = false;
+            this.type = 'button';
+        }
+        Object.defineProperty(ButtonComponent.prototype, "_", {
+            get: function () {
+                return this.fullWidth;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ButtonComponent.prototype.onClick = function (event) {
+            if (this.disabled) {
+                event.stopPropagation();
+            }
+        };
+        return ButtonComponent;
+    }());
+    ButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-button',
+                    template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n\t[type]=\"type\"\n\t(click)=\"onClick($event)\"\n>\n\t<div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"loadingSpinnerContainer\" *ngIf=\"isLoading\">\n\t\t<klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n\t</div>\n</button>\n",
+                    styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{border:1px solid #e6ecf5;border-radius:5px;color:#888da8;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1px;padding:10px 20px}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.small{padding-bottom:.375rem;padding-top:.375rem}.large{line-height:2}.white{background-color:#fff;border-color:#d4deee;color:#515365;font-weight:500}.white:active,.white:hover{background-color:#edf2f8;border-color:#edf2f8;color:#515365}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{background:none;border:none;color:#27bb5f;padding:0}.greenLink:focus,.greenLink:hover{text-decoration:underline}.contextMenuItem{background-color:#fff;border-color:#fff;color:#888da8}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:active,.contextMenuItem:focus{text-decoration:underline}.redFilled{background-color:#dc3545;border-color:#dc3545;color:#fff}.redFilled:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{background-color:#fff;border-color:#dc3545;color:#dc3545}.redOutlined:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{background-color:#ff8000;border-color:#ff8000;color:#fff}.orangeFilled:hover{background-color:#ff8d1a;border-color:#ff8d1a;color:#fff}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}"]
+                },] }
+    ];
+    ButtonComponent.propDecorators = {
+        variant: [{ type: core.Input }],
+        size: [{ type: core.Input }],
+        fullWidth: [{ type: core.Input }],
+        hasBorder: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        isLoading: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        _: [{ type: core.HostBinding, args: ['class._fullWidth',] }]
+    };
+
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
         function CheckboxComponent() {
@@ -946,7 +1024,7 @@
     SelectComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-select',
-                    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()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\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>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t{{ item.name }}\n\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t{{ item.description }}\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n",
+                    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()}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch()\"\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>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<div [attr.data-cy]=\"item.id\">\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",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
                     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{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#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 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]
                 },] }
@@ -1771,6 +1849,56 @@
         clearable: [{ type: core.Input }]
     };
 
+    var SortableGroupedItemsComponent = /** @class */ (function (_super) {
+        __extends(SortableGroupedItemsComponent, _super);
+        function SortableGroupedItemsComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.reloader = true; // sortable items doesnt correctly update, so we have this boolean that flips to rerender the sortable items comp
+            return _this;
+        }
+        SortableGroupedItemsComponent.prototype.writeValue = function (value) {
+            var _this = this;
+            _super.prototype.writeValue.call(this, value);
+            this.reloader = false;
+            setTimeout(function () {
+                if (arrayIsSetAndFilled(value)) {
+                    _this.items = value.flatMap(function (e) { return __spread(e, ['']); });
+                }
+                else {
+                    _this.items = [];
+                }
+                _this.reloader = true;
+            });
+        };
+        SortableGroupedItemsComponent.prototype.onItemsRearranged = function (value) {
+            var _this = this;
+            var result = splitArrayByCondition(value, function (e) { return e === ''; }).filter(arrayIsSetAndFilled);
+            this.setInnerValueAndNotify(result);
+            this.reloader = false;
+            setTimeout(function () {
+                _this.items = __spread(_this.items, ['']).filter(function (e, i) {
+                    if (i === 0 && e === '') {
+                        return false;
+                    }
+                    if (e === '' && _this.items[i - 1] === '') {
+                        return false;
+                    }
+                    return true;
+                });
+                _this.reloader = true;
+            });
+        };
+        return SortableGroupedItemsComponent;
+    }(ValueAccessorBase));
+    SortableGroupedItemsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-sortable-grouped-items',
+                    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",
+                    providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }],
+                    styles: [":host{display:block}"]
+                },] }
+    ];
+
     var NgxEnhancyFormsModule = /** @class */ (function () {
         function NgxEnhancyFormsModule() {
         }
@@ -1799,6 +1927,7 @@
                         SelectComponent,
                         SelectFooterComponent,
                         SortableItemsComponent,
+                        SortableGroupedItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
                         FileInputComponent,
@@ -1823,6 +1952,7 @@
                         SelectComponent,
                         SelectFooterComponent,
                         SortableItemsComponent,
+                        SortableGroupedItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
                         FileInputComponent,
@@ -1854,6 +1984,7 @@
     exports.DateTimePickerComponent = DateTimePickerComponent;
     exports.EmailInputComponent = EmailInputComponent;
     exports.FORM_ERROR_MESSAGES = FORM_ERROR_MESSAGES;
+    exports.FileInputComponent = FileInputComponent;
     exports.FormCaptionComponent = FormCaptionComponent;
     exports.FormComponent = FormComponent;
     exports.FormElementComponent = FormElementComponent;
@@ -1868,6 +1999,7 @@
     exports.SELECT_TRANSLATIONS = SELECT_TRANSLATIONS;
     exports.SelectComponent = SelectComponent;
     exports.SelectFooterComponent = SelectFooterComponent;
+    exports.SortableGroupedItemsComponent = SortableGroupedItemsComponent;
     exports.SortableItemsComponent = SortableItemsComponent;
     exports.SubFormDirective = SubFormDirective;
     exports.TextInputComponent = TextInputComponent;
@@ -1878,7 +2010,6 @@
     exports.invalidFieldsSymbol = invalidFieldsSymbol;
     exports.matDateFormatsFactory = matDateFormatsFactory;
     exports["ɵa"] = MaterialModule;
-    exports["ɵb"] = FileInputComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });