@klippa/ngx-enhancy-forms 18.23.9 → 18.25.0

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

@@ -1,14 +1,13 @@
 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';
-import { UntypedFormArray, UntypedFormGroup, FormControl, UntypedFormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup, FormControl, UntypedFormControl, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 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';
@@ -173,6 +172,7 @@ class FormComponent {
         this.activeControls = [];
     }
     ngOnInit() {
+        this.topLevelFormControl = this.formGroup ?? this.formArray;
         if (isValueSet(this.patchValueInterceptor)) {
             this.addSupportForPatchValueInterceptor();
         }
@@ -184,13 +184,13 @@ class FormComponent {
                     throw new Error(`cannot index FormArray with ${typeof injectAt}`);
                 }
                 if (injectInto.at(injectAt)?.disabled) {
-                    this.formGroup.disable();
+                    this.topLevelFormControl.disable();
                 }
                 const valueBeforeInject = injectInto.at(injectAt)?.value;
                 if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject);
+                    this.topLevelFormControl.patchValue(valueBeforeInject);
                 }
-                injectInto.setControl(injectAt, this.formGroup);
+                injectInto.setControl(injectAt, this.topLevelFormControl);
                 this.onInjected.emit(valueBeforeInject);
             }
             else if (injectInto instanceof UntypedFormGroup) {
@@ -198,13 +198,13 @@ class FormComponent {
                     throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
                 }
                 if (injectInto.get(injectAt)?.disabled) {
-                    this.formGroup.disable();
+                    this.topLevelFormControl.disable();
                 }
                 const valueBeforeInject = injectInto.get(injectAt)?.value;
                 if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject);
+                    this.topLevelFormControl.patchValue(valueBeforeInject);
                 }
-                injectInto.setControl(injectAt, this.formGroup);
+                injectInto.setControl(injectAt, this.topLevelFormControl);
                 this.onInjected.emit(valueBeforeInject);
             }
         }
@@ -225,7 +225,7 @@ class FormComponent {
             const injectInto = this.subFormPlaceholder.injectInto;
             const injectAt = this.subFormPlaceholder.at;
             if (injectInto instanceof UntypedFormArray) {
-                const idx = injectInto.controls.findIndex(e => e === this.formGroup);
+                const idx = injectInto.controls.findIndex(e => e === this.topLevelFormControl);
                 injectInto.setControl(idx, new FormControl());
             }
             else if (injectInto instanceof UntypedFormGroup) {
@@ -275,15 +275,15 @@ class FormComponent {
         };
     }
     addSupportForPatchValueInterceptor() {
-        const fn = this.formGroup.patchValue;
+        const fn = this.topLevelFormControl.patchValue;
         const newFn = (value, options) => {
             this.patchValueInterceptor(value).then((val) => {
                 setTimeout(() => {
-                    fn.call(this.formGroup, val, options);
+                    fn.call(this.topLevelFormControl, val, options);
                 });
             });
         };
-        this.formGroup.patchValue = newFn;
+        this.topLevelFormControl.patchValue = newFn;
     }
     registerControl(formControl, formElement) {
         this.activeControls.push({ formControl, formElement });
@@ -334,7 +334,12 @@ class FormComponent {
     }
     getAllFormControls() {
         const result = [];
-        this.addFormGroupControls(this.formGroup, result);
+        if (this.topLevelFormControl instanceof FormGroup) {
+            this.addFormGroupControls(this.topLevelFormControl, result);
+        }
+        else if (this.topLevelFormControl instanceof FormArray) {
+            this.addFormArrayControls(this.topLevelFormControl, result);
+        }
         return result;
     }
     addFormControl(control, result) {
@@ -352,36 +357,39 @@ class FormComponent {
         return this.warnings.get(control);
     }
     trySubmit() {
-        this.formGroup.markAllAsTouched();
+        this.topLevelFormControl.markAllAsTouched();
         const allControls = this.getAllFormControls();
         const originalDisabledStates = allControls.map(e => {
             return { control: e, disabled: e.disabled };
         });
         allControls.forEach(e => this.disableInactiveFormControl(e));
         allControls.forEach(e => e.updateValueAndValidity());
-        const formGroupValue = this.formGroup.value;
-        const renderedAndEnabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, true);
-        const renderedButDisabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, false);
-        return new Promise((resolve, reject) => {
-            if (this.formGroup.pending) {
-                const sub = this.formGroup.statusChanges.subscribe((res) => {
-                    if (res !== 'PENDING') {
-                        sub.unsubscribe();
-                        this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
-                            .then(resolve)
-                            .catch(reject);
-                    }
-                });
-            }
-            else {
-                this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
-                    .then(resolve)
-                    .catch(reject);
-            }
-        });
+        const formGroupValue = this.topLevelFormControl.value;
+        if (this.topLevelFormControl instanceof FormGroup) {
+            const renderedAndEnabledValues = this.getRenderedFieldValuesFormGroup(this.topLevelFormControl, true);
+            const renderedButDisabledValues = this.getRenderedFieldValuesFormGroup(this.topLevelFormControl, false);
+            return new Promise((resolve, reject) => {
+                if (this.topLevelFormControl.pending) {
+                    const sub = this.topLevelFormControl.statusChanges.subscribe((res) => {
+                        if (res !== 'PENDING') {
+                            sub.unsubscribe();
+                            this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
+                                .then(resolve)
+                                .catch(reject);
+                        }
+                    });
+                }
+                else {
+                    this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
+                        .then(resolve)
+                        .catch(reject);
+                }
+            });
+        }
+        throw new Error('Submitting a FormArray as topLevel not supported (yet). Wrap it in a FormGroup.');
     }
     handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue) {
-        if (this.formGroup.invalid) {
+        if (this.topLevelFormControl.invalid) {
             this.activeControls.find((e) => e.formControl.invalid)?.formElement?.scrollTo();
             this.setDisabledStatesForAllControls(originalDisabledStates);
             return Promise.reject(invalidFieldsSymbol);
@@ -436,7 +444,7 @@ class FormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormComponent, deps: [{ token: FormComponent, optional: true, skipSelf: true }, { token: SubFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", warnings: "warnings", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", formArray: "formArray", warnings: "warnings", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -455,6 +463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], formArray: [{
+                type: Input
             }], warnings: [{
                 type: Input
             }], errors: [{
@@ -1489,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)) {
@@ -1540,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,
@@ -1557,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 {
@@ -2372,6 +2482,7 @@ class SortableGroupedItemsComponent extends ValueAccessorBase {
         setTimeout(() => {
             if (arrayIsSetAndFilled(value)) {
                 this.items = value.flatMap(e => [...e, '']);
+                console.log(this.items);
             }
             else {
                 this.items = [];
@@ -2380,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;
@@ -2397,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--';