A search bar component using Fluid Topics public API.

The search bar requires the [Fluid Topics public API](https://www.npmjs.com/package/@fluid-topics/public-api)
and [Material Icon font](https://developers.google.com/fonts/docs/material_icons)
to be imported independently.

## Install

### Javascript

```shell
npm install @fluid-topics/ft-search-bar
yarn add @fluid-topics/ft-search-bar
```

### HTML

To be placed at the end of HTML body:

```html
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js"></script>
```

## Usage

### Lit

```typescript
import { html } from "lit"
import "@fluid-topics/public-api/dist/fluidtopics.min.js"
import "@fluid-topics/ft-search-bar"

function render() {
    return html`
        <ft-search-bar
            baseUrl="http://doc.fluidtopics.com"
            .displayedFilters=${ [ "Version_FT", "Category", "Platform", "audience" ] }
            @change=${ (e: SearchStateChangeEvent) => console.log("Search state change:", e.detail) }
        ></ft-search-bar>
    `
}
```

### HTML

```html

<html lang="en">
<head>
    <title>My custom integration</title>
    <link href="http://doc.fluidtopics.com/api/stylesheets/fonts.css" rel="stylesheet">
    <link href="http://doc.fluidtopics.com/api/stylesheets/theme.css" rel="stylesheet">
</head>
<body>
    <ft-search-bar
            baseUrl="http://doc.fluidtopics.com"
            displayedfilters="[&quot;Version_FT&quot;,&quot;Category&quot;,&quot;Platform&quot;,&quot;audience&quot;]"
    ></ft-search-bar>

    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js"></script>
    <script>
        const searchBar = document.querySelector('ft-search-bar');
        searchBar.setAttribute("labels", JSON.stringify({
                                                            filtersButton: "Refine your search",
                                                            inputPlaceHolder: "Search our documentation"
                                                        }));
    </script>
</body>
</html>
```
