Add selectedLabelRenderer to enable the ability to customize the selected label

[uluk01]

Title: Add Customizable Selected Label in ux-select

---

Description:
We need to implement a feature that allows customization of the label displayed for the selected option in the ux-select component.

Proposed Solution:
Introduce a new prop selectedLabelRenderer that enables users to define how the label for the selected option should be displayed.

Example 1:
The prop receives a data object representing the selected option:

selectedLabelRenderer: (data) => {
  return `${data.value} | ${data.country} | ${data.label}`;
},

Example 2:
Alternatively, the prop can also pass the option element itself, allowing more flexibility to access its attributes or dataset:

selectedLabelRenderer: (data, option) => {
  return `${option.dataset.country} | ${data.label}`;
},

Use Cases:

• Display additional information in the selected label, such as country names, custom attributes, or concatenated values.
• Allow users to tailor the label display to match specific UX/UI requirements.

Expected Outcome:
ux-select should render a label based on the function provided in the selectedLabelRenderer prop, offering complete customization of the selected option's appearance.

[afonja14755]

@uluk01, thank you for your request. I will look into this feature and add it soon.