ng-configcat-publicapi-ui 5.6.3 → 5.6.4

package/fesm2022/ng-configcat-publicapi-ui.mjs

@@ -35,7 +35,7 @@ import { config, edit } from 'ace-builds/src-min-noconflict/ace';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-tomorrow';
 import 'ace-builds/src-noconflict/theme-github_dark';
-import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { MatDivider } from '@angular/material/divider';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { CdkCopyToClipboard, Clipboard } from '@angular/cdk/clipboard';
@@ -2326,6 +2326,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }], propDecorators: { selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "appDeselect", required: false }] }] } });
 
+// When moving items in a formArray, we should not do it via the recommended way on the angular dragndrop documentations.
+// It recommends a simple moveItemInArray(formArray.controls). But doing that will not fire change events, etc.
+// This item is working on the FormArray's recommended way to push, remove items - do it directly on the FormArray.
+// It is not an array, so we cannot call moveItemInArray on it, but it has methods to modify the array.
+function moveItemInFormArray(formArray, previousIndex, currentIndex) {
+    if (previousIndex === currentIndex)
+        return;
+    const draggedItem = formArray.at(previousIndex);
+    formArray.removeAt(previousIndex);
+    // Insert at the drop index. CDK's currentIndex is the intended insertion position
+    // after removal, inserting at event.currentIndex places the control in the
+    // position equivalent to the CDK moveItemInArray behavior.
+    formArray.insert(currentIndex, draggedItem);
+    formArray.markAsDirty();
+}
+
 class RolloutRulesComponent {
     constructor() {
         this.dialog = inject(MatDialog);
@@ -2375,9 +2391,7 @@ class RolloutRulesComponent {
         this.formGroup().controls.rolloutRules.markAsDirty();
     }
     onDrop(event) {
-        const rolloutRules = this.formGroup().controls.rolloutRules.controls;
-        moveItemInArray(rolloutRules, event.previousIndex, event.currentIndex);
-        this.formGroup().markAsDirty();
+        moveItemInFormArray(this.formGroup().controls.rolloutRules, event.previousIndex, event.currentIndex);
     }
     attributeChanged(eventTarget, comparisonAttribute) {
         const event = eventTarget.value;
@@ -4566,8 +4580,7 @@ class VariationsDialogComponent {
         });
     }
     dropTable(event) {
-        moveItemInArray(this.formGroup.controls.predefinedVariations.controls, event.previousIndex, event.currentIndex);
-        this.formGroup.controls.predefinedVariations.markAsDirty();
+        moveItemInFormArray(this.formGroup.controls.predefinedVariations, event.previousIndex, event.currentIndex);
         this.setDataSource();
     }
     getColorIndex(row, index) {
@@ -6596,9 +6609,7 @@ class EvaluationFormulaComponent {
         return true;
     }
     onDrop(event) {
-        const targetingRules = this.formGroup().controls.targetingRules.controls;
-        moveItemInArray(targetingRules, event.previousIndex, event.currentIndex);
-        this.formGroup().markAsDirty();
+        moveItemInFormArray(this.formGroup().controls.targetingRules, event.previousIndex, event.currentIndex);
         this.recalcAddButtons.emit();
     }
     isDragDisabled(targetingRule) {
@@ -7457,7 +7468,7 @@ class FeatureFlagItemComponent extends BaseComponent {
         return dialogRef.afterClosed();
     }
     canDeactivate() {
-        return !this.formGroup?.dirty;
+        return !this.formGroupDirty();
     }
     viewVariations(event) {
         if (!this.canDeactivate()) {