Feature Request: "Select All" Option for Spartan-NG Select Control

[jon9090]

Which scope/s are relevant/related to the feature request?

select

Information

Description: Requesting a "Select All" option for the Spartan-NG select control component. This feature would enable users to efficiently select all options with one click, enhancing usability and saving time.

Benefits:

• Streamlines selection process
• Improves user experience
• Enhances customization options

Implementation:

• Clear UI design
• Accessibility considerations
• Seamless integration with existing component

Example: Users can easily select all options in the dropdown menu with a single click on the "Select All" checkbox.

Conclusion: The addition of this feature would significantly improve the spartan-ng library's select control, providing users with a more efficient and user-friendly experience.

Thank you for considering this enhancement.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[sefatanam]

Hi @goetzrobin

I have a small update on this feature. I've added a 'Select All' feature to the multi-select component. Before I proceed further, I'd like to hear your thoughts. Any feedback you provide will be greatly appreciated. Thanks

[thatsamsonkid]

So I also had imagined this also as just an option under the select dropdown with maybe some value="*" or something. @jon9090 is what @sefatanam put together what you are looking for?

[wizardnet972]

Hey @thatsamsonkid, I've created my own code for the "select all" feature without making any alterations to the existing source code. Let me know if you'd like me to send a pull request.

 <hlm-select-content>
     <hlm-option value="select-all" selectAll [allValues]="options">All</hlm-option>
      <hlm-option *ngFor="let option of options" ....

[sefatanam]

Hey @thatsamsonkid, I've integrated the "select all" option into my code without making any alterations to the source code. Let me know if you'd like me to submit a pull request.

 <hlm-select-content>
     <hlm-option value="select-all" selectAll [allValues]="options">All</hlm-option>
      <hlm-option *ngFor="let option of options" ....

great job, I have a different solution, seems like your solution is much better than me 👍

I build up something like,

<hlm-option-all value="*">Select All </hlm-select-all>

[thatsamsonkid]

@wizardnet972 - Yea I think that would be great fi you can raise that and we can take a look. Providing an example of how to do this in the docs I think would be helpful for others. I think definitely my preference would be for users to handle this on the app side as long as it was pretty easy to do. Now if it wasn't then we can see how we can improve it whether through example or maybe a tweak to the select component

[goetzrobin]

@thatsamsonkid I am cool with providing a brnSelectAll directive that can call an toggleAll() function from the service. I like the optional [allValues]. We'd also need to make sure it unselects when the user deselects a different one. What do you think?