Bits | Freelancer Bits

General purpose search with optional rich results rendered from item templates

Contents

Background color

With custom left icon

With debounce time

With scrollable search results

Without result display

No inputs set

Inputs

autoHighlightFirst ?: boolean = true

Automatically highlight the first search result when results change.

backgroundColor ?: InputBackgroundColor = 'default'

borderless ?: boolean = false

Not for general use. This is only for Messaging search. If you'd like to use this input, make sure you discuss with UI Eng

borderlessMobile ?: boolean = false

Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng

clearButton ?: boolean = true

clearQueryOnSelect ?: boolean = false

control ?: FormControl<string>

debounceTimeMs ?: number

Debounces the emission of the search query after the specified number of milliseconds.

disabled ?: boolean = false

displayResults ?: boolean = true

displayResultsWithEmptyInput ?: boolean = false

Show options when the user has not entered anything

dynamicValidation ?: boolean = false

expandFromDirection ?: SearchExpandFromDirection = SearchExpandFromDirection.RIGHT

Determines the direction from which the search component expands.

expandableIconLight ?: boolean = false

iconMarginMobile ?: boolean = true

Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng.

increaseZIndex ?: boolean = false

Increase the result card z-index to callout level. Default: dropdown.

initialValue ?: string = ''

inputId ?: string

HTML id for the input element.

inputSearchSize ?: any = InputSize.MID

isExpandable ?: boolean = false

itemTemplates ?: { [type: string]: TemplateRef<any>; } = {}

itemTypeTitles ?: { [type: string]: string; } = {}

leftIcon ?: InputIconStart = 'ui-search'

leftIconSize ?: any = IconSize.MID

overlayMode ?: boolean = false

When true, renders the search inside a full-screen overlay with a blurred backdrop and top-third positioning.

placeholder ?: any = $localize`Search`

preventExpand ?: boolean = false

When true, clicking the expandable icon emits onFocus without expanding the inline search bar. Used to hand off to overlay search.

resultsBorderRadius ?: CardBorderRadius = 'mid'

Border radius of the results card.

resultsInFlow ?: boolean = false

Render results in normal flow instead of absolute overlay.

roundCorners ?: boolean = true

scrollableResultsMaxHeight ?: number

Max height of the scrollable results container in pixels.

scrollableSearchResults ?: boolean = false

Limits search results' container height and makes it scrollable.

searchResults ?: readonly SearchItem[] = []

shakeOnBlur ?: boolean = true

showEmptyResultsOnKeyboardNavigationOnly ?: boolean = false

showEscHint ?: boolean = false

showIcon ?: boolean = true

showKeyboardHints ?: boolean = false

Show keyboard shortcut hints at the bottom of the overlay. Only visible when overlayMode is active.

showNestedStories ?: boolean = false

showShortcutKey ?: boolean = false

useResultsCard ?: boolean = true

Keep existing results card container by default.

Outputs

clear ?: any = new EventEmitter<void>()

expandedChange ?: any = new EventEmitter<boolean>()

Exposes the expanded/collapsed status of the expandable search bar.

onBlur ?: any = new EventEmitter<void>()

onFocus ?: any = new EventEmitter<void>()

overlayClose ?: any = new EventEmitter<void>()

query ?: any = new EventEmitter<string>()

select ?: any = new EventEmitter<SearchItem>()

submit ?: any = new EventEmitter<void>()

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Search