Implement Dynamic Key/Value Field Component for Edit Contentlet

[oidacra]

Parent Issue

#25445

User Story

As a content editor, I want to be able to manage dynamic key/value pairs in the Edit Contentlet interface, so I can efficiently organize and maintain structured data with flexible key-value relationships.

Acceptance Criteria

1. Dynamic Field Management

   • Users can add unlimited key/value pairs
   • New entries appear at the top of the list
   • Maximum 6 pairs shown per page with pagination
   • Must use PrimeNG table component for display

2. Validation Requirements

   • Both key and value fields must be filled before adding a new pair
   • Display error message if user attempts to add new line with empty fields
   • Support for custom validations defined in content type configuration

3. UI/UX Features

   • Drag and drop functionality for reordering pairs
   • Delete icon/button for removing individual pairs
   • Clear visual indication of required fields
   • Implement the visual style of the Figma File

4. Pagination

   • Implement PrimeNG pagination when more than 6 pairs exist
   • Clear indication of total pairs and current page
   • Smooth navigation between pages

Proposed Objective

Technical User Experience

Proposed Priority

Priority 2 - Important

External Links

Figma File

Assumptions & Initiation Needs

Quality Assurance Notes & Workarounds

Test Cases to Consider:

1. Adding/removing pairs
2. Drag and drop reordering
3. Pagination navigation
4. Validation scenarios
5. Required field handling
6. Performance with large datasets

[oidacra]

No will be implemented the new design.