@klippa/ngx-enhancy-forms 18.24.0 → 18.25.0

package/esm2022/lib/elements/sortable-grouped-items/sortable-grouped-items.component.mjs

@@ -3,9 +3,8 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { arrayIsSetAndFilled, splitArrayByCondition } from '../../util/arrays';
 import { ValueAccessorBase } from '../value-accessor-base/value-accessor-base.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "../sortable-items/sortable-items.component";
+import * as i1 from "@angular/forms";
+import * as i2 from "../sortable-items/sortable-items.component";
 export class SortableGroupedItemsComponent extends ValueAccessorBase {
     constructor() {
         super(...arguments);
@@ -17,6 +16,7 @@ export class SortableGroupedItemsComponent extends ValueAccessorBase {
         setTimeout(() => {
             if (arrayIsSetAndFilled(value)) {
                 this.items = value.flatMap(e => [...e, '']);
+                console.log(this.items);
             }
             else {
                 this.items = [];
@@ -25,6 +25,8 @@ export class SortableGroupedItemsComponent extends ValueAccessorBase {
         });
     }
     onItemsRearranged(value) {
+        console.log('gers');
+        console.log(value);
         const result = splitArrayByCondition(value, e => e === '').filter(arrayIsSetAndFilled);
         this.setInnerValueAndNotify(result);
         this.reloader = false;
@@ -42,10 +44,10 @@ export class SortableGroupedItemsComponent extends ValueAccessorBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableGroupedItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: i3.SortableItemsComponent, selector: "klp-form-sortable-items", inputs: ["sortableItemSize", "useCustomScroll"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SortableGroupedItemsComponent, selector: "klp-form-sortable-grouped-items", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SortableItemsComponent, selector: "klp-form-sortable-items", inputs: ["sortableItemSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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"] }]
+            args: [{ selector: 'klp-form-sortable-grouped-items', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], template: "<ng-container>\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"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydGFibGUtZ3JvdXBlZC1pdGVtcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy9zb3J0YWJsZS1ncm91cGVkLWl0ZW1zL3NvcnRhYmxlLWdyb3VwZWQtaXRlbXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvc29ydGFibGUtZ3JvdXBlZC1pdGVtcy9zb3J0YWJsZS1ncm91cGVkLWl0ZW1zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFDLG1CQUFtQixFQUFFLHFCQUFxQixFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDN0UsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7Ozs7O0FBUXZGLE1BQU0sT0FBTyw2QkFBaUMsU0FBUSxpQkFBa0M7SUFOeEY7O1FBUUMsYUFBUSxHQUFHLElBQUksQ0FBQyxDQUFDLGlIQUFpSDtLQWdDbEk7SUE5QkEsVUFBVSxDQUFDLEtBQXNCO1FBQ2hDLEtBQUssQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDdEIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNmLElBQUksbUJBQW1CLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztnQkFDaEMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO1lBQzdDLENBQUM7aUJBQU0sQ0FBQztnQkFDUCxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNqQixDQUFDO1lBQ0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDdEIsQ0FBQyxDQUFDLENBQUM7SUFDSixDQUFDO0lBRU0saUJBQWlCLENBQUMsS0FBd0I7UUFDaEQsTUFBTSxNQUFNLEdBQW9CLHFCQUFxQixDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsbUJBQW1CLENBQVEsQ0FBQztRQUMvRyxJQUFJLENBQUMsc0JBQXNCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDdEIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNmLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFO2dCQUNoRCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDO29CQUN6QixPQUFPLEtBQUssQ0FBQztnQkFDZCxDQUFDO2dCQUNELElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQztvQkFDMUMsT0FBTyxLQUFLLENBQUM7Z0JBQ2QsQ0FBQztnQkFDRCxPQUFPLElBQUksQ0FBQztZQUNiLENBQUMsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDdEIsQ0FBQyxDQUFDLENBQUM7SUFDSixDQUFDOzhHQWpDVyw2QkFBNkI7a0dBQTdCLDZCQUE2QiwwREFGOUIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEVBQUUsNkJBQTZCLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQyxDQUFDLGlEQ1RuRyx1UkFVQTs7MkZEQ2EsNkJBQTZCO2tCQU56QyxTQUFTOytCQUNDLGlDQUFpQyxhQUdoQyxDQUFDLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsK0JBQStCLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHthcnJheUlzU2V0QW5kRmlsbGVkLCBzcGxpdEFycmF5QnlDb25kaXRpb259IGZyb20gJy4uLy4uL3V0aWwvYXJyYXlzJztcbmltcG9ydCB7VmFsdWVBY2Nlc3NvckJhc2V9IGZyb20gJy4uL3ZhbHVlLWFjY2Vzc29yLWJhc2UvdmFsdWUtYWNjZXNzb3ItYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICdrbHAtZm9ybS1zb3J0YWJsZS1ncm91cGVkLWl0ZW1zJyxcblx0dGVtcGxhdGVVcmw6ICcuL3NvcnRhYmxlLWdyb3VwZWQtaXRlbXMuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi9zb3J0YWJsZS1ncm91cGVkLWl0ZW1zLmNvbXBvbmVudC5zY3NzJ10sXG5cdHByb3ZpZGVyczogW3twcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUiwgdXNlRXhpc3Rpbmc6IFNvcnRhYmxlR3JvdXBlZEl0ZW1zQ29tcG9uZW50LCBtdWx0aTogdHJ1ZX1dLFxufSlcbmV4cG9ydCBjbGFzcyBTb3J0YWJsZUdyb3VwZWRJdGVtc0NvbXBvbmVudDxUPiBleHRlbmRzIFZhbHVlQWNjZXNzb3JCYXNlPEFycmF5PEFycmF5PFQ+Pj4ge1xuXHRwdWJsaWMgaXRlbXM6IEFycmF5PFQgfCBzdHJpbmc+O1xuXHRyZWxvYWRlciA9IHRydWU7IC8vIHNvcnRhYmxlIGl0ZW1zIGRvZXNudCBjb3JyZWN0bHkgdXBkYXRlLCBzbyB3ZSBoYXZlIHRoaXMgYm9vbGVhbiB0aGF0IGZsaXBzIHRvIHJlcmVuZGVyIHRoZSBzb3J0YWJsZSBpdGVtcyBjb21wXG5cblx0d3JpdGVWYWx1ZSh2YWx1ZTogQXJyYXk8QXJyYXk8VD4+KTogdm9pZCB7XG5cdFx0c3VwZXIud3JpdGVWYWx1ZSh2YWx1ZSk7XG5cdFx0dGhpcy5yZWxvYWRlciA9IGZhbHNlO1xuXHRcdHNldFRpbWVvdXQoKCkgPT4ge1xuXHRcdFx0aWYgKGFycmF5SXNTZXRBbmRGaWxsZWQodmFsdWUpKSB7XG5cdFx0XHRcdHRoaXMuaXRlbXMgPSB2YWx1ZS5mbGF0TWFwKGUgPT4gWy4uLmUsICcnXSk7XG5cdFx0XHR9IGVsc2Uge1xuXHRcdFx0XHR0aGlzLml0ZW1zID0gW107XG5cdFx0XHR9XG5cdFx0XHR0aGlzLnJlbG9hZGVyID0gdHJ1ZTtcblx0XHR9KTtcblx0fVxuXG5cdHB1YmxpYyBvbkl0ZW1zUmVhcnJhbmdlZCh2YWx1ZTogQXJyYXk8VCB8IHN0cmluZz4pOiB2b2lkIHtcblx0XHRjb25zdCByZXN1bHQ6IEFycmF5PEFycmF5PFQ+PiA9IHNwbGl0QXJyYXlCeUNvbmRpdGlvbih2YWx1ZSwgZSA9PiBlID09PSAnJykuZmlsdGVyKGFycmF5SXNTZXRBbmRGaWxsZWQpIGFzIGFueTtcblx0XHR0aGlzLnNldElubmVyVmFsdWVBbmROb3RpZnkocmVzdWx0KTtcblx0XHR0aGlzLnJlbG9hZGVyID0gZmFsc2U7XG5cdFx0c2V0VGltZW91dCgoKSA9PiB7XG5cdFx0XHR0aGlzLml0ZW1zID0gWy4uLnRoaXMuaXRlbXMsICcnXS5maWx0ZXIoKGUsIGkpID0+IHtcblx0XHRcdFx0aWYgKGkgPT09IDAgJiYgZSA9PT0gJycpIHtcblx0XHRcdFx0XHRyZXR1cm4gZmFsc2U7XG5cdFx0XHRcdH1cblx0XHRcdFx0aWYgKGUgPT09ICcnICYmIHRoaXMuaXRlbXNbaSAtIDFdID09PSAnJykge1xuXHRcdFx0XHRcdHJldHVybiBmYWxzZTtcblx0XHRcdFx0fVxuXHRcdFx0XHRyZXR1cm4gdHJ1ZTtcblx0XHRcdH0pO1xuXHRcdFx0dGhpcy5yZWxvYWRlciA9IHRydWU7XG5cdFx0fSk7XG5cdH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJyZWxvYWRlclwiPlxuXHQ8a2xwLWZvcm0tc29ydGFibGUtaXRlbXNcblx0XHRbKG5nTW9kZWwpXT1cIml0ZW1zXCJcblx0XHQobmdNb2RlbENoYW5nZSk9XCJvbkl0ZW1zUmVhcnJhbmdlZCgkZXZlbnQpXCJcblx0PlxuXHRcdDxuZy10ZW1wbGF0ZSBsZXQtaXRlbT1cIml0ZW1cIj5cblx0XHRcdDxkaXY+e3tpdGVtfX08L2Rpdj5cblx0XHQ8L25nLXRlbXBsYXRlPlxuXHQ8L2tscC1mb3JtLXNvcnRhYmxlLWl0ZW1zPlxuPC9uZy1jb250YWluZXI+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydGFibGUtZ3JvdXBlZC1pdGVtcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy9zb3J0YWJsZS1ncm91cGVkLWl0ZW1zL3NvcnRhYmxlLWdyb3VwZWQtaXRlbXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvc29ydGFibGUtZ3JvdXBlZC1pdGVtcy9zb3J0YWJsZS1ncm91cGVkLWl0ZW1zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFDLG1CQUFtQixFQUFFLHFCQUFxQixFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDN0UsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7Ozs7QUFRdkYsTUFBTSxPQUFPLDZCQUFpQyxTQUFRLGlCQUFrQztJQU54Rjs7UUFRQyxhQUFRLEdBQUcsSUFBSSxDQUFDLENBQUMsaUhBQWlIO0tBbUNsSTtJQWpDQSxVQUFVLENBQUMsS0FBc0I7UUFDaEMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2YsSUFBSSxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO2dCQUNoQyxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7Z0JBQzVDLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3pCLENBQUM7aUJBQU0sQ0FBQztnQkFDUCxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNqQixDQUFDO1lBQ0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDdEIsQ0FBQyxDQUFDLENBQUM7SUFDSixDQUFDO0lBRU0saUJBQWlCLENBQUMsS0FBd0I7UUFDaEQsT0FBTyxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNwQixPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25CLE1BQU0sTUFBTSxHQUFvQixxQkFBcUIsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLG1CQUFtQixDQUFRLENBQUM7UUFDL0csSUFBSSxDQUFDLHNCQUFzQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRTtnQkFDaEQsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQztvQkFDekIsT0FBTyxLQUFLLENBQUM7Z0JBQ2QsQ0FBQztnQkFDRCxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUM7b0JBQzFDLE9BQU8sS0FBSyxDQUFDO2dCQUNkLENBQUM7Z0JBQ0QsT0FBTyxJQUFJLENBQUM7WUFDYixDQUFDLENBQUMsQ0FBQztZQUNILElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3RCLENBQUMsQ0FBQyxDQUFDO0lBQ0osQ0FBQzs4R0FwQ1csNkJBQTZCO2tHQUE3Qiw2QkFBNkIsMERBRjlCLENBQUMsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLDZCQUE2QixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQyxpRENUbkcsb1FBVUE7OzJGRENhLDZCQUE2QjtrQkFOekMsU0FBUzsrQkFDQyxpQ0FBaUMsYUFHaEMsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLCtCQUErQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7YXJyYXlJc1NldEFuZEZpbGxlZCwgc3BsaXRBcnJheUJ5Q29uZGl0aW9ufSBmcm9tICcuLi8uLi91dGlsL2FycmF5cyc7XG5pbXBvcnQge1ZhbHVlQWNjZXNzb3JCYXNlfSBmcm9tICcuLi92YWx1ZS1hY2Nlc3Nvci1iYXNlL3ZhbHVlLWFjY2Vzc29yLWJhc2UuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAna2xwLWZvcm0tc29ydGFibGUtZ3JvdXBlZC1pdGVtcycsXG5cdHRlbXBsYXRlVXJsOiAnLi9zb3J0YWJsZS1ncm91cGVkLWl0ZW1zLmNvbXBvbmVudC5odG1sJyxcblx0c3R5bGVVcmxzOiBbJy4vc29ydGFibGUtZ3JvdXBlZC1pdGVtcy5jb21wb25lbnQuc2NzcyddLFxuXHRwcm92aWRlcnM6IFt7cHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsIHVzZUV4aXN0aW5nOiBTb3J0YWJsZUdyb3VwZWRJdGVtc0NvbXBvbmVudCwgbXVsdGk6IHRydWV9XSxcbn0pXG5leHBvcnQgY2xhc3MgU29ydGFibGVHcm91cGVkSXRlbXNDb21wb25lbnQ8VD4gZXh0ZW5kcyBWYWx1ZUFjY2Vzc29yQmFzZTxBcnJheTxBcnJheTxUPj4+IHtcblx0cHVibGljIGl0ZW1zOiBBcnJheTxUIHwgc3RyaW5nPjtcblx0cmVsb2FkZXIgPSB0cnVlOyAvLyBzb3J0YWJsZSBpdGVtcyBkb2VzbnQgY29ycmVjdGx5IHVwZGF0ZSwgc28gd2UgaGF2ZSB0aGlzIGJvb2xlYW4gdGhhdCBmbGlwcyB0byByZXJlbmRlciB0aGUgc29ydGFibGUgaXRlbXMgY29tcFxuXG5cdHdyaXRlVmFsdWUodmFsdWU6IEFycmF5PEFycmF5PFQ+Pik6IHZvaWQge1xuXHRcdHN1cGVyLndyaXRlVmFsdWUodmFsdWUpO1xuXHRcdHRoaXMucmVsb2FkZXIgPSBmYWxzZTtcblx0XHRzZXRUaW1lb3V0KCgpID0+IHtcblx0XHRcdGlmIChhcnJheUlzU2V0QW5kRmlsbGVkKHZhbHVlKSkge1xuXHRcdFx0XHR0aGlzLml0ZW1zID0gdmFsdWUuZmxhdE1hcChlID0+IFsuLi5lLCAnJ10pO1xuXHRcdFx0XHRjb25zb2xlLmxvZyh0aGlzLml0ZW1zKTtcblx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdHRoaXMuaXRlbXMgPSBbXTtcblx0XHRcdH1cblx0XHRcdHRoaXMucmVsb2FkZXIgPSB0cnVlO1xuXHRcdH0pO1xuXHR9XG5cblx0cHVibGljIG9uSXRlbXNSZWFycmFuZ2VkKHZhbHVlOiBBcnJheTxUIHwgc3RyaW5nPik6IHZvaWQge1xuXHRcdGNvbnNvbGUubG9nKCdnZXJzJyk7XG5cdFx0Y29uc29sZS5sb2codmFsdWUpO1xuXHRcdGNvbnN0IHJlc3VsdDogQXJyYXk8QXJyYXk8VD4+ID0gc3BsaXRBcnJheUJ5Q29uZGl0aW9uKHZhbHVlLCBlID0+IGUgPT09ICcnKS5maWx0ZXIoYXJyYXlJc1NldEFuZEZpbGxlZCkgYXMgYW55O1xuXHRcdHRoaXMuc2V0SW5uZXJWYWx1ZUFuZE5vdGlmeShyZXN1bHQpO1xuXHRcdHRoaXMucmVsb2FkZXIgPSBmYWxzZTtcblx0XHRzZXRUaW1lb3V0KCgpID0+IHtcblx0XHRcdHRoaXMuaXRlbXMgPSBbLi4udGhpcy5pdGVtcywgJyddLmZpbHRlcigoZSwgaSkgPT4ge1xuXHRcdFx0XHRpZiAoaSA9PT0gMCAmJiBlID09PSAnJykge1xuXHRcdFx0XHRcdHJldHVybiBmYWxzZTtcblx0XHRcdFx0fVxuXHRcdFx0XHRpZiAoZSA9PT0gJycgJiYgdGhpcy5pdGVtc1tpIC0gMV0gPT09ICcnKSB7XG5cdFx0XHRcdFx0cmV0dXJuIGZhbHNlO1xuXHRcdFx0XHR9XG5cdFx0XHRcdHJldHVybiB0cnVlO1xuXHRcdFx0fSk7XG5cdFx0XHR0aGlzLnJlbG9hZGVyID0gdHJ1ZTtcblx0XHR9KTtcblx0fVxufVxuIiwiPG5nLWNvbnRhaW5lcj5cblx0PGtscC1mb3JtLXNvcnRhYmxlLWl0ZW1zXG5cdFx0WyhuZ01vZGVsKV09XCJpdGVtc1wiXG5cdFx0KG5nTW9kZWxDaGFuZ2UpPVwib25JdGVtc1JlYXJyYW5nZWQoJGV2ZW50KVwiXG5cdD5cblx0XHQ8bmctdGVtcGxhdGUgbGV0LWl0ZW09XCJpdGVtXCI+XG5cdFx0XHQ8ZGl2Pnt7aXRlbX19PC9kaXY+XG5cdFx0PC9uZy10ZW1wbGF0ZT5cblx0PC9rbHAtZm9ybS1zb3J0YWJsZS1pdGVtcz5cbjwvbmctY29udGFpbmVyPlxuIl19

package/esm2022/lib/elements/sortable-items/sortable-items.component.mjs

@@ -1,44 +1,136 @@
-import { Component, ContentChild, Input, TemplateRef, } from '@angular/core';
+import { Component, ContentChild, Host, Input, Optional, TemplateRef, ViewChildren, } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { isValueSet } from '../../util/values';
 import { ValueAccessorBase } from '../value-accessor-base/value-accessor-base.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@dustfoundation/ngx-sortablejs";
+import * as i1 from "../../form/form-element/form-element.component";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/common";
 export class SortableItemsComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
+    constructor(parent, controlContainer, ngZone) {
+        super(parent, controlContainer);
+        this.parent = parent;
+        this.controlContainer = controlContainer;
+        this.ngZone = ngZone;
         this.sortableItemSize = 'lg';
-        this.useCustomScroll = false;
         this.scrollInterval = null;
-        this.itemsOrderChanged = () => {
-            this.setInnerValueAndNotify(this.innerValue);
+        this.onDragOver = (ev) => {
+            ev.preventDefault();
         };
-        this.onItemDrag = (data) => {
-            // if the item you're dragging is reaching the top, start scrolling.
-            if (data.relatedRect.top < 100) {
-                this.scrollPage(100);
+        this.onDragEnter = (ev) => {
+            if (ev.clientY < 80) {
+                this.scrollPage(40);
+            }
+            else if (window.innerHeight - ev.clientY < 80) {
+                this.scrollPage(-40);
             }
             else {
                 this.stopScrolling();
             }
+            ev.dataTransfer.dropEffect = 'move';
+            const targetIndex = this.dragItems.map(e => e.nativeElement).findIndex(e => e === ev.target);
+            if (targetIndex === -1) {
+                return;
+            }
+            this.currentDragPosition = targetIndex;
+            this.dragItems.forEach((dragItem, i) => {
+                if (this.dragSourceIndex === i) {
+                    if (this.dragSourceIndex > this.currentDragPosition) {
+                        const heightsAbove = this.dragItems.filter((e, i) => {
+                            if (i >= this.dragSourceIndex) {
+                                return false;
+                            }
+                            return i > this.currentDragPosition - 1;
+                        }).reduce((acc, cur, i) => {
+                            return acc + cur.nativeElement.getBoundingClientRect().height;
+                        }, 0);
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${-heightsAbove}px)`;
+                    }
+                    else if (this.dragSourceIndex < this.currentDragPosition) {
+                        const heightsAbove = this.dragItems.filter((e, i) => {
+                            if (i <= this.dragSourceIndex) {
+                                return false;
+                            }
+                            return i <= this.currentDragPosition;
+                        }).reduce((acc, cur, i) => {
+                            return acc + cur.nativeElement.getBoundingClientRect().height;
+                        }, 0);
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${heightsAbove}px)`;
+                    }
+                    else {
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${0}px)`;
+                    }
+                    return;
+                }
+                const heightOfCurrentlyDraggedItem = (this.dragItems.get(this.dragSourceIndex).nativeElement.getBoundingClientRect().height);
+                if (this.shouldShoveDown(i)) {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${heightOfCurrentlyDraggedItem}px)`;
+                }
+                else if (this.shouldShoveUp(i)) {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${-heightOfCurrentlyDraggedItem}px)`;
+                }
+                else {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
+                }
+            });
+            this.currentDragPosition = targetIndex;
         };
-        this.onEnd = () => {
+        this.onDragStart = (ev) => {
+            ev.dataTransfer.effectAllowed = 'move';
+            this.ngZone.run(() => {
+                this.dragSourceIndex = this.dragItems.map(e => e.nativeElement).findIndex(e => e === ev.target);
+                this.currentDragPosition = this.dragSourceIndex;
+            });
+        };
+        this.onDragEnd = (ev) => {
             this.stopScrolling();
+            const movedElement = this.innerValue[this.dragSourceIndex];
+            const isMovedToLastPlace = this.currentDragPosition === this.innerValue.length - 1;
+            this.ngZone.run(() => {
+                this.innerValue = this.innerValue
+                    .filter((e, i) => i !== this.dragSourceIndex)
+                    .reduce((acc, cur, i) => {
+                    if (i === this.currentDragPosition) {
+                        return [...acc, movedElement, cur];
+                    }
+                    return [...acc, cur];
+                }, []);
+                if (isMovedToLastPlace) {
+                    this.innerValue = [...this.innerValue, movedElement];
+                }
+                this.dragItems.forEach((dragItem, i) => {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
+                });
+                this.currentDragPosition = -1;
+                this.dragSourceIndex = -1;
+                this.setInnerValueAndNotify(this.innerValue);
+            });
         };
     }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.useCustomScroll) {
-            this.sortablejsOptions = {
-                onUpdate: this.itemsOrderChanged,
-                onMove: this.onItemDrag,
-                onEnd: this.onEnd,
-            };
-        }
-        else {
-            this.sortablejsOptions = { onUpdate: this.itemsOrderChanged };
-        }
+    ngAfterViewInit() {
+        this.dragItems.changes.subscribe(() => {
+            this.dragItems.forEach(e => {
+                this.ngZone.runOutsideAngular(() => {
+                    e.nativeElement.removeEventListener('dragstart', this.onDragStart);
+                    e.nativeElement.removeEventListener('dragover', this.onDragOver);
+                    e.nativeElement.removeEventListener('dragenter', this.onDragEnter);
+                    e.nativeElement.removeEventListener('dragend', this.onDragEnd);
+                    e.nativeElement.addEventListener('dragstart', this.onDragStart);
+                    e.nativeElement.addEventListener('dragover', this.onDragOver);
+                    e.nativeElement.addEventListener('dragenter', this.onDragEnter);
+                    e.nativeElement.addEventListener('dragend', this.onDragEnd);
+                    this.dragItems.forEach((dragItem, i) => {
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
+                    });
+                });
+            });
+        });
+    }
+    shouldShoveDown(index) {
+        return this.dragSourceIndex > index && this.currentDragPosition <= index;
+    }
+    shouldShoveUp(index) {
+        return this.dragSourceIndex < index && this.currentDragPosition >= index;
     }
     scrollPage(scrollAmount) {
         if (!isValueSet(this.scrollInterval)) {
@@ -57,14 +149,14 @@ export class SortableItemsComponent extends ValueAccessorBase {
         clearInterval(this.scrollInterval);
         this.scrollInterval = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize", useCustomScroll: "useCustomScroll" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableItemsComponent, deps: [{ token: i1.FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize" }, 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.SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions", "sortablejsCloneFunction"], outputs: ["sortablejsInit"] }] }); }
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dragItems", predicate: ["dragItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "dragInProgress {{dragSourceIndex}} {{innerValue | json}}\n<ng-template #listItem>\n\t<li *ngFor=\"let item of innerValue; index as index\"\n\t\t\tclass=\"sortableItem\"\n\t\t\t[draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n\t\t\t#dragItem\n\t>\n\t\t<div class=\"visual\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n\t\t</div>\n\t</li>\n</ng-template>\n\n<ol *ngIf='!disabled'\n\t\tclass=\"itemsContainer\"\n\t\t[ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\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}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none;cursor:grab}.sortableItem .visual{border-top:1px solid #e6ecf5}.sortableItem .visual:hover{background:#f8f9fa}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableItemsComponent, decorators: [{
             type: Component,
@@ -74,13 +166,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             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: [{
+                    ], template: "dragInProgress {{dragSourceIndex}} {{innerValue | json}}\n<ng-template #listItem>\n\t<li *ngFor=\"let item of innerValue; index as index\"\n\t\t\tclass=\"sortableItem\"\n\t\t\t[draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n\t\t\t#dragItem\n\t>\n\t\t<div class=\"visual\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n\t\t</div>\n\t</li>\n</ng-template>\n\n<ol *ngIf='!disabled'\n\t\tclass=\"itemsContainer\"\n\t\t[ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\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}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none;cursor:grab}.sortableItem .visual{border-top:1px solid #e6ecf5}.sortableItem .visual:hover{background:#f8f9fa}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormElementComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i2.ControlContainer, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.NgZone }], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }], sortableItemSize: [{
                 type: Input
-            }], useCustomScroll: [{
-                type: Input
+            }], dragItems: [{
+                type: ViewChildren,
+                args: ['dragItem']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydGFibGUtaXRlbXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvc29ydGFibGUtaXRlbXMvc29ydGFibGUtaXRlbXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvc29ydGFibGUtaXRlbXMvc29ydGFibGUtaXRlbXMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLFdBQVcsR0FDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDL0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0RBQXNELENBQUM7Ozs7QUFjekYsTUFBTSxPQUFPLHNCQUNaLFNBQVEsaUJBQTZCO0lBYnRDOztRQWlCVSxxQkFBZ0IsR0FBZ0IsSUFBSSxDQUFDO1FBQ3JDLG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBR3pCLG1CQUFjLEdBQUcsSUFBSSxDQUFDO1FBZTlCLHNCQUFpQixHQUFHLEdBQUcsRUFBRTtZQUN4QixJQUFJLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzlDLENBQUMsQ0FBQztRQUVGLGVBQVUsR0FBRyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQ3JCLG9FQUFvRTtZQUNwRSxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxHQUFHLEdBQUcsRUFBRSxDQUFDO2dCQUNoQyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ3RCLENBQUM7aUJBQU0sQ0FBQztnQkFDUCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdEIsQ0FBQztRQUNGLENBQUMsQ0FBQztRQUVGLFVBQUssR0FBRyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDO0tBb0JGO0lBaERBLFFBQVE7UUFDUCxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDakIsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDMUIsSUFBSSxDQUFDLGlCQUFpQixHQUFHO2dCQUN4QixRQUFRLEVBQUUsSUFBSSxDQUFDLGlCQUFpQjtnQkFDaEMsTUFBTSxFQUFFLElBQUksQ0FBQyxVQUFVO2dCQUN2QixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUs7YUFDakIsQ0FBQztRQUNILENBQUM7YUFBTSxDQUFDO1lBQ1AsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQy9ELENBQUM7SUFDRixDQUFDO0lBbUJPLFVBQVUsQ0FBQyxZQUFvQjtRQUN0QyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsRUFBRSxDQUFDO1lBQ3RDLElBQUksQ0FBQyxjQUFjLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtnQkFDdEMsTUFBTSxDQUFDLE1BQU0sQ0FBQztvQkFDYixHQUFHLEVBQUUsUUFBUSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsR0FBRyxZQUFZO29CQUN2RCxRQUFRLEVBQUUsUUFBUTtpQkFDbEIsQ0FBQyxDQUFDO2dCQUNILElBQUksUUFBUSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsSUFBSSxHQUFHLEVBQUUsQ0FBQztvQkFDaEQsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO2dCQUN0QixDQUFDO1lBQ0YsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ1QsQ0FBQztJQUNGLENBQUM7SUFFTyxhQUFhO1FBQ3BCLGFBQWEsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7SUFDNUIsQ0FBQzs4R0ExRFcsc0JBQXNCO2tHQUF0QixzQkFBc0Isd0lBUnZCO1lBQ1Y7Z0JBQ0MsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLHNCQUFzQjtnQkFDbkMsS0FBSyxFQUFFLElBQUk7YUFDWDtTQUNELGdFQU1hLFdBQVcsdUVDNUIxQixzdkJBdUJBOzsyRkRDYSxzQkFBc0I7a0JBWmxDLFNBQVM7K0JBQ0MseUJBQXlCLGFBR3hCO3dCQUNWOzRCQUNDLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsd0JBQXdCOzRCQUNuQyxLQUFLLEVBQUUsSUFBSTt5QkFDWDtxQkFDRDs4QkFNMEIsUUFBUTtzQkFBbEMsWUFBWTt1QkFBQyxXQUFXO2dCQUNoQixnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0Q29udGVudENoaWxkLFxuXHRJbnB1dCxcblx0T25Jbml0LFxuXHRUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IE9wdGlvbnMgfSBmcm9tICdzb3J0YWJsZWpzJztcbmltcG9ydCB7IGlzVmFsdWVTZXQgfSBmcm9tICcuLi8uLi91dGlsL3ZhbHVlcyc7XG5pbXBvcnQgeyBWYWx1ZUFjY2Vzc29yQmFzZSB9IGZyb20gJy4uL3ZhbHVlLWFjY2Vzc29yLWJhc2UvdmFsdWUtYWNjZXNzb3ItYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICdrbHAtZm9ybS1zb3J0YWJsZS1pdGVtcycsXG5cdHRlbXBsYXRlVXJsOiAnLi9zb3J0YWJsZS1pdGVtcy5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3NvcnRhYmxlLWl0ZW1zLmNvbXBvbmVudC5zY3NzJ10sXG5cdHByb3ZpZGVyczogW1xuXHRcdHtcblx0XHRcdHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuXHRcdFx0dXNlRXhpc3Rpbmc6IFNvcnRhYmxlSXRlbXNDb21wb25lbnQsXG5cdFx0XHRtdWx0aTogdHJ1ZSxcblx0XHR9LFxuXHRdLFxufSlcbmV4cG9ydCBjbGFzcyBTb3J0YWJsZUl0ZW1zQ29tcG9uZW50XG5cdGV4dGVuZHMgVmFsdWVBY2Nlc3NvckJhc2U8QXJyYXk8YW55Pj5cblx0aW1wbGVtZW50cyBPbkluaXRcbntcblx0QENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZikgdGVtcGxhdGU7XG5cdEBJbnB1dCgpIHNvcnRhYmxlSXRlbVNpemU6ICdzbScgfCAnbGcnID0gJ2xnJztcblx0QElucHV0KCkgdXNlQ3VzdG9tU2Nyb2xsID0gZmFsc2U7XG5cblx0cHVibGljIHNvcnRhYmxlanNPcHRpb25zOiBPcHRpb25zO1xuXHRwcml2YXRlIHNjcm9sbEludGVydmFsID0gbnVsbDtcblxuXHRuZ09uSW5pdCgpOiB2b2lkIHtcblx0XHRzdXBlci5uZ09uSW5pdCgpO1xuXHRcdGlmICh0aGlzLnVzZUN1c3RvbVNjcm9sbCkge1xuXHRcdFx0dGhpcy5zb3J0YWJsZWpzT3B0aW9ucyA9IHtcblx0XHRcdFx0b25VcGRhdGU6IHRoaXMuaXRlbXNPcmRlckNoYW5nZWQsXG5cdFx0XHRcdG9uTW92ZTogdGhpcy5vbkl0ZW1EcmFnLFxuXHRcdFx0XHRvbkVuZDogdGhpcy5vbkVuZCxcblx0XHRcdH07XG5cdFx0fSBlbHNlIHtcblx0XHRcdHRoaXMuc29ydGFibGVqc09wdGlvbnMgPSB7IG9uVXBkYXRlOiB0aGlzLml0ZW1zT3JkZXJDaGFuZ2VkIH07XG5cdFx0fVxuXHR9XG5cblx0aXRlbXNPcmRlckNoYW5nZWQgPSAoKSA9PiB7XG5cdFx0dGhpcy5zZXRJbm5lclZhbHVlQW5kTm90aWZ5KHRoaXMuaW5uZXJWYWx1ZSk7XG5cdH07XG5cblx0b25JdGVtRHJhZyA9IChkYXRhKSA9PiB7XG5cdFx0Ly8gaWYgdGhlIGl0ZW0geW91J3JlIGRyYWdnaW5nIGlzIHJlYWNoaW5nIHRoZSB0b3AsIHN0YXJ0IHNjcm9sbGluZy5cblx0XHRpZiAoZGF0YS5yZWxhdGVkUmVjdC50b3AgPCAxMDApIHtcblx0XHRcdHRoaXMuc2Nyb2xsUGFnZSgxMDApO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHR0aGlzLnN0b3BTY3JvbGxpbmcoKTtcblx0XHR9XG5cdH07XG5cblx0b25FbmQgPSAoKSA9PiB7XG5cdFx0dGhpcy5zdG9wU2Nyb2xsaW5nKCk7XG5cdH07XG5cblx0cHJpdmF0ZSBzY3JvbGxQYWdlKHNjcm9sbEFtb3VudDogbnVtYmVyKTogdm9pZCB7XG5cdFx0aWYgKCFpc1ZhbHVlU2V0KHRoaXMuc2Nyb2xsSW50ZXJ2YWwpKSB7XG5cdFx0XHR0aGlzLnNjcm9sbEludGVydmFsID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuXHRcdFx0XHR3aW5kb3cuc2Nyb2xsKHtcblx0XHRcdFx0XHR0b3A6IGRvY3VtZW50LnNjcm9sbGluZ0VsZW1lbnQuc2Nyb2xsVG9wIC0gc2Nyb2xsQW1vdW50LFxuXHRcdFx0XHRcdGJlaGF2aW9yOiAnc21vb3RoJyxcblx0XHRcdFx0fSk7XG5cdFx0XHRcdGlmIChkb2N1bWVudC5zY3JvbGxpbmdFbGVtZW50LnNjcm9sbFRvcCA8PSAxMDApIHtcblx0XHRcdFx0XHR0aGlzLnN0b3BTY3JvbGxpbmcoKTtcblx0XHRcdFx0fVxuXHRcdFx0fSwgMTAwKTtcblx0XHR9XG5cdH1cblxuXHRwcml2YXRlIHN0b3BTY3JvbGxpbmcoKTogdm9pZCB7XG5cdFx0Y2xlYXJJbnRlcnZhbCh0aGlzLnNjcm9sbEludGVydmFsKTtcblx0XHR0aGlzLnNjcm9sbEludGVydmFsID0gbnVsbDtcblx0fVxufVxuIiwiPG5nLXRlbXBsYXRlICNsaXN0SXRlbT5cblx0PGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIGlubmVyVmFsdWU7IGluZGV4IGFzIGluZGV4XCJcblx0XHRcdGNsYXNzPVwic29ydGFibGVJdGVtXCJcblx0XHRcdFtuZ0NsYXNzXT1cIntcblx0XHRcdGxhcmdlU29ydGFibGVJdGVtOiBzb3J0YWJsZUl0ZW1TaXplID09PSAnbGcnLFxuXHRcdCBcdHNtYWxsU29ydGFibGVJdGVtOiBzb3J0YWJsZUl0ZW1TaXplID09PSAnc20nXG5cdFx0IH1cIlxuXHQ+XG5cdFx0PG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJ0ZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IGl0ZW06IGl0ZW0sIGluZGV4OmluZGV4IH1cIj48L25nLWNvbnRhaW5lcj5cblx0PC9saT5cbjwvbmctdGVtcGxhdGU+XG5cbjxvbCAqbmdJZj0nIWRpc2FibGVkJ1xuXHRcdFtzb3J0YWJsZWpzXT1cImlubmVyVmFsdWVcIlxuXHRcdFtzb3J0YWJsZWpzT3B0aW9uc109XCJzb3J0YWJsZWpzT3B0aW9uc1wiXG5cdFx0Y2xhc3M9XCJpdGVtc0NvbnRhaW5lclwiXG4+XG5cdDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJsaXN0SXRlbVwiPjwvbmctY29udGFpbmVyPlxuPC9vbD5cblxuPG9sICpuZ0lmPSdkaXNhYmxlZCcgY2xhc3M9XCJpdGVtc0NvbnRhaW5lciBkaXNhYmxlZC1tb3VzZS1jdXJzb3JcIj5cblx0PG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImxpc3RJdGVtXCI+PC9uZy1jb250YWluZXI+XG48L29sPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydGFibGUtaXRlbXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvc29ydGFibGUtaXRlbXMvc29ydGFibGUtaXRlbXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvc29ydGFibGUtaXRlbXMvc29ydGFibGUtaXRlbXMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVOLFNBQVMsRUFDVCxZQUFZLEVBRVosSUFBSSxFQUNKLEtBQUssRUFHTCxRQUFRLEVBRVIsV0FBVyxFQUNYLFlBQVksR0FDWixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQW1CLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkUsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLG1CQUFtQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLHNEQUFzRCxDQUFDOzs7OztBQWV2RixNQUFNLE9BQU8sc0JBQ1osU0FBUSxpQkFBNkI7SUFZckMsWUFDK0IsTUFBNEIsRUFDNUIsZ0JBQWtDLEVBQ3hELE1BQWM7UUFFdEIsS0FBSyxDQUFDLE1BQU0sRUFBRSxnQkFBZ0IsQ0FBQyxDQUFDO1FBSkYsV0FBTSxHQUFOLE1BQU0sQ0FBc0I7UUFDNUIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUN4RCxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBWGQscUJBQWdCLEdBQWdCLElBQUksQ0FBQztRQU10QyxtQkFBYyxHQUFHLElBQUksQ0FBQztRQWlDdEIsZUFBVSxHQUFHLENBQUMsRUFBRSxFQUFFLEVBQUU7WUFDM0IsRUFBRSxDQUFDLGNBQWMsRUFBRSxDQUFD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LEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtnQkFDdEMsTUFBTSxDQUFDLE1BQU0sQ0FBQztvQkFDYixHQUFHLEVBQUUsUUFBUSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsR0FBRyxZQUFZO29CQUN2RCxRQUFRLEVBQUUsUUFBUTtpQkFDbEIsQ0FBQyxDQUFDO2dCQUNILElBQUksUUFBUSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsSUFBSSxHQUFHLEVBQUUsQ0FBQztvQkFDaEQsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO2dCQUN0QixDQUFDO1lBQ0YsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ1QsQ0FBQztJQUNGLENBQUM7SUFFTyxhQUFhO1FBQ3BCLGFBQWEsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7SUFDNUIsQ0FBQzs4R0F6S1csc0JBQXNCO2tHQUF0QixzQkFBc0Isb0dBUnZCO1lBQ1Y7Z0JBQ0MsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLHNCQUFzQjtnQkFDbkMsS0FBSyxFQUFFLElBQUk7YUFDWDtTQUNELGdFQU1hLFdBQVcsaUtDbkMxQix5M0JBMkJBOzsyRkRJYSxzQkFBc0I7a0JBWmxDLFNBQVM7K0JBQ0MseUJBQXlCLGFBR3hCO3dCQUNWOzRCQUNDLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsd0JBQXdCOzRCQUNuQyxLQUFLLEVBQUUsSUFBSTt5QkFDWDtxQkFDRDs7MEJBZ0JDLElBQUk7OzBCQUFJLFFBQVE7OzBCQUNoQixJQUFJOzswQkFBSSxRQUFROzhEQVhTLFFBQVE7c0JBQWxDLFlBQVk7dUJBQUMsV0FBVztnQkFDaEIsZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUVvQixTQUFTO3NCQUFsQyxZQUFZO3VCQUFDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRBZnRlclZpZXdJbml0LFxuXHRDb21wb25lbnQsXG5cdENvbnRlbnRDaGlsZCxcblx0RWxlbWVudFJlZixcblx0SG9zdCxcblx0SW5wdXQsXG5cdE5nWm9uZSxcblx0T25Jbml0LFxuXHRPcHRpb25hbCxcblx0UXVlcnlMaXN0LFxuXHRUZW1wbGF0ZVJlZixcblx0Vmlld0NoaWxkcmVuLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29udHJvbENvbnRhaW5lciwgTkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7aXNWYWx1ZVNldH0gZnJvbSAnLi4vLi4vdXRpbC92YWx1ZXMnO1xuaW1wb3J0IHtWYWx1ZUFjY2Vzc29yQmFzZX0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5pbXBvcnQge0Zvcm1FbGVtZW50Q29tcG9uZW50fSBmcm9tICcuLi8uLi9mb3JtL2Zvcm0tZWxlbWVudC9mb3JtLWVsZW1lbnQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAna2xwLWZvcm0tc29ydGFibGUtaXRlbXMnLFxuXHR0ZW1wbGF0ZVVybDogJy4vc29ydGFibGUtaXRlbXMuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi9zb3J0YWJsZS1pdGVtcy5jb21wb25lbnQuc2NzcyddLFxuXHRwcm92aWRlcnM6IFtcblx0XHR7XG5cdFx0XHRwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcblx0XHRcdHVzZUV4aXN0aW5nOiBTb3J0YWJsZUl0ZW1zQ29tcG9uZW50LFxuXHRcdFx0bXVsdGk6IHRydWUsXG5cdFx0fSxcblx0XSxcbn0pXG5leHBvcnQgY2xhc3MgU29ydGFibGVJdGVtc0NvbXBvbmVudFxuXHRleHRlbmRzIFZhbHVlQWNjZXNzb3JCYXNlPEFycmF5PGFueT4+XG5cdGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0XG57XG5cdEBDb250ZW50Q2hpbGQoVGVtcGxhdGVSZWYpIHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXHRASW5wdXQoKSBzb3J0YWJsZUl0ZW1TaXplOiAnc20nIHwgJ2xnJyA9ICdsZyc7XG5cblx0QFZpZXdDaGlsZHJlbignZHJhZ0l0ZW0nKSBkcmFnSXRlbXM6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPjtcblx0cHVibGljIGRyYWdTb3VyY2VJbmRleDogbnVtYmVyO1xuXHRwcml2YXRlIGN1cnJlbnREcmFnUG9zaXRpb246IG51bWJlcjtcblxuXHRwcml2YXRlIHNjcm9sbEludGVydmFsID0gbnVsbDtcblxuXHRjb25zdHJ1Y3Rvcihcblx0XHRASG9zdCgpIEBPcHRpb25hbCgpIHByb3RlY3RlZCBwYXJlbnQ6IEZvcm1FbGVtZW50Q29tcG9uZW50LFxuXHRcdEBIb3N0KCkgQE9wdGlvbmFsKCkgcHJvdGVjdGVkIGNvbnRyb2xDb250YWluZXI6IENvbnRyb2xDb250YWluZXIsXG5cdFx0cHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZSlcblx0e1xuXHRcdHN1cGVyKHBhcmVudCwgY29udHJvbENvbnRhaW5lcik7XG5cdH1cblxuXHRuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG5cdFx0dGhpcy5kcmFnSXRlbXMuY2hhbmdlcy5zdWJzY3JpYmUoKCkgPT4ge1xuXHRcdFx0dGhpcy5kcmFnSXRlbXMuZm9yRWFjaChlID0+IHtcblx0XHRcdFx0dGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuXHRcdFx0XHRcdGUubmF0aXZlRWxlbWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdkcmFnc3RhcnQnLCB0aGlzLm9uRHJhZ1N0YXJ0KTtcblx0XHRcdFx0XHRlLm5hdGl2ZUVsZW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignZHJhZ292ZXInLCB0aGlzLm9uRHJhZ092ZXIpO1xuXHRcdFx0XHRcdGUubmF0aXZlRWxlbWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdkcmFnZW50ZXInLCB0aGlzLm9uRHJhZ0VudGVyKTtcblx0XHRcdFx0XHRlLm5hdGl2ZUVsZW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignZHJhZ2VuZCcsIHRoaXMub25EcmFnRW5kKTtcblxuXHRcdFx0XHRcdGUubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdkcmFnc3RhcnQnLCB0aGlzLm9uRHJhZ1N0YXJ0KTtcblx0XHRcdFx0XHRlLm5hdGl2ZUVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ292ZXInLCB0aGlzLm9uRHJhZ092ZXIpO1xuXHRcdFx0XHRcdGUubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdkcmFnZW50ZXInLCB0aGlzLm9uRHJhZ0VudGVyKTtcblx0XHRcdFx0XHRlLm5hdGl2ZUVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ2VuZCcsIHRoaXMub25EcmFnRW5kKTtcblxuXHRcdFx0XHRcdHRoaXMuZHJhZ0l0ZW1zLmZvckVhY2goKGRyYWdJdGVtLCBpKSA9PiB7XG5cdFx0XHRcdFx0XHRkcmFnSXRlbS5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy52aXN1YWwnKS5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWSgwJSlgO1xuXHRcdFx0XHRcdH0pO1xuXG5cdFx0XHRcdH0pO1xuXHRcdFx0fSk7XG5cdFx0fSk7XG5cdH1cblxuXHRwcml2YXRlIG9uRHJhZ092ZXIgPSAoZXYpID0+IHtcblx0XHRldi5wcmV2ZW50RGVmYXVsdCgpO1xuXHR9XG5cblx0cHJpdmF0ZSBvbkRyYWdFbnRlciA9IChldikgPT4ge1xuXHRcdGlmIChldi5jbGllbnRZIDwgODApIHtcblx0XHRcdHRoaXMuc2Nyb2xsUGFnZSg0MCk7XG5cdFx0fSBlbHNlIGlmICh3aW5kb3cuaW5uZXJIZWlnaHQgLSBldi5jbGllbnRZIDwgODApIHtcblx0XHRcdHRoaXMuc2Nyb2xsUGFnZSgtNDApO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHR0aGlzLnN0b3BTY3JvbGxpbmcoKTtcblx0XHR9XG5cdFx0ZXYuZGF0YVRyYW5zZmVyLmRyb3BFZmZlY3QgPSAnbW92ZSc7XG5cdFx0Y29uc3QgdGFyZ2V0SW5kZXggPSB0aGlzLmRyYWdJdGVtcy5tYXAoZSA9PiBlLm5hdGl2ZUVsZW1lbnQpLmZpbmRJbmRleChlID0+IGUgPT09IChldi50YXJnZXQgYXMgSFRNTEVsZW1lbnQpKTtcblx0XHRpZiAodGFyZ2V0SW5kZXggPT09IC0xKSB7XG5cdFx0XHRyZXR1cm47XG5cdFx0fVxuXHRcdHRoaXMuY3VycmVudERyYWdQb3NpdGlvbiA9IHRhcmdldEluZGV4O1xuXHRcdHRoaXMuZHJhZ0l0ZW1zLmZvckVhY2goKGRyYWdJdGVtLCBpKSA9PiB7XG5cdFx0XHRpZiAodGhpcy5kcmFnU291cmNlSW5kZXggPT09IGkpIHtcblxuXHRcdFx0XHRpZiAodGhpcy5kcmFnU291cmNlSW5kZXggPiB0aGlzLmN1cnJlbnREcmFnUG9zaXRpb24pIHtcblx0XHRcdFx0XHRjb25zdCBoZWlnaHRzQWJvdmUgPSB0aGlzLmRyYWdJdGVtcy5maWx0ZXIoKGUsIGkpID0+IHtcblx0XHRcdFx0XHRcdGlmIChpID49IHRoaXMuZHJhZ1NvdXJjZUluZGV4KSB7XG5cdFx0XHRcdFx0XHRcdHJldHVybiBmYWxzZTtcblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHRcdHJldHVybiBpID4gdGhpcy5jdXJyZW50RHJhZ1Bvc2l0aW9uIC0gMTtcblx0XHRcdFx0XHR9KS5yZWR1Y2UoKGFjYywgY3VyLCBpKSA9PiB7XG5cdFx0XHRcdFx0XHRyZXR1cm4gYWNjICsgY3VyLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0O1xuXHRcdFx0XHRcdH0sIDApO1xuXHRcdFx0XHRcdGRyYWdJdGVtLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignLnZpc3VhbCcpLnN0eWxlLnRyYW5zZm9ybSA9IGB0cmFuc2xhdGVZKCR7LWhlaWdodHNBYm92ZX1weClgO1xuXHRcdFx0XHR9XG5cblx0XHRcdFx0ZWxzZSBpZiAodGhpcy5kcmFnU291cmNlSW5kZXggPCB0aGlzLmN1cnJlbnREcmFnUG9zaXRpb24pIHtcblx0XHRcdFx0XHRjb25zdCBoZWlnaHRzQWJvdmUgPSB0aGlzLmRyYWdJdGVtcy5maWx0ZXIoKGUsIGkpID0+IHtcblx0XHRcdFx0XHRcdGlmIChpIDw9IHRoaXMuZHJhZ1NvdXJjZUluZGV4KSB7XG5cdFx0XHRcdFx0XHRcdHJldHVybiBmYWxzZTtcblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHRcdHJldHVybiBpIDw9IHRoaXMuY3VycmVudERyYWdQb3NpdGlvbjtcblx0XHRcdFx0XHR9KS5yZWR1Y2UoKGFjYywgY3VyLCBpKSA9PiB7XG5cdFx0XHRcdFx0XHRyZXR1cm4gYWNjICsgY3VyLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0O1xuXHRcdFx0XHRcdH0sIDApO1xuXHRcdFx0XHRcdGRyYWdJdGVtLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignLnZpc3VhbCcpLnN0eWxlLnRyYW5zZm9ybSA9IGB0cmFuc2xhdGVZKCR7aGVpZ2h0c0Fib3ZlfXB4KWA7XG5cdFx0XHRcdH1cblxuXHRcdFx0XHRlbHNlIHtcblx0XHRcdFx0XHRkcmFnSXRlbS5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy52aXN1YWwnKS5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWSgkezB9cHgpYDtcblx0XHRcdFx0fVxuXG5cdFx0XHRcdHJldHVybjtcblx0XHRcdH1cblxuXHRcdFx0Y29uc3QgaGVpZ2h0T2ZDdXJyZW50bHlEcmFnZ2VkSXRlbSA9ICh0aGlzLmRyYWdJdGVtcy5nZXQodGhpcy5kcmFnU291cmNlSW5kZXgpLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0KTtcblx0XHRcdGlmICh0aGlzLnNob3VsZFNob3ZlRG93bihpKSkge1xuXHRcdFx0XHRkcmFnSXRlbS5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy52aXN1YWwnKS5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWSgke2hlaWdodE9mQ3VycmVudGx5RHJhZ2dlZEl0ZW19cHgpYDtcblx0XHRcdH1cblx0XHRcdGVsc2UgaWYgKHRoaXMuc2hvdWxkU2hvdmVVcChpKSkge1xuXHRcdFx0XHRkcmFnSXRlbS5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy52aXN1YWwnKS5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWSgkey1oZWlnaHRPZkN1cnJlbnRseURyYWdnZWRJdGVtfXB4KWA7XG5cdFx0XHR9XG5cdFx0XHRlbHNlIHtcblx0XHRcdFx0ZHJhZ0l0ZW0ubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcudmlzdWFsJykuc3R5bGUudHJhbnNmb3JtID0gYHRyYW5zbGF0ZVkoMCUpYDtcblx0XHRcdH1cblx0XHR9KTtcblxuXHRcdHRoaXMuY3VycmVudERyYWdQb3NpdGlvbiA9IHRhcmdldEluZGV4O1xuXHR9XG5cblx0cHJpdmF0ZSBvbkRyYWdTdGFydCA9IChldikgPT4ge1xuXHRcdGV2LmRhdGFUcmFuc2Zlci5lZmZlY3RBbGxvd2VkID0gJ21vdmUnO1xuXHRcdHRoaXMubmdab25lLnJ1bigoKSA9PiB7XG5cdFx0XHR0aGlzLmRyYWdTb3VyY2VJbmRleCA9IHRoaXMuZHJhZ0l0ZW1zLm1hcChlID0+IGUubmF0aXZlRWxlbWVudCkuZmluZEluZGV4KGUgPT4gZSA9PT0gZXYudGFyZ2V0KTtcblx0XHRcdHRoaXMuY3VycmVudERyYWdQb3NpdGlvbiA9IHRoaXMuZHJhZ1NvdXJjZUluZGV4O1xuXHRcdH0pO1xuXHR9O1xuXG5cdHByaXZhdGUgb25EcmFnRW5kID0gKGV2KSA9PiB7XG5cdFx0dGhpcy5zdG9wU2Nyb2xsaW5nKCk7XG5cdFx0Y29uc3QgbW92ZWRFbGVtZW50ID0gdGhpcy5pbm5lclZhbHVlW3RoaXMuZHJhZ1NvdXJjZUluZGV4XTtcblx0XHRjb25zdCBpc01vdmVkVG9MYXN0UGxhY2UgPSB0aGlzLmN1cnJlbnREcmFnUG9zaXRpb24gPT09IHRoaXMuaW5uZXJWYWx1ZS5sZW5ndGggLSAxO1xuXHRcdHRoaXMubmdab25lLnJ1bigoKSA9PiB7XG5cdFx0XHR0aGlzLmlubmVyVmFsdWUgPSB0aGlzLmlubmVyVmFsdWVcblx0XHRcdC5maWx0ZXIoKGUsIGkpID0+IGkgIT09IHRoaXMuZHJhZ1NvdXJjZUluZGV4KVxuXHRcdFx0LnJlZHVjZSgoYWNjLCBjdXIsIGkpID0+IHtcblx0XHRcdFx0aWYgKGkgPT09IHRoaXMuY3VycmVudERyYWdQb3NpdGlvbikge1xuXHRcdFx0XHRcdHJldHVybiBbLi4uYWNjLCBtb3ZlZEVsZW1lbnQsIGN1cl07XG5cdFx0XHRcdH1cblx0XHRcdFx0cmV0dXJuIFsuLi5hY2MsIGN1cl07XG5cdFx0XHR9LCBbXSk7XG5cdFx0XHRpZiAoaXNNb3ZlZFRvTGFzdFBsYWNlKSB7XG5cdFx0XHRcdHRoaXMuaW5uZXJWYWx1ZSA9IFsuLi50aGlzLmlubmVyVmFsdWUsIG1vdmVkRWxlbWVudF07XG5cdFx0XHR9XG5cdFx0XHR0aGlzLmRyYWdJdGVtcy5mb3JFYWNoKChkcmFnSXRlbSwgaSkgPT4ge1xuXHRcdFx0XHRkcmFnSXRlbS5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy52aXN1YWwnKS5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWSgwJSlgO1xuXHRcdFx0fSk7XG5cdFx0XHR0aGlzLmN1cnJlbnREcmFnUG9zaXRpb24gPSAtMTtcblx0XHRcdHRoaXMuZHJhZ1NvdXJjZUluZGV4ID0gLTE7XG5cdFx0XHR0aGlzLnNldElubmVyVmFsdWVBbmROb3RpZnkodGhpcy5pbm5lclZhbHVlKTtcblx0XHR9KTtcblx0fVxuXG5cdHNob3VsZFNob3ZlRG93bihpbmRleDogbnVtYmVyKTogYm9vbGVhbiB7XG5cdFx0cmV0dXJuIHRoaXMuZHJhZ1NvdXJjZUluZGV4ID4gaW5kZXggJiYgdGhpcy5jdXJyZW50RHJhZ1Bvc2l0aW9uIDw9IGluZGV4O1xuXHR9XG5cblx0c2hvdWxkU2hvdmVVcChpbmRleDogbnVtYmVyKTogYm9vbGVhbiB7XG5cdFx0cmV0dXJuIHRoaXMuZHJhZ1NvdXJjZUluZGV4IDwgaW5kZXggJiYgdGhpcy5jdXJyZW50RHJhZ1Bvc2l0aW9uID49IGluZGV4O1xuXHR9XG5cblx0cHJpdmF0ZSBzY3JvbGxQYWdlKHNjcm9sbEFtb3VudDogbnVtYmVyKTogdm9pZCB7XG5cdFx0aWYgKCFpc1ZhbHVlU2V0KHRoaXMuc2Nyb2xsSW50ZXJ2YWwpKSB7XG5cdFx0XHR0aGlzLnNjcm9sbEludGVydmFsID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuXHRcdFx0XHR3aW5kb3cuc2Nyb2xsKHtcblx0XHRcdFx0XHR0b3A6IGRvY3VtZW50LnNjcm9sbGluZ0VsZW1lbnQuc2Nyb2xsVG9wIC0gc2Nyb2xsQW1vdW50LFxuXHRcdFx0XHRcdGJlaGF2aW9yOiAnc21vb3RoJyxcblx0XHRcdFx0fSk7XG5cdFx0XHRcdGlmIChkb2N1bWVudC5zY3JvbGxpbmdFbGVtZW50LnNjcm9sbFRvcCA8PSAxMDApIHtcblx0XHRcdFx0XHR0aGlzLnN0b3BTY3JvbGxpbmcoKTtcblx0XHRcdFx0fVxuXHRcdFx0fSwgMTAwKTtcblx0XHR9XG5cdH1cblxuXHRwcml2YXRlIHN0b3BTY3JvbGxpbmcoKTogdm9pZCB7XG5cdFx0Y2xlYXJJbnRlcnZhbCh0aGlzLnNjcm9sbEludGVydmFsKTtcblx0XHR0aGlzLnNjcm9sbEludGVydmFsID0gbnVsbDtcblx0fVxufVxuIiwiZHJhZ0luUHJvZ3Jlc3Mge3tkcmFnU291cmNlSW5kZXh9fSB7e2lubmVyVmFsdWUgfCBqc29ufX1cbjxuZy10ZW1wbGF0ZSAjbGlzdEl0ZW0+XG5cdDxsaSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpbm5lclZhbHVlOyBpbmRleCBhcyBpbmRleFwiXG5cdFx0XHRjbGFzcz1cInNvcnRhYmxlSXRlbVwiXG5cdFx0XHRbZHJhZ2dhYmxlXT1cIiFkaXNhYmxlZFwiXG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRsYXJnZVNvcnRhYmxlSXRlbTogc29ydGFibGVJdGVtU2l6ZSA9PT0gJ2xnJyxcblx0XHQgXHRzbWFsbFNvcnRhYmxlSXRlbTogc29ydGFibGVJdGVtU2l6ZSA9PT0gJ3NtJyxcblx0XHQgXHR9XCJcblx0XHRcdCNkcmFnSXRlbVxuXHQ+XG5cdFx0PGRpdiBjbGFzcz1cInZpc3VhbFwiPlxuXHRcdFx0PG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJ0ZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IGl0ZW06IGl0ZW0sIGluZGV4OmluZGV4IH1cIj48L25nLWNvbnRhaW5lcj5cblx0XHQ8L2Rpdj5cblx0PC9saT5cbjwvbmctdGVtcGxhdGU+XG5cbjxvbCAqbmdJZj0nIWRpc2FibGVkJ1xuXHRcdGNsYXNzPVwiaXRlbXNDb250YWluZXJcIlxuXHRcdFtuZ0NsYXNzXT1cIntkcmFnSW5Qcm9ncmVzczogZHJhZ1NvdXJjZUluZGV4ID49IDB9XCJcbj5cblx0PG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImxpc3RJdGVtXCI+PC9uZy1jb250YWluZXI+XG48L29sPlxuXG48b2wgKm5nSWY9J2Rpc2FibGVkJyBjbGFzcz1cIml0ZW1zQ29udGFpbmVyIGRpc2FibGVkLW1vdXNlLWN1cnNvclwiPlxuXHQ8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibGlzdEl0ZW1cIj48L25nLWNvbnRhaW5lcj5cbjwvb2w+XG4iXX0=

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output, InjectionToken, TemplateRef, Inject, ViewChild, ContentChild, Host, HostBinding, inject, NgModule } from '@angular/core';
+import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output, InjectionToken, TemplateRef, Inject, ViewChild, ContentChild, Host, HostBinding, ViewChildren, inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -8,7 +8,6 @@ import { isString } from 'lodash-es';
 import { isArray } from 'lodash';
 import * as i4 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i2$1 from '@dustfoundation/ngx-sortablejs';
 import { SortablejsModule } from '@dustfoundation/ngx-sortablejs';
 import { isSameDay, format, startOfMonth, endOfMonth, parse } from 'date-fns';
 import * as i3 from '@angular/material/core';
@@ -1500,39 +1499,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class SortableItemsComponent extends ValueAccessorBase {
-    constructor() {
-        super(...arguments);
+    constructor(parent, controlContainer, ngZone) {
+        super(parent, controlContainer);
+        this.parent = parent;
+        this.controlContainer = controlContainer;
+        this.ngZone = ngZone;
         this.sortableItemSize = 'lg';
-        this.useCustomScroll = false;
         this.scrollInterval = null;
-        this.itemsOrderChanged = () => {
-            this.setInnerValueAndNotify(this.innerValue);
+        this.onDragOver = (ev) => {
+            ev.preventDefault();
         };
-        this.onItemDrag = (data) => {
-            // if the item you're dragging is reaching the top, start scrolling.
-            if (data.relatedRect.top < 100) {
-                this.scrollPage(100);
+        this.onDragEnter = (ev) => {
+            if (ev.clientY < 80) {
+                this.scrollPage(40);
+            }
+            else if (window.innerHeight - ev.clientY < 80) {
+                this.scrollPage(-40);
             }
             else {
                 this.stopScrolling();
             }
+            ev.dataTransfer.dropEffect = 'move';
+            const targetIndex = this.dragItems.map(e => e.nativeElement).findIndex(e => e === ev.target);
+            if (targetIndex === -1) {
+                return;
+            }
+            this.currentDragPosition = targetIndex;
+            this.dragItems.forEach((dragItem, i) => {
+                if (this.dragSourceIndex === i) {
+                    if (this.dragSourceIndex > this.currentDragPosition) {
+                        const heightsAbove = this.dragItems.filter((e, i) => {
+                            if (i >= this.dragSourceIndex) {
+                                return false;
+                            }
+                            return i > this.currentDragPosition - 1;
+                        }).reduce((acc, cur, i) => {
+                            return acc + cur.nativeElement.getBoundingClientRect().height;
+                        }, 0);
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${-heightsAbove}px)`;
+                    }
+                    else if (this.dragSourceIndex < this.currentDragPosition) {
+                        const heightsAbove = this.dragItems.filter((e, i) => {
+                            if (i <= this.dragSourceIndex) {
+                                return false;
+                            }
+                            return i <= this.currentDragPosition;
+                        }).reduce((acc, cur, i) => {
+                            return acc + cur.nativeElement.getBoundingClientRect().height;
+                        }, 0);
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${heightsAbove}px)`;
+                    }
+                    else {
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${0}px)`;
+                    }
+                    return;
+                }
+                const heightOfCurrentlyDraggedItem = (this.dragItems.get(this.dragSourceIndex).nativeElement.getBoundingClientRect().height);
+                if (this.shouldShoveDown(i)) {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${heightOfCurrentlyDraggedItem}px)`;
+                }
+                else if (this.shouldShoveUp(i)) {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(${-heightOfCurrentlyDraggedItem}px)`;
+                }
+                else {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
+                }
+            });
+            this.currentDragPosition = targetIndex;
+        };
+        this.onDragStart = (ev) => {
+            ev.dataTransfer.effectAllowed = 'move';
+            this.ngZone.run(() => {
+                this.dragSourceIndex = this.dragItems.map(e => e.nativeElement).findIndex(e => e === ev.target);
+                this.currentDragPosition = this.dragSourceIndex;
+            });
         };
-        this.onEnd = () => {
+        this.onDragEnd = (ev) => {
             this.stopScrolling();
+            const movedElement = this.innerValue[this.dragSourceIndex];
+            const isMovedToLastPlace = this.currentDragPosition === this.innerValue.length - 1;
+            this.ngZone.run(() => {
+                this.innerValue = this.innerValue
+                    .filter((e, i) => i !== this.dragSourceIndex)
+                    .reduce((acc, cur, i) => {
+                    if (i === this.currentDragPosition) {
+                        return [...acc, movedElement, cur];
+                    }
+                    return [...acc, cur];
+                }, []);
+                if (isMovedToLastPlace) {
+                    this.innerValue = [...this.innerValue, movedElement];
+                }
+                this.dragItems.forEach((dragItem, i) => {
+                    dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
+                });
+                this.currentDragPosition = -1;
+                this.dragSourceIndex = -1;
+                this.setInnerValueAndNotify(this.innerValue);
+            });
         };
     }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.useCustomScroll) {
-            this.sortablejsOptions = {
-                onUpdate: this.itemsOrderChanged,
-                onMove: this.onItemDrag,
-                onEnd: this.onEnd,
-            };
-        }
-        else {
-            this.sortablejsOptions = { onUpdate: this.itemsOrderChanged };
-        }
+    ngAfterViewInit() {
+        this.dragItems.changes.subscribe(() => {
+            this.dragItems.forEach(e => {
+                this.ngZone.runOutsideAngular(() => {
+                    e.nativeElement.removeEventListener('dragstart', this.onDragStart);
+                    e.nativeElement.removeEventListener('dragover', this.onDragOver);
+                    e.nativeElement.removeEventListener('dragenter', this.onDragEnter);
+                    e.nativeElement.removeEventListener('dragend', this.onDragEnd);
+                    e.nativeElement.addEventListener('dragstart', this.onDragStart);
+                    e.nativeElement.addEventListener('dragover', this.onDragOver);
+                    e.nativeElement.addEventListener('dragenter', this.onDragEnter);
+                    e.nativeElement.addEventListener('dragend', this.onDragEnd);
+                    this.dragItems.forEach((dragItem, i) => {
+                        dragItem.nativeElement.querySelector('.visual').style.transform = `translateY(0%)`;
+                    });
+                });
+            });
+        });
+    }
+    shouldShoveDown(index) {
+        return this.dragSourceIndex > index && this.currentDragPosition <= index;
+    }
+    shouldShoveUp(index) {
+        return this.dragSourceIndex < index && this.currentDragPosition >= index;
     }
     scrollPage(scrollAmount) {
         if (!isValueSet(this.scrollInterval)) {
@@ -1551,14 +1641,14 @@ class SortableItemsComponent extends ValueAccessorBase {
         clearInterval(this.scrollInterval);
         this.scrollInterval = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize", useCustomScroll: "useCustomScroll" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableItemsComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize" }, 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"] }] }); }
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dragItems", predicate: ["dragItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "dragInProgress {{dragSourceIndex}} {{innerValue | json}}\n<ng-template #listItem>\n\t<li *ngFor=\"let item of innerValue; index as index\"\n\t\t\tclass=\"sortableItem\"\n\t\t\t[draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n\t\t\t#dragItem\n\t>\n\t\t<div class=\"visual\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n\t\t</div>\n\t</li>\n</ng-template>\n\n<ol *ngIf='!disabled'\n\t\tclass=\"itemsContainer\"\n\t\t[ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\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}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none;cursor:grab}.sortableItem .visual{border-top:1px solid #e6ecf5}.sortableItem .visual:hover{background:#f8f9fa}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{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: "pipe", type: i1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableItemsComponent, decorators: [{
             type: Component,
@@ -1568,14 +1658,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             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: [{
+                    ], template: "dragInProgress {{dragSourceIndex}} {{innerValue | json}}\n<ng-template #listItem>\n\t<li *ngFor=\"let item of innerValue; index as index\"\n\t\t\tclass=\"sortableItem\"\n\t\t\t[draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n\t\t\t#dragItem\n\t>\n\t\t<div class=\"visual\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n\t\t</div>\n\t</li>\n</ng-template>\n\n<ol *ngIf='!disabled'\n\t\tclass=\"itemsContainer\"\n\t\t[ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\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}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none;cursor:grab}.sortableItem .visual{border-top:1px solid #e6ecf5}.sortableItem .visual:hover{background:#f8f9fa}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"] }]
+        }], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i2.ControlContainer, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i0.NgZone }], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }], sortableItemSize: [{
                 type: Input
-            }], useCustomScroll: [{
-                type: Input
+            }], dragItems: [{
+                type: ViewChildren,
+                args: ['dragItem']
             }] } });
 
 class TextInputComponent extends ValueAccessorBase {
@@ -2383,6 +2482,7 @@ class SortableGroupedItemsComponent extends ValueAccessorBase {
         setTimeout(() => {
             if (arrayIsSetAndFilled(value)) {
                 this.items = value.flatMap(e => [...e, '']);
+                console.log(this.items);
             }
             else {
                 this.items = [];
@@ -2391,6 +2491,8 @@ class SortableGroupedItemsComponent extends ValueAccessorBase {
         });
     }
     onItemsRearranged(value) {
+        console.log('gers');
+        console.log(value);
         const result = splitArrayByCondition(value, e => e === '').filter(arrayIsSetAndFilled);
         this.setInnerValueAndNotify(result);
         this.reloader = false;
@@ -2408,11 +2510,11 @@ class SortableGroupedItemsComponent extends ValueAccessorBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortableGroupedItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SortableGroupedItemsComponent, selector: "klp-form-sortable-grouped-items", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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"] }]
+            args: [{ selector: 'klp-form-sortable-grouped-items', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], template: "<ng-container>\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--';