Added drag functionality in admin tabs

[Abhinegi2]

closes: #2269

Visible/Frontend Changes

• Added drag icon on the tabs
• We can now drag tabs horizontally
• Created a sort function to drag tabs
• overall self testing

Description of changes

1. Import Drag and Drop Modules: Added imports for drag and drop functionality from @angular/cdk/drag-drop. This allows you to use Angular's built-in drag-and-drop features for reordering tabs.
2. Added cdkDropList and cdkDrag directives to enable drag-and-drop functionality.
3. HTML file changes -

• Wrapped the tab content inside a div with cdkDropList directive to make it a drop target for dragging tabs.
• Added drag handle icon for each tab
• Added cddDropListConnectedTo directive to specify which drop lists are considered connected. This allows tabs to be dragged between different instances of the component if needed.
• Utilized cdkDragLockAxis to lock the dragging movement along the x-axis.

4. Added Drag and Drop Logic to the Component.ts file
5. Created a method getAllTabs to generate an array of IDs for all tabs.
6. Implemented a drop method to handle the drop event and update the order of tabs.
7. Ensured that the selected tab is still active after dropping the active tab.
8. Used JSON.stringify and JSON.parse for Angular Ivy render bugs that are occurring when updating the tabs array.

[github-actions]

Deployed to https://pr-2305.aam-digital.net/

[sleidig]

Works fairly well :-)

• The handle is not shown properly for the active tab yet:

• Also, the drop preview (how the element is displayed during dragging, while not lifting the mouse yet) is showing the moved element on top of the next one rather than to the side, but I am not sure how difficult this is to fix as all of that is in the mat-tab layouts.

• when I drag the currently active tab, after dropping it suddenly another (the new first tab) is selected. The selected tab should ideally remain active

A thought about usability overall, now that I see it in action: What do you think about only making the current active tab draggable (with the handle next to the title form field)? Then there would be a bit less complexity in the UI overall, with less drag handles

[aam-digital-ci]

🎉 This PR is included in version 3.34.2-master.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[aam-digital-ci]

🎉 This PR is included in version 3.34.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀