@finastra/global-search
TypeScript icon, indicating that this package has built-in type declarations

1.8.1 • Public • Published

Global Search

See it on NPM! How big is this package in your project? Storybook

Usage

Global Search component contains two types of slots: searches and pages. Developer can use fds-global-search-group for searches slot, fds-global-search-page for pages slot and fds-global-search-summary for summary slot.

fds-global-search-group contains two inputs:

  • title: string, display as the search group title.
  • items: FdsSearchItem[], a list of search item to display in the search group

fds-global-search-page contains two inputs:

  • title: string, display as the search page title.
  • items: FdsSearchPageItem[], a list of search page item to display in the search page.

fds-global-search-summary contains two inputs:

  • searchText: string, the search text to summary.
  • resultCount: number, how many results exist for current search text.

Install package:

npm i @finastra/global-search

Import component to your project:

import '@finastra/global-search';
<fds-global-search
    placeholder="search marketplace">
    <fds-global-search-group
        slot="searches"
        title="Trending Searches"
        icon="trending_up"
        items=${ [{
                    text: 'enterprise risk',
                },{
                    text: 'customer service',
                }]
                }
        >  </fds-global-search-group>
    <fds-global-search-page
        slot="pages"
        title=${"Popular applications"}
        .items=${
            [
            {
                logo: '//us1-cdn.openchannel.io/59bfc432ca753d60bf995c46/public/603e561d130c5a04da2d3d7c.jpg',
                text: "CloudMargin"
            }
            ]
        }
    > </fds-global-search-page>
</fds-global-search>

API

Properties

Property Attribute Type Default Description
enableRecentSearch enableRecentSearch boolean true Whether display recent search section.
placeholder placeholder string "" Sets placeholder value displayed when input is empty.
value value string "" Sets value displayed in input.

Methods

Method Type
addNewRecentSearch (searchText?: string | undefined): void
clearInput (e: any): void
closeGlobalSearch (): void
getRecentList (): FdsSearchItem[]
getSearchInputElement (): HTMLInputElement | null | undefined
getSearchInputValue (): string
onGlobalSearchInputChanged (): void
onGlobalSearchInputFocus (): void
renderRecentSearch (): TemplateResult<1> | ""
setInput (text: string): void
toggleGlobalSearch (): void
toggleSearchClearButton (display: boolean): void
triggerSearchWithText (e: any): void
updateRecentSearch (): void

Events

Event Type
onFdsGlobalSearchItemSelected CustomEvent<FdsSearchSelectedItem>
onSearchInputChanged CustomEvent<string>

Slots

Name Description
pages Slot to place a set of search pages with icon.We provide another web component: fds-global-search-page.
searches Slot to place a set of search items. We provide another web component:fds-global-search-group.
summary Slot to place a summary of search result.

CSS Custom Properties

Property Type Default Description
--fds-global-search-width text "400px" length of global search component.

Package Sidebar

Install

npm i @finastra/global-search

Weekly Downloads

11

Version

1.8.1

License

MIT

Unpacked Size

115 kB

Total Files

56

Last publish

Collaborators

  • david.bocle
  • ffdcbot
  • ttalbot