feat(select): support constructions of custom select

[spike-rabbit]

Adding a set of utilities that allows customers
to create selects with custom backed value selection, for instance using si-tree-view.

A very simple version of it can look like this:

@Component({
  selector: 'app-tree-select',
  imports: [SiSelectComboboxComponent, SiSelectDropdownDirective, SiTreeViewComponent],
  template: `
    <si-select-combobox>
      @if (select.value(); as val) {
        {{ val }}
      } @else {
        <span class="text-secondary">Select a location...</span>
      }
    </si-select-combobox>

    <ng-template si-select-dropdown>
      <si-tree-view
        class="d-block"
        ariaLabel="Locations"
        [items]="items()"
        [enableSelection]="true"
        [singleSelectMode]="true"
        [isVirtualized]="false"
        (treeItemClicked)="selectItem($event)"
      />
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  hostDirectives: [
    {
      directive: SiCustomSelectDirective,
      inputs: ['disabled', 'readonly', 'value'],
      outputs: ['valueChange']
    }
  ]
})
export class TreeSelectComponent {
  protected readonly select = inject(SiCustomSelectDirective);

  /** The tree items to display. */
  readonly items = input<TreeItem[]>([]);

  selectItem(item: TreeItem): void {
    if (item.label) {
      this.select.updateValue(item.label as string);
      this.select.close();
    }
  }
}

The goal is to empower applications
to build selects with whatever content they need
while we take care of accesibility and proper appereance.

Closes #1840

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

This pull request introduces a new set of components and directives—SiCustomSelectDirective, SiSelectComboboxComponent, and SiSelectDropdownDirective—to enable the creation of custom select components like tree-selects. The implementation includes ControlValueAccessor and SiFormItemControl integration, comprehensive unit tests, and a usage example. Feedback focuses on improving consistency with the standard select component through enhanced keyboard navigation and visual alignment, ensuring Server-Side Rendering (SSR) safety for browser-specific APIs, and refining the ControlValueAccessor implementation and resource cleanup.

[spliffone]

I would assume that the tab key close the overlay

[spike-rabbit]

No, we cannot do this here generally. Then we cannot have extra buttons and alike in the dropdown.

[panch1739]

@spike-rabbit Niceeee! Just some points:

1. Buttons are using the sm size (24px height). They should be the standard 32px

2. When I make the screen narrower, the menu does not adjust accordingly, cutting the footer out of frame:

3. Probably this is something that im doing wrong...but i tried to change the input to a button, to check how it looks with the the ghost style. Something did not work ahaha

3. In responsive behavior, the options get truncated:

But in the design, we defined the same behavior as the current si-select:

When the available space is exceeded, the values collapse into a summarized representation (e.g. “+2”).

[panch1739]

@spike-rabbit I found some small things:

The total height of the input is 36px, it should be 32px as our standard buttons and input

The distance in the footer should be adjusted also