fix(form): animate sorting of collapsible sections

src/components/form/form.scss

@@ -286,3 +286,14 @@ limel-code-editor {
 }
 
 @import './row/row.scss';
+
+limel-collapsible-section {
+    transition: transform 0.3s ease-in-out;
+
+    &.move-up-transition {
+        transform: translateY(-100%);
+    }
+    &.move-down-transition {
+        transform: translateY(100%);
+    }
+}

src/components/form/templates/array-field-collapsible-item.ts

@@ -103,7 +103,53 @@ export class CollapsibleItemTemplate extends React.Component {
 
     private handleAction(event: CustomEvent<Action & Runnable>) {
         event.stopPropagation();
-        event.detail.run(event);
+
+        const moveTransitionSpeed = 300; // This must be kept the same as the transition speed in the CSS
+        const up = 'move-up-transition';
+        const down = 'move-down-transition';
+        // Access the DOM element
+        const section: HTMLLimelCollapsibleSectionElement = this.refs.section;
+
+        // Determine whether it's a move up or move down action
+        const isMoveUp = event.detail.id === 'up';
+
+        // Get the previous and next collapsible sections
+        const previousSection =
+            section.previousElementSibling as HTMLLimelCollapsibleSectionElement;
+        const nextSection =
+            section.nextElementSibling as HTMLLimelCollapsibleSectionElement;
+
+        // Add the appropriate class to the current section
+        if (isMoveUp) {
+            section.classList.add(up);
+        } else {
+            section.classList.add(down);
+        }
+
+        // Add the opposite class to the adjacent sections
+        if (previousSection && isMoveUp) {
+            previousSection.classList.add(down);
+        }
+
+        if (nextSection && !isMoveUp) {
+            nextSection.classList.add(up);
+        }
+
+        // Remove the classes after a short delay to trigger the transition
+        setTimeout(() => {
+            section.classList.remove(up, down);
+
+            if (previousSection) {
+                previousSection.classList.remove(down);
+            }
+
+            if (nextSection) {
+                nextSection.classList.remove('move-up-transition');
+            }
+
+            // Perform the action
+            event.detail.run(event);
+        }, moveTransitionSpeed); // Adjust the delay to match your transition duration
     }
 
     private isDeepEmpty(data) {