Select Content - Allow items to be fixed at top or bottom outside of scrollable element.

[CO97]

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

select

Information

Allow for elements to be displayed at the start/end of the scrollable dropdown content within the select.

In some scenarios you might want to have content fixed at the top/bottom of the dropdown such as a button or information text.

Example scenario 1:

Showing a summary the number of options available/selected.

Example scenario 2:

Adding a button to reset the select picker.

Describe any alternatives/workarounds you're currently using

Scenario 2;

Usage;

          <brn-select placeholder="Example Select">
                <hlm-select-trigger class="w-48">
                  <hlm-select-value />
                </hlm-select-trigger>
                <hlm-select-content>
                  <div class="max-h-60 overflow-auto">
                    @for (item of items(); track item.id) {
                      <hlm-option [value]="item.id">{{ item.name }}</hlm-option>
                    }
                  </div>
                  <custom-select-reset-button variant="outline">Reset</custom-select-reset-button>
                </hlm-select-content>
              </brn-select>

Reset Button

import {
  ChangeDetectionStrategy,
  Component,
  inject, input
} from '@angular/core';
import { BrnSelectService } from '@spartan-ng/ui-select-brain';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';


@Component({
  selector: 'custom-select-reset-button',
  standalone: true,
  host: {
    '(click)': 'onClick()'
  },
  styles: [
    `
      :host {
        width: calc(100% - 0.5rem);
        margin: 0.5rem 0.25rem;
      }
    `
  ],
  template: `
    <ng-content></ng-content>
  `,
  hostDirectives: [{
    directive: HlmButtonDirective,
    inputs: ['variant', 'class']
  }],
  imports: [
    HlmButtonDirective
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomSelectResetButtonComponent {
  private readonly _selectService = inject(BrnSelectService);
  public readonly isExpanded = this._selectService.isExpanded;

  resetValue = input<any>(null);

  public onClick(): void {
    if (!this.isExpanded()) return;

    this._selectService.deselectAllOptions();
    if (this.resetValue()) {
      this._selectService.setInitialSelectedOptions(this.resetValue());
    }

    if (this._selectService.selectTrigger) {
      this._selectService.selectTrigger.focus();
    }

    this._selectService.state.update((state) => ({
      ...state,
      isExpanded: false
    }));
  }
}

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

• Yes
• No