New `si-custom-select`

[spike-rabbit]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Feature request

We need a new si-custom-select. The idea is a component, that allows having custom selection dropdown and a custom option renderer for the value output. Applications should be able to build theirs in a reusable way.

So we basically only take care of:

• focus handling
• value managment
• form state (like disabled etc...)

The benefit of such a component is, that all standard tasks are taken care of by element, the application can focus on their domain.

In order to allow applications, to build this in a reusable way, an application needs to integrate this into their own app-selectcomponent.

@Component({
})
// SiSelectBase exposes value and all other things show in the template and also provides VALUE_ACCESSOR
export class AppSelect extends SiSelectBase<string>  { // string can be whatever the app needs, also []

}

<si-select-combobox>
  <si-select-value>{{value}}</si-select-value> <!-- could be used with @for -->
</si-select-combobox>

<ng-tempate si-select-dropdown>
  <si-tree-view #tree />
  <button class="btn btn-primary btn-sm" (click)="updateValue(tree.somehowGetValue())">Apply</button>
</ng-template>

• TODO: this concept only works with eager loaded options. We may need a SiSelectLazyLoadedBase later.
• TODO: check if this can be reused with the actual si-select

Use case

1. this allows apps to build selects using an si-tree-view
2. this also allows usage with any other kind of value / selection representation