Select

Select allows users to choose from a dropdown panel with a list of options, similar to a native <select> element but with an enhanced UI.

Usage

API

Components

DaffSelectComponent

import { DaffSelectComponent } from '@daffodil/design/select'

DaffSelectComponent is a form control component that presents a list of selectable options, similar to the native <select> element we call <daff-native-select>.

@Component()
class DaffSelectComponent<<T = unknown>>  extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnDestroy, ControlValueAccessor {
  @Optional() @Self() ngControl: NgControl
  readonly id: string
  get state(): DaffFormFieldState
  _stateChanges: BehaviorSubject = new BehaviorSubject({
      focused: false,
      filled: false,
      disabled: false,
      error: false,
      valid: true,
    })
  stateChanges: Observable<DaffFormFieldState>

  @Input() options: T[] = []
  @Input() optionsId: string = 'daff-select-options' + '-' + ++daffSelectOtionsId

  open(event?: MouseEvent | KeyboardEvent): void
  close(event?: MouseEvent | KeyboardEvent): void
  selectOption(option: T): void
  selectHighlighted(event?: MouseEvent | KeyboardEvent): void
  highlightNext(event?: MouseEvent | KeyboardEvent): void
  highlightPrevious(event?: MouseEvent | KeyboardEvent): void
  emitState(deferred: boolean = false): void
}

Inputs

options

T[]

Default	`[]`
Description

optionsId

string

Default	`'daff-select-options' + '-' + ++daffSelectOtionsId`
Description	The unique id of the select options. Defaults to an autogenerated value.

Properties

ngControl

NgControl

Default	–
Description

string

Default	–
Description	The unique identifier for the control element.

state

DaffFormFieldState

Default	–
Description	Computes the current state of the form field control. Combines control properties and form validation state.

_stateChanges

BehaviorSubject

Default	`new BehaviorSubject({ focused: false, filled: false, disabled: false, error: false, valid: true, })`
Description

stateChanges

Observable

Default	–
Description	Observable stream of state changes for the form field control.

() Methods

Parameters

Parameter	`event: MouseEvent \| KeyboardEvent`
Description

Parameters

Parameter	`event: MouseEvent \| KeyboardEvent`
Description

Parameters

Parameter	`option: T`
Description

Parameters

Parameter	`event: MouseEvent \| KeyboardEvent`
Description

Parameters

Parameter	`event: MouseEvent \| KeyboardEvent`
Description

Parameters

Parameter	`event: MouseEvent \| KeyboardEvent`
Description

Parameters

Parameter	`deferred: boolean`
Default	false
Description

Directives

DaffSelectOptionDirective

import { DaffSelectOptionDirective } from '@daffodil/design/select'

The directive provides the template for a list of options inside the select dropdown.

@Directive()
class DaffSelectOptionDirective {
  @Optional() templateRef: TemplateRef<unknown>
}

Types

DaffSelectOptionDirectiveContext

import { DaffSelectOptionDirectiveContext } from '@daffodil/design/select'

The slot context for DaffSelectOptionDirective.

interface DaffSelectOptionDirectiveContext<T = unknown> {
  option: T
  isSelected: boolean
  isHighlighted: boolean
}

Properties

option `T`
The option for this element in the list.

isSelected `boolean`
Whether this option is the currently selected one.

isHighlighted `boolean`
Whether this option is the currently highlighted one in the options list.

Constants

DAFF_SELECT_COMPONENTS

import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select'

const DAFF_SELECT_COMPONENTS: readonly [typeof DaffSelectComponent, typeof DaffSelectOptionDirective]