#3571917 "Add ability to"

Testing steps

• Checkout this branch, enable canvas_test_sdc and run npm run build under the /ui directory.
• Create a new code-component.
• Add a prop to the component.
• Confirm that the "Allow multiple values" checkbox is visible and unchecked by default.
• Cycle through all prop-types and confirm the "Allow multiple values" checkbox is visible for every type except "Boolean" and "Formatted text".
• Check the "Allow multiple values" checkbox, then change the prop-type; confirm the checkbox resets to unchecked for the new prop-type.

For Text, Integer and Number prop-types

• Check "Allow multiple values" and confirm:
• The "Example value" input changes to a list of rows (one row shown by default).
• A dropdown appears under the "Allow multiple values" checkbox with 'Unlimited' selected by default.
• Confirm the first row of the "Example value" has the drag handle and delete icon disabled.
• Click "+ Add value" and confirm that all rows now have the drag handle and delete icon enabled.
• Input values, then drag-and-drop and delete rows to confirm functionality.
• Change "Unlimited" to "Limited" from the dropdown and confirm:
• The "+ Add value" button disappears.
• Only one "Example value" row remains (drag icon disabled).
• A numeric limit input appears (defaulting to 1) to define the maximum number of allowed values with increment (+) and decrement (-) icons.
• Click the increment icon to increase the limit and confirm new "Example value" rows are added automatically with drag handles enabled.
• Input values and confirm that drag-and-drop works for the limited rows.

For media(image and video) prop-types

• Check "Allow multiple values" and confirm the dropdown appears under the "Allow multiple values" checkbox with 'Unlimited' selected by default.
• Change "Unlimited" to "Limited" from the dropdown and confirm the numeric limit input appears (defaulting to 1) with increment/decrement icons.

For list(text and integer) prop-types

• Add several options to the list.
• Check "Allow multiple values" and confirm:
• The Default value dropdown has a multiple select list to select default values.
• A dropdown appears under the "Allow multiple values" checkbox with 'Unlimited' selected by default.
• Select multiple default values and confirm the selection trigger correctly displays the count of selected items.
• Change "Unlimited" to "Limited" from the dropdown and confirm:
• The numeric limit input appears (defaulting to 1) with increment/decrement icons.
• Only one default value can remain selected; other options become disabled.
• Increase the numeric limit and confirm that additional values in the selection list become enabled for selection.
• Select values until the limit is reached and confirm that no further values can be selected.

For date-time and link prop-types

• Check "Allow multiple values" and confirm:
• The "Example value" input changes to a list of rows (one row shown by default).
• A dropdown appears under the "Allow multiple values" checkbox with 'Unlimited' selected by default.
• Confirm the first row of the "Example value" has the drag handle and delete icon disabled.
• Click "+ Add value" and confirm that all rows now have the drag handle and delete icon enabled.
• Input values, then drag-and-drop and delete rows to confirm functionality.
• Change "Unlimited" to "Limited" from the dropdown and confirm:
• The "+ Add value" button disappears.
• Only one "Example value" row remains (drag icon disabled).
• A numeric limit input appears (defaulting to 1) to define the maximum number of allowed values with increment (+) and decrement (-) icons.
• Click the increment icon to increase the limit and confirm new "Example value" rows are added automatically with drag handles enabled.
• Input values and confirm that drag-and-drop works for the limited rows.
• Change the Date type (e.g., Date to Date-time) or Link type and confirm:
• The selection in dropdown "Limited/Unlimited" resets to "Unlimited".
• The "Example value" list resets to a single row with drag and delete icons disabled.