@klippa/ngx-enhancy-forms 7.3.0 → 7.5.1

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,181 +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.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',] }]
-    };
-
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -818,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() {
@@ -975,9 +1024,9 @@
     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}"]
+                    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 div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]
                 },] }
     ];
     SelectComponent.ctorParameters = function () { return [
@@ -1800,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() {
         }
@@ -1828,6 +1927,7 @@
                         SelectComponent,
                         SelectFooterComponent,
                         SortableItemsComponent,
+                        SortableGroupedItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
                         FileInputComponent,
@@ -1852,6 +1952,7 @@
                         SelectComponent,
                         SelectFooterComponent,
                         SortableItemsComponent,
+                        SortableGroupedItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
                         FileInputComponent,
@@ -1898,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;