@fluid-topics/ft-search-bar 0.0.88

package/build/ft-search-bar.js

@@ -0,0 +1,1126 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, Debouncer, FtLitElement, jsonProperty, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
+import { FtSizeCategory, FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
+import { FtTypography, FtTypographyBody2 } from "@fluid-topics/ft-typography";
+import { facetToFilter, getBreadcrumbFromValue, getLabelFromValue, selectedValues, serializeRequest } from "./converters";
+import { FtFilter, FtFilterOption } from "@fluid-topics/ft-filter";
+import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
+import { FtAccordion, FtAccordionItem } from "@fluid-topics/ft-accordion";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtChip } from "@fluid-topics/ft-chip";
+import { FtSelect, FtSelectOption } from "@fluid-topics/ft-select";
+import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { Icon } from "@material/mwc-icon";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { flatDeep } from "@fluid-topics/ft-filter/build/utils";
+if (window.fluidtopics == null) {
+    console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");
+}
+export const DEFAULT_LABELS = {
+    filtersButton: "Filters",
+    oneFilterEnabled: "1 filter enabled",
+    nFiltersEnabled: "{0} filter(s) enabled",
+    inputPlaceHolder: "Search",
+    filterInputPlaceHolder: "Filter {0}",
+    clearInputButton: "Clear",
+    clearFilterButton: "Clear",
+    displayMoreFilterValuesButton: "More",
+    searchButton: "Search",
+    noSuggestions: "No results found…",
+    clearFilters: "Clear filters",
+    contentLocaleSelector: "Lang",
+    removeRecentSearch: "Remove",
+    back: "Back",
+};
+export class LaunchSearchEvent extends CustomEvent {
+    constructor(request) {
+        super("launch-search", { detail: request });
+    }
+}
+export class SearchStateChangeEvent extends CustomEvent {
+    constructor(request) {
+        super("change", { detail: request });
+    }
+}
+let FtSearchBar = class FtSearchBar extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.baseUrl = "";
+        this.apiIntegrationIdentifier = "ft-search-bar";
+        this.availableContentLocales = [];
+        this.labels = {};
+        this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, {});
+        this.displayedFilters = [];
+        this.searchRequestSerializer = (request) => serializeRequest(this.baseUrl, request);
+        this.searchFilters = [];
+        this.sizeCategory = FtSizeCategory.S;
+        this.displayFacets = false;
+        this.mobileMenuOpen = false;
+        this.facets = [];
+        this.query = "";
+        this.suggestions = [];
+        this.suggestionsLoaded = true;
+        this.recentSearches = [];
+        this.updateFacetsDebouncer = new Debouncer(500);
+        this.suggestDebouncer = new Debouncer(300);
+        this.facetsLoaded = false;
+        this.closeFloatingContainer = (e) => {
+            if (this.sizeCategory !== FtSizeCategory.S) {
+                this.displayFacets = this.displayFacets && e.composedPath().some(element => element === this.floatingContainer);
+            }
+        };
+    }
+    // language=CSS
+    getStyles() {
+        return [
+            FtTypographyBody2,
+            css `
+                * {
+                    box-sizing: border-box;
+                }
+
+                .ft-search-bar--container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    background: var(--ft-color-surface, #FFFFFF);
+                    outline: none;
+
+                    --ft-search-bar-border-radius--internal: var(--ft-search-bar-border-radius, var(--ft-border-radius-S, 4px))
+                }
+
+                .ft-search-bar--mobile-menu-open {
+                    position: var(--ft-search-bar-mobile-open-position, fixed);
+                    top: var(--ft-search-bar-mobile-open-top, 0);
+                    bottom: var(--ft-search-bar-mobile-open-bottom, 0);
+                    left: var(--ft-search-bar-mobile-open-left, 0);
+                    right: var(--ft-search-bar-mobile-open-right, 0);
+                    z-index: var(--ft-search-bar-floating-components-z-index, 1);
+                    padding: 16px;
+                }
+
+                .ft-search-bar {
+                    flex-shrink: 0;
+                    position: relative;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    height: var(--ft-search-bar-height, 38px);
+
+                    background: var(--ft-color-surface, #FFFFFF);
+                    border: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                    border-radius: var(--ft-search-bar-border-radius--internal);
+                }
+
+                .ft-search-bar--floating-panel-open .ft-search-bar {
+                    border-radius: var(--ft-search-bar-border-radius--internal) var(--ft-search-bar-border-radius--internal) 0 0;
+                }
+
+                .ft-search-bar--input-container {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    align-self: stretch;
+                    position: relative;
+                }
+
+                .ft-search-bar--input {
+                    border: none;
+                    background-color: transparent;
+                    padding: 0 8px;
+                    height: 100%;
+                    width: 100%;
+                }
+
+                .ft-search-bar--input:focus-within {
+                    outline-color: var(--ft-color-primary, #2196F3);
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--suggestions {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    overflow-y: auto;
+                    height: 0;
+                }
+
+                .ft-search-bar--mobile-open .ft-search-bar--suggestions {
+                    height: initial;
+                }
+
+                .ft-search-bar--floating-panel,
+                .ft-search-bar--desktop .ft-search-bar--suggestions {
+                    position: absolute;
+                    z-index: var(--ft-search-bar-floating-components-z-index, 1);
+                    top: 100%;
+                    left: -1px;
+                    right: -1px;
+                    display: none;
+                    background: var(--ft-color-surface, #FFFFFF);
+                    border: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                    border-radius: 0 0 var(--ft-search-bar-border-radius--internal) var(--ft-search-bar-border-radius--internal);
+                    box-shadow: var(--ft-elevation-02, 0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06));
+                    outline: none;
+                }
+
+                .ft-search-bar--desktop .ft-search-bar--suggestions {
+                    top: calc(100% + 1px);
+                }
+
+                .ft-search-bar--input-container:focus-within .ft-search-bar--suggestions-not-empty {
+                    display: block;
+                }
+
+                .ft-search-bar--no-suggestions {
+                    text-align: center;
+                    padding: 8px;
+                    color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
+                }
+
+                .ft-search-bar--suggestion {
+                    text-decoration: none;
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    padding: 8px;
+                    gap: 8px;
+                    cursor: pointer;
+                    color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
+                    min-height: 52px;
+                }
+
+                .ft-search-bar--desktop .ft-search-bar--suggestion {
+                    min-height: 44px;
+                }
+
+                .ft-search-bar--suggestion:focus {
+                    outline: none;
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--suggestion:first-child,
+                .ft-search-bar--recent-search + .ft-search-bar--suggestion:not(.ft-search-bar--recent-search) {
+                    border-top: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                }
+
+                .ft-search-bar--suggestion ft-typography {
+                    display: block;
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                }
+
+                .ft-search-bar > ft-button {
+                    flex-shrink: 0;
+                }
+
+                .ft-search-bar--left-action {
+                    --ft-border-radius-L: calc(var(--ft-search-bar-border-radius--internal) - 1px) 0 0 calc(var(--ft-search-bar-border-radius--internal) - 1px);
+                    border-right: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                }
+
+                .ft-search-bar--floating-panel-open .ft-search-bar--left-action {
+                    --ft-border-radius-L: calc(var(--ft-search-bar-border-radius--internal) - 1px) 0 0 0;
+                }
+
+                .ft-search-bar--launch-search,
+                .ft-search-bar--clear-query {
+                    margin: 0 4px;
+                }
+
+                .ft-search-bar--separator {
+                    height: 20px;
+                    border-right: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                }
+
+                .ft-search-bar--floating-panel {
+                    padding: 16px;
+                }
+
+                .ft-search-bar--floating-panel-open .ft-search-bar--floating-panel {
+                    display: block;
+                }
+
+                .ft-search-bar--desktop .ft-search-bar--facets-actions {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    gap: 8px;
+                    padding: 0 10px;
+                    margin-bottom: 16px;
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--facets-actions {
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    display: flex;
+                    gap: 16px;
+                    justify-content: space-evenly;
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--facets-actions > * {
+                    flex-grow: 1;
+                    flex-basis: 0;
+                }
+
+                .ft-search-bar > .ft-search-bar--content-locale,
+                .ft-search-bar > .ft-search-bar--content-locale::part(container),
+                .ft-search-bar > .ft-search-bar--content-locale::part(main-panel) {
+                    height: 100%;
+                }
+
+                .ft-search-bar > .ft-search-bar--content-locale::part(options) {
+                    top: calc(100% + 1px);
+                    right: unset;
+                    width: max-content;
+                    min-width: 100%;
+                }
+
+                .ft-search-bar > .ft-search-bar--content-locale::part(selected-value) {
+                    --ft-color-on-surface: var(--ft-button-color, var(--ft-color-primary, #2196F3));
+                    --ft-ripple-color: var(--ft-button-color, var(--ft-color-primary, #2196F3));
+                    border-radius: calc(var(--ft-search-bar-border-radius--internal) - 1px) 0 0 calc(var(--ft-search-bar-border-radius--internal) - 1px);
+                }
+
+                .ft-search-bar > .ft-search-bar--content-locale::part(label) {
+                    --ft-input-label-border-color: transparent;
+                    --ft-ripple-color: var(--ft-button-color, var(--ft-color-primary, #2196F3));
+                }
+
+                .ft-search-bar--floating-panel .ft-search-bar--content-locale {
+                    margin-right: auto;
+                    min-width: 250px;
+                    --ft-select-options-z-index: 2;
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--content-locale::part(clear-button) {
+                    display: none;
+                }
+
+                .ft-search-bar--floating-panel .ft-search-bar--filters-container {
+                    display: block;
+                    height: 400px;
+                    --ft-snap-scroll-gap: 16px;
+                }
+
+                .ft-search-bar--floating-panel ft-filter {
+                    display: flex;
+                    flex-grow: 0;
+                    max-height: 100%;
+                    max-width: 250px;
+                }
+
+                .ft-search-bar--hierarchical-filter {
+                    width: 250px;
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--filters-container {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    overflow-y: auto;
+                    margin: 0 -16px;
+                    padding: 0 16px;
+                }
+
+                .ft-search-bar--mobile .ft-search-bar--filters-container ft-filter {
+                    display: flex;
+                    max-height: 60vh;
+                }
+
+                .ft-search-bar--mobile ft-filter::part(container) {
+                    flex-grow: 1;
+                }
+
+                .ft-search-bar--filter-label {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: baseline;
+                    gap: 8px;
+                }
+
+                .ft-search-bar--filter-label > * {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .ft-search-bar--filter-label > :first-child {
+                    flex-shrink: 0;
+                }
+
+                .ft-search-bar--filter-label > :last-child {
+                    flex-shrink: 1;
+                    color: var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60))
+                }
+
+                ft-accordion-item::part(toggle) {
+                    margin-left: -16px;
+                    margin-right: -16px;
+                }
+
+                ft-accordion-item::part(label) {
+                    overflow: hidden;
+                }
+
+                ft-accordion-item::part(content) {
+                    padding-left: 0;
+                    padding-right: 0;
+                }
+
+                .ft-search-bar--selected-filters {
+                    flex-shrink: 0;
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    gap: 8px;
+                }
+
+                .ft-search-bar--selected-filters * {
+                    max-width: 100%;
+                }
+            `
+        ];
+    }
+    get recentSearchesStorageKey() {
+        return this.baseUrl + ":ft:recent-search-queries";
+    }
+    get request() {
+        return {
+            uiLocale: this.uiLocale,
+            contentLocale: this.contentLocale,
+            query: this.query,
+            facets: this.displayedFilters.map(id => ({ id })),
+            filters: this.searchFilters,
+            paging: { perPage: 0, page: 1 },
+            sort: [],
+        };
+    }
+    get suggestRequest() {
+        return {
+            contentLocale: this.contentLocale,
+            input: this.query,
+            filters: this.searchFilters,
+            sort: [],
+        };
+    }
+    get hasFacets() {
+        return this.facets.length > 0;
+    }
+    get hasLocaleSelector() {
+        return this.availableContentLocales.length > 1;
+    }
+    focus() {
+        var _a;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    clear() {
+        this.query = "";
+        this.searchFilters = [];
+        if (this.input) {
+            this.input.value = "";
+        }
+        this.mobileMenuOpen = false;
+        this.displayFacets = false;
+    }
+    getTemplate() {
+        const rootClasses = {
+            "ft-search-bar--container": true,
+            "ft-search-bar--mobile": this.sizeCategory === FtSizeCategory.S,
+            "ft-search-bar--desktop": this.sizeCategory !== FtSizeCategory.S,
+            "ft-search-bar--floating-panel-open": this.sizeCategory !== FtSizeCategory.S && this.displayFacets,
+            "ft-search-bar--mobile-menu-open": this.mobileMenuOpen,
+        };
+        return html `
+            <ft-size-watcher @change=${this.updateSize}></ft-size-watcher>
+            <div class="${classMap(rootClasses)}" part="container" tabindex="-1">
+                ${this.sizeCategory === FtSizeCategory.S ? this.renderMobileSearchBar() : this.renderDesktopSearchBar()}
+            </div>
+        `;
+    }
+    renderDesktopSearchBar() {
+        return html `
+            <div class="ft-search-bar" part="search-bar">
+                ${(this.renderSearchBarLeftAction())}
+                <div class="ft-search-bar--input-container" part="input-container">
+                    <input class="ft-search-bar--input ft-typography--body2"
+                           part="input"
+                           type="text"
+                           placeholder="${this.labelResolver.resolve("inputPlaceHolder")}"
+                           value="${this.query}"
+                           @keydown=${this.onSearchBarKeyDown}
+                           @keyup=${this.onSearchBarKeyUp}>
+                    ${this.renderSuggestions()}
+                </div>
+                ${this.renderDesktopSearchBarButtons()}
+                <div class="ft-search-bar--floating-panel" @keyup=${this.onFloatingContainerKeyUp} tabindex="-1">
+                    ${this.renderDesktopFacetsActions()}
+                    ${this.renderDesktopFacets()}
+                </div>
+            </div>
+            ${this.renderSelectedFacets()}
+        `;
+    }
+    renderSearchBarLeftAction() {
+        if (this.hasFacets) {
+            return html `
+                <ft-button class="ft-search-bar--filters-opener ft-search-bar--left-action"
+                           part="filters-opener"
+                           trailingIcon
+                           icon="${this.displayFacets ? "expand_less" : "expand_more"}"
+                           @click=${(e) => {
+                e.stopPropagation();
+                this.displayFacets = !this.displayFacets;
+            }}
+                           @focusin=${(e) => e.stopPropagation()}>
+                    ${this.labelResolver.resolve("filtersButton")}
+                </ft-button>
+            `;
+        }
+        if (this.hasLocaleSelector) {
+            return html `
+                <ft-select
+                        class="ft-search-bar--content-locale ft-search-bar--left-action"
+                        part="content-locale"
+                        @change=${(e) => this.contentLocale = e.detail}>
+                    ${repeat(this.availableContentLocales, l => l.lang, l => html `
+                                <ft-select-option value="${l.lang}"
+                                                  label="${l.label}"
+                                                  ?selected=${l.lang === this.contentLocale}>
+                                </ft-select-option>
+                            `)}
+                </ft-select>
+            `;
+        }
+        return nothing;
+    }
+    renderDesktopSearchBarButtons() {
+        return html `
+            ${this.query ? html `
+                <ft-button class="ft-search-bar--clear-query"
+                           part="search-bar-actions"
+                           icon="close"
+                           round dense
+                           label="${this.labelResolver.resolve("clearInputButton")}"
+                           @click=${() => this.setQuery("")}
+                ></ft-button>
+                <div class="ft-search-bar--separator"></div>
+            ` : null}
+            <ft-button class="ft-search-bar--launch-search"
+                       part="search-bar-actions"
+                       icon="search"
+                       round dense
+                       label="${this.labelResolver.resolve("searchButton")}"
+                       @click=${this.launchSearch}
+            ></ft-button>
+        `;
+    }
+    renderMobileSearchBar() {
+        return html `
+            <div class="ft-search-bar">
+                <div class="ft-search-bar--input-container" part="input-container">
+                    <input class="ft-search-bar--input ft-typography--body2"
+                           part="input"
+                           type="text"
+                           placeholder="${this.labelResolver.resolve("inputPlaceHolder")}"
+                           value="${this.query}"
+                           @keyup=${this.onSearchBarKeyUp}
+                           @focus=${() => {
+            this.mobileMenuOpen = true;
+            this.displayFacets = false;
+        }}>
+                </div>
+                ${this.renderMobileSearchBarButtons()}
+            </div>
+            ${this.mobileMenuOpen ? this.renderMobileFacetsActions() : this.renderSelectedFacets()}
+            ${this.displayFacets ? this.renderMobileFacets() : this.renderSuggestions()}
+        `;
+    }
+    renderMobileSearchBarButtons() {
+        if (this.query || this.mobileMenuOpen) {
+            return html `
+                <ft-button class="ft-search-bar--clear-query"
+                           part="search-bar-actions"
+                           icon="close"
+                           round
+                           label="${this.labelResolver.resolve("clearInputButton")}"
+                           @click=${() => {
+                this.setQuery("");
+                this.mobileMenuOpen = false;
+                this.displayFacets = false;
+            }}
+                ></ft-button>
+            `;
+        }
+        return html `
+            <ft-button class="ft-search-bar--launch-search"
+                       part="search-bar-actions"
+                       icon="search"
+                       round
+                       label="${this.labelResolver.resolve("searchButton")}"
+                       @click=${() => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
+            ></ft-button>
+        `;
+    }
+    renderMobileFacetsActions() {
+        if (!this.hasLocaleSelector && this.displayedFilters.length === 0) {
+            return null;
+        }
+        if (this.displayFacets) {
+            return html `
+                <div class="ft-search-bar--facets-actions">
+                    <ft-button part="facets-actions"
+                               icon="arrow_back"
+                               label="${this.labelResolver.resolve("back")}"
+                               @click=${() => this.displayFacets = false}>
+                        ${this.labelResolver.resolve("back")}
+                    </ft-button>
+                    ${this.searchFilters.length > 0 ? html `
+                        <ft-button part="facets-actions" @click=${this.clearFilters}>
+                            ${this.labelResolver.resolve("clearFilters")}
+                        </ft-button>
+                    ` : null}
+                </div>
+            `;
+        }
+        let label = this.searchFilters.length > 0
+            ? (this.searchFilters.length > 1
+                ? this.labelResolver.resolve("nFiltersEnabled", this.searchFilters.length)
+                : this.labelResolver.resolve("oneFilterEnabled"))
+            : this.labelResolver.resolve("filtersButton");
+        return html `
+            <div class="ft-search-bar--facets-actions">
+                <ft-button part="facets-actions"
+                           @click=${() => this.displayFacets = true}>
+                    ${label}
+                </ft-button>
+            </div>
+        `;
+    }
+    renderMobileFacets() {
+        var _a;
+        const currentLocale = this.availableContentLocales.filter(l => l.lang === this.contentLocale).pop();
+        const contentLocales = this.availableContentLocales.map(l => ({
+            value: l.lang,
+            label: l.label,
+            selected: l.lang == this.contentLocale,
+            options: []
+        }));
+        return html `
+            <ft-accordion class="ft-search-bar--filters-container">
+                ${this.hasLocaleSelector ? html `
+                    <ft-accordion-item>
+                        <div class="ft-search-bar--filter-label" slot="toggle">
+                            <ft-typography variant="button">${this.labelResolver.resolve("contentLocaleSelector")}
+                            </ft-typography>
+                            <ft-typography variant="body2">
+                                ${(_a = currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.label) !== null && _a !== void 0 ? _a : ""}
+                            </ft-typography>
+                        </div>
+                        <ft-filter
+                                part="filters"
+                                class="ft-search-bar--content-locale"
+                                id="content-locale"
+                                filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", this.labelResolver.resolve("contentLocaleSelector"))}"
+                                clearButtonLabel="${this.labelResolver.resolve("clearFilterButton")}"
+                                raiseSelectedOptions
+                                .options=${contentLocales}
+                                @change=${(e) => this.contentLocale = e.detail[0]}
+                        ></ft-filter>
+                    </ft-accordion-item>
+                ` : null}
+                ${repeat(this.facets, facet => facet.key, facet => {
+            const filter = facetToFilter(facet);
+            return html `
+                                <ft-accordion-item>
+                                    <div class="ft-search-bar--filter-label" slot="toggle">
+                                        <ft-typography variant="button">${facet.label}</ft-typography>
+                                        <ft-typography variant="body2">
+                                            ${selectedValues(filter).join(", ")}
+                                        </ft-typography>
+                                    </div>
+                                    <ft-filter
+                                            part="filters"
+                                            id="${filter.id}"
+                                            filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", filter.label)}"
+                                            clearButtonLabel="${this.labelResolver.resolve("clearFilterButton")}"
+                                            moreValuesButtonLabel="${this.labelResolver.resolve("displayMoreFilterValuesButton")}"
+                                            ?multivalued=${filter.multivalued}
+                                            raiseSelectedOptions
+                                            .options=${filter.options}
+                                            .displayedValuesLimit=${10}
+                                            @change=${(e) => this.setFilter(filter.id, filter.label, e.detail)}
+                                    ></ft-filter>
+                                </ft-accordion-item>
+                            `;
+        })}
+            </ft-accordion>
+        `;
+    }
+    renderSuggestions() {
+        const filteredRecentSearches = this.recentSearches.filter(q => q.toLowerCase().includes(this.query.toLowerCase()));
+        const shouldDisplaySuggestions = this.query.length > 2 || filteredRecentSearches.length > 0;
+        return html `
+            <div class="ft-search-bar--suggestions ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
+                 @keydown=${this.onSuggestKeyDown}>
+                ${repeat(filteredRecentSearches.slice(0, 5), query => query, query => html `
+                            <a href="${this.searchRequestSerializer({ ...this.request, query: query })}"
+                               part="suggestions"
+                               class="ft-search-bar--suggestion ft-search-bar--recent-search"
+                               @keyup=${(e) => this.onSuggestKeyUp(e, query)}
+                               @click=${(e) => this.onSuggestClick(e, query)}>
+                                <ft-ripple></ft-ripple>
+                                <mwc-icon part="suggestion-icon">history</mwc-icon>
+                                <ft-typography variant="body1">${query}</ft-typography>
+                                <ft-button icon="close"
+                                           round
+                                           part="remove-suggestion"
+                                           ?dense=${this.sizeCategory !== FtSizeCategory.S}
+                                           label="${this.labelResolver.resolve("removeRecentSearch")}"
+                                           @click=${(e) => this.removeRecentSearch(e, query)}></ft-button>
+                            </a>
+                        `)}
+                ${repeat(this.suggestions, suggest => suggest.value, suggest => html `
+                            <a href="${this.searchRequestSerializer({ ...this.request, query: suggest.value })}"
+                               part="suggestions"
+                               class="ft-search-bar--suggestion"
+                               @keyup=${(e) => this.onSuggestKeyUp(e, suggest.value)}
+                               @click=${(e) => this.onSuggestClick(e, suggest.value)}>
+                                <ft-ripple></ft-ripple>
+                                ${this.getIcon(suggest)}
+                                <ft-typography variant="body1">${suggest.value}</ft-typography>
+                            </a>
+                        `)}
+                ${filteredRecentSearches.length === 0 && this.suggestions.length === 0 && this.query.length > 2 && this.suggestionsLoaded
+            ? html `
+                            <ft-typography class="ft-search-bar--no-suggestions" element="p"
+                                           variant="body2">
+                                ${this.labelResolver.resolve("noSuggestions")}
+                            </ft-typography>
+                        ` : null}
+            </div>
+        `;
+    }
+    getIcon(suggest) {
+        const iconVariant = suggest.type === "DOCUMENT" ? FtIconVariants.file_format : FtIconVariants.fluid_topics;
+        let icon;
+        switch (suggest.type) {
+            case "MAP":
+                icon = suggest.editorialType === "BOOK" ? FtIcons.BOOK : FtIcons.ARTICLE;
+                break;
+            case "DOCUMENT":
+                icon = resolveFileFormatIcon(suggest.mimeType, suggest.filenameExtension);
+                break;
+            case "TOPIC":
+                icon = FtIcons.TOPICS;
+                break;
+        }
+        return html `
+            <ft-icon variant="${iconVariant}" part="suggestion-icon">
+                ${icon}
+            </ft-icon>
+        `;
+    }
+    renderDesktopFacetsActions() {
+        return html `
+            <div class="ft-search-bar--facets-actions">
+                ${this.hasLocaleSelector ? html `
+                    <ft-select
+                            class="ft-search-bar--content-locale"
+                            part="content-locale"
+                            label="${this.labelResolver.resolve("contentLocaleSelector")}"
+                            outlined
+                            @change=${(e) => this.contentLocale = e.detail}>
+                        ${repeat(this.availableContentLocales, l => l.lang, l => html `
+                                    <ft-select-option value="${l.lang}"
+                                                      label="${l.label}"
+                                                      ?selected=${l.lang === this.contentLocale}>
+                                    </ft-select-option>
+                                `)}
+                    </ft-select>
+                ` : null}
+                ${this.searchFilters.length > 0 ? html `
+                    <ft-button part="facets-actions"
+                               @click=${this.clearFilters}>
+                        ${this.labelResolver.resolve("clearFilters")}
+                    </ft-button>
+                ` : null}
+                <slot name="facets-actions"></slot>
+            </div>
+        `;
+    }
+    renderDesktopFacets() {
+        if (!this.hasFacets) {
+            return null;
+        }
+        return html `
+            <ft-snap-scroll horizontal limitSize controls
+                            class="ft-search-bar--filters-container"
+                            part="filters-container">
+                ${repeat(this.facets, facet => facet.key, facet => {
+            const filter = facetToFilter(facet);
+            const hierachical = filter.options.some(o => { var _a, _b; return ((_b = (_a = o.subOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; });
+            return html `
+                                <ft-filter
+                                        class="${hierachical ? "ft-search-bar--hierarchical-filter" : ""}"
+                                        part="filters"
+                                        id="${filter.id}"
+                                        label="${filter.label}"
+                                        filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", filter.label)}"
+                                        clearButtonLabel="${this.labelResolver.resolve("clearFilterButton")}"
+                                        moreValuesButtonLabel="${this.labelResolver.resolve("displayMoreFilterValuesButton")}"
+                                        ?multivalued=${filter.multivalued}
+                                        raiseSelectedOptions
+                                        .options=${filter.options}
+                                        .displayedValuesLimit=${10}
+                                        @change=${(e) => this.setFilter(filter.id, filter.label, e.detail)}
+                                ></ft-filter>
+                            `;
+        })}
+            </ft-snap-scroll>
+        `;
+    }
+    renderSelectedFacets() {
+        if (!this.hasLocaleSelector && this.searchFilters.length === 0) {
+            return null;
+        }
+        return html `
+            <div class="ft-search-bar--selected-filters" part="selected-filters-container">
+                ${this.hasLocaleSelector && (this.hasFacets || this.sizeCategory === FtSizeCategory.S) ? html `
+                    <ft-chip part="selected-filters">${(this.getLocaleLabel(this.contentLocale))}</ft-chip>
+                ` : null}
+                ${repeat(this.searchFilters, filter => filter.key, filter => repeat(filter.values, value => {
+            let label = filter.label + ": " + getBreadcrumbFromValue(value);
+            return html `
+                                        <ft-tooltip inline text="${label}">
+                                            <ft-chip part="selected-filters"
+                                                     removable
+                                                     label="${label}"
+                                                     @icon-click=${() => this.setFilter(filter.key, filter.label, filter.values.filter(v => v !== value))}>
+                                                ${getLabelFromValue(value)}
+                                            </ft-chip>
+                                        </ft-tooltip>
+                                    `;
+        }))}
+            </div>
+        `;
+    }
+    async firstUpdated(props) {
+        var _a, _b;
+        super.firstUpdated(props);
+        this.initApi();
+        this.availableContentLocales = (_b = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.getAvailableSearchLocales().then(result => result.contentLocales).catch(() => []))) !== null && _b !== void 0 ? _b : [];
+    }
+    update(props) {
+        var _a, _b;
+        if (props.has("labels")) {
+            this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, this.labels);
+        }
+        if (props.has("sizeCategory")) {
+            this.mobileMenuOpen = false;
+            this.displayFacets = this.displayFacets && this.sizeCategory !== FtSizeCategory.S;
+        }
+        super.update(props);
+        if ((props.has("availableContentLocales") || props.has("contentLocale")) && this.availableContentLocales.length > 0) {
+            if (!this.availableContentLocales.some(l => l.lang === this.contentLocale)) {
+                this.contentLocale = (_a = this.availableContentLocales[0]) === null || _a === void 0 ? void 0 : _a.lang;
+            }
+        }
+        if (props.has("baseUrl") && this.baseUrl) {
+            if (this.baseUrl.endsWith("/")) {
+                this.baseUrl = this.baseUrl.replace(/\/$/, "");
+            }
+            this.recentSearches = JSON.parse((_b = window.localStorage.getItem(this.recentSearchesStorageKey)) !== null && _b !== void 0 ? _b : "[]");
+        }
+        if (["baseUrl", "apiIntegrationIdentifier"].some(p => props.has(p))) {
+            this.setApi();
+        }
+        if (["uiLocale", "contentLocale", "searchFilters", "displayedFilters", "api"].some(p => props.has(p))) {
+            this.updateFacets();
+        }
+        if (["query", "uiLocale", "contentLocale", "searchFilters", "displayedFilters", "api"].some(p => props.has(p))) {
+            this.updateSuggestions();
+        }
+        if (["query", "uiLocale", "contentLocale", "searchFilters"].some(p => props.has(p))) {
+            this.dispatchEvent(new SearchStateChangeEvent(this.request));
+        }
+    }
+    contentAvailableCallback(props) {
+        var _a, _b;
+        super.contentAvailableCallback(props);
+        if (props.has("displayFacets") && this.displayFacets) {
+            (_a = this.floatingContainer) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (this.scrollToFacet != null && this.facetsLoaded) {
+            (_b = this.scrollingFiltersContainer) === null || _b === void 0 ? void 0 : _b.scrollIndexIntoView(this.facets.findIndex(f => f.key === this.scrollToFacet));
+            this.scrollToFacet = undefined;
+        }
+    }
+    initApi() {
+        if (this.api == null) {
+            this.setApi();
+            setTimeout(() => this.initApi(), 100);
+        }
+    }
+    setApi() {
+        this.api = window.fluidtopics ? new window.fluidtopics.FluidTopicsApi(this.baseUrl, this.apiIntegrationIdentifier) : undefined;
+    }
+    updateFacets() {
+        if (this.displayedFilters.length > 0) {
+            this.facetsLoaded = false;
+            this.updateFacetsDebouncer.run(async () => {
+                var _a, _b;
+                this.facets = (_b = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets).catch(() => []))) !== null && _b !== void 0 ? _b : [];
+                this.facetsLoaded = true;
+            });
+        }
+        else {
+            this.facets = [];
+        }
+    }
+    updateSuggestions() {
+        this.suggestionsLoaded = false;
+        this.suggestDebouncer.run(async () => {
+            this.suggestions = this.api && this.query.length > 2 ? await this.api.getSuggestions(this.suggestRequest).then(r => r.suggestions).catch(() => []) : [];
+            this.suggestionsLoaded = true;
+        });
+    }
+    onSearchBarKeyUp(e) {
+        const input = e.composedPath()[0];
+        this.query = input.value;
+        if (e.key === "Enter") {
+            this.launchSearch();
+        }
+    }
+    onSearchBarKeyDown(e) {
+        var _a, _b;
+        switch (e.key) {
+            case "Escape":
+                this.mobileMenuOpen = false;
+                (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur();
+                break;
+            case "ArrowDown":
+                e.stopPropagation();
+                e.preventDefault();
+                (_b = this.firstSuggestion) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+        }
+    }
+    onFloatingContainerKeyUp(e) {
+        var _a;
+        if (e.key === "Escape") {
+            this.displayFacets = false;
+            (_a = this.filtersOpener) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    setQuery(query) {
+        if (this.input) {
+            this.input.value = query;
+        }
+        this.query = query;
+    }
+    onSuggestClick(e, suggest) {
+        if (!e.ctrlKey && !e.metaKey) {
+            this.onSuggestSelected(e, suggest);
+        }
+    }
+    onSuggestKeyUp(e, suggest) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.onSuggestSelected(e, suggest);
+        }
+    }
+    onSuggestSelected(e, suggest) {
+        e.preventDefault();
+        this.setQuery(suggest);
+        this.launchSearch();
+    }
+    launchSearch() {
+        if (this.query) {
+            let filteredRecentSearches = this.recentSearches
+                .filter(q => q.toLowerCase() !== this.query.toLowerCase())
+                .filter((q, index) => index < 20);
+            this.recentSearches = [this.query, ...filteredRecentSearches];
+            this.saveRecentSearches();
+        }
+        this.focus();
+        this.dispatchEvent(new LaunchSearchEvent(this.request));
+    }
+    saveRecentSearches() {
+        window.localStorage.setItem(this.recentSearchesStorageKey, JSON.stringify(this.recentSearches));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("focusin", this.closeFloatingContainer);
+        document.addEventListener("click", this.closeFloatingContainer);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("focusin", this.closeFloatingContainer);
+        document.addEventListener("click", this.closeFloatingContainer);
+    }
+    updateSize(e) {
+        this.sizeCategory = e.detail.category;
+    }
+    getLocaleLabel(locale) {
+        var _a;
+        return (_a = this.availableContentLocales.filter(l => { var _a; return ((_a = l.lang) !== null && _a !== void 0 ? _a : "").toLowerCase() === (locale !== null && locale !== void 0 ? locale : "").toLowerCase(); })
+            .map(l => l.label)
+            .pop()) !== null && _a !== void 0 ? _a : locale;
+    }
+    setFilter(key, label, selectedValues) {
+        let newFilters = this.searchFilters.filter(f => f.key !== key);
+        this.facets.forEach(facet => {
+            if (facet.key === key) {
+                flatDeep(facet.rootNodes, n => n.childNodes).forEach(n => n.selected = selectedValues.includes(n.value));
+            }
+        });
+        if (selectedValues.length) {
+            newFilters.push({
+                key: key,
+                label: label,
+                negative: false,
+                values: selectedValues
+            });
+        }
+        this.searchFilters = newFilters;
+        this.scrollToFacet = key;
+    }
+    clearFilters() {
+        this.facets.forEach(facet => flatDeep(facet.rootNodes, n => n.childNodes).forEach(n => n.selected = false));
+        this.searchFilters = [];
+        const firstFacet = this.facets[0];
+        this.scrollToFacet = firstFacet === null || firstFacet === void 0 ? void 0 : firstFacet.key;
+    }
+    removeRecentSearch(e, query) {
+        var _a, _b, _c, _d;
+        e.preventDefault();
+        e.stopPropagation();
+        const thingToFocus = (_d = (_b = (_a = this.focusedSuggestion) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : (_c = this.focusedSuggestion) === null || _c === void 0 ? void 0 : _c.nextElementSibling) !== null && _d !== void 0 ? _d : this.input;
+        thingToFocus === null || thingToFocus === void 0 ? void 0 : thingToFocus.focus();
+        this.recentSearches = this.recentSearches.filter(q => q.toLowerCase() !== query.toLowerCase());
+        this.saveRecentSearches();
+    }
+    onSuggestKeyDown(e) {
+        var _a, _b, _c, _d, _e, _f;
+        switch (e.key) {
+            case "ArrowUp":
+                (_c = ((_b = (_a = this.focusedSuggestion) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : this.lastSuggestion)) === null || _c === void 0 ? void 0 : _c.focus();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case "ArrowDown":
+                (_f = ((_e = (_d = this.focusedSuggestion) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.firstSuggestion)) === null || _f === void 0 ? void 0 : _f.focus();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+        }
+    }
+};
+FtSearchBar.elementDefinitions = {
+    "ft-accordion": FtAccordion,
+    "ft-accordion-item": FtAccordionItem,
+    "ft-button": FtButton,
+    "ft-chip": FtChip,
+    "ft-filter": FtFilter,
+    "ft-filter-option": FtFilterOption,
+    "ft-icon": FtIcon,
+    "ft-ripple": FtRipple,
+    "ft-select": FtSelect,
+    "ft-select-option": FtSelectOption,
+    "ft-size-watcher": FtSizeWatcher,
+    "ft-snap-scroll": FtSnapScroll,
+    "ft-tooltip": FtTooltip,
+    "ft-typography": FtTypography,
+    "mwc-icon": Icon,
+};
+__decorate([
+    property({ type: String })
+], FtSearchBar.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: String })
+], FtSearchBar.prototype, "apiIntegrationIdentifier", void 0);
+__decorate([
+    property({ type: String })
+], FtSearchBar.prototype, "contentLocale", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "availableContentLocales", void 0);
+__decorate([
+    property({ type: String })
+], FtSearchBar.prototype, "uiLocale", void 0);
+__decorate([
+    jsonProperty({})
+], FtSearchBar.prototype, "labels", void 0);
+__decorate([
+    jsonProperty([])
+], FtSearchBar.prototype, "displayedFilters", void 0);
+__decorate([
+    property()
+], FtSearchBar.prototype, "searchRequestSerializer", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "searchFilters", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "sizeCategory", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "displayFacets", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "mobileMenuOpen", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "facets", void 0);
+__decorate([
+    query(".ft-search-bar--container")
+], FtSearchBar.prototype, "container", void 0);
+__decorate([
+    query(".ft-search-bar--filters-opener")
+], FtSearchBar.prototype, "filtersOpener", void 0);
+__decorate([
+    query(".ft-search-bar--floating-panel")
+], FtSearchBar.prototype, "floatingContainer", void 0);
+__decorate([
+    query("ft-snap-scroll.ft-search-bar--filters-container")
+], FtSearchBar.prototype, "scrollingFiltersContainer", void 0);
+__decorate([
+    query(".ft-search-bar--input")
+], FtSearchBar.prototype, "input", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "query", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "suggestions", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "suggestionsLoaded", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "recentSearches", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "scrollToFacet", void 0);
+__decorate([
+    query(".ft-search-bar--suggestion:first-child")
+], FtSearchBar.prototype, "firstSuggestion", void 0);
+__decorate([
+    query(".ft-search-bar--suggestion:focus-within")
+], FtSearchBar.prototype, "focusedSuggestion", void 0);
+__decorate([
+    query(".ft-search-bar--suggestion:last-child")
+], FtSearchBar.prototype, "lastSuggestion", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "api", void 0);
+FtSearchBar = __decorate([
+    customElement("ft-search-bar")
+], FtSearchBar);
+export { FtSearchBar };
+//# sourceMappingURL=ft-search-bar.js.map