@fluid-topics/ft-search-bar 0.3.0 → 0.3.3

package/build/ft-search-bar.light.js

@@ -1627,9 +1627,9 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
                  @keydown=${e=>this.onOptionKeyDown(e,t)}
                  @click=${()=>this.selectOption(t)}>
                 <ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
-                ${t.label}
+                <span>${t.label}</span>
             </div>
-        `}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.minWidth=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,r;let n;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),n=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),n=null!==(r=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==r?r:this.firstOption}null==n||n.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Mi.elementDefinitions={"ft-input-label":Di,"ft-typography":Yt,"ft-ripple":pe,"ft-icon":Se},Mi.styles=[Kt,qt,i.css`
+        `}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,r;let n;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),n=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),n=null!==(r=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==r?r:this.firstOption}null==n||n.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Mi.elementDefinitions={"ft-input-label":Di,"ft-typography":Yt,"ft-ripple":pe,"ft-icon":Se},Mi.styles=[Kt,qt,i.css`
             *:focus {
                 outline: none;
             }
@@ -1763,6 +1763,11 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
                 align-items: center;
             }
 
+            .ft-select--option span {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
             .ft-select--helper-text {
                 padding: 0 12px 0 16px;
                 color: ${ji.helperColor};

package/build/ft-search-bar.min.js

@@ -1747,9 +1747,9 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
                  @keydown=${e=>this.onOptionKeyDown(e,t)}
                  @click=${()=>this.selectOption(t)}>
                 <ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
-                ${t.label}
+                <span>${t.label}</span>
             </div>
-        `}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.minWidth=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,n;let r;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),r=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),r=null!==(n=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==n?n:this.firstOption}null==r||r.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Do.elementDefinitions={"ft-input-label":Fo,"ft-typography":Ve,"ft-ripple":ai,"ft-icon":ki},Do.styles=[_e,He,g`
+        `}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,n;let r;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),r=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),r=null!==(n=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==n?n:this.firstOption}null==r||r.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}Do.elementDefinitions={"ft-input-label":Fo,"ft-typography":Ve,"ft-ripple":ai,"ft-icon":ki},Do.styles=[_e,He,g`
             *:focus {
                 outline: none;
             }
@@ -1883,6 +1883,11 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
                 align-items: center;
             }
 
+            .ft-select--option span {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
             .ft-select--helper-text {
                 padding: 0 12px 0 16px;
                 color: ${Lo.helperColor};

package/build/managers/DesktopSearchBarManager.d.ts

@@ -0,0 +1,16 @@
+import { FtSearchBar } from "../ft-search-bar";
+import { FacetsChipsManager } from "./FacetsChipsManager";
+import { SuggestManager } from "./SuggestManager";
+export declare class DesktopSearchBarManager {
+    private searchBar;
+    private selectedFacetsManager;
+    private suggestManager;
+    constructor(searchBar: FtSearchBar, selectedFacetsManager?: FacetsChipsManager, suggestManager?: SuggestManager);
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderSearchBarLeftAction;
+    private renderDesktopSearchBarButtons;
+    private onSearchBarKeyDown;
+    private onSearchBarKeyUp;
+}
+//# sourceMappingURL=DesktopSearchBarManager.d.ts.map

package/build/managers/DesktopSearchBarManager.js

@@ -0,0 +1,131 @@
+import { css, html, nothing } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { FacetsChipsManager } from "./FacetsChipsManager";
+import { SuggestManager } from "./SuggestManager";
+import { classMap } from "lit/directives/class-map.js";
+export class DesktopSearchBarManager {
+    constructor(searchBar, selectedFacetsManager, suggestManager) {
+        this.searchBar = searchBar;
+        this.selectedFacetsManager = selectedFacetsManager !== null && selectedFacetsManager !== void 0 ? selectedFacetsManager : new FacetsChipsManager(searchBar);
+        this.suggestManager = suggestManager !== null && suggestManager !== void 0 ? suggestManager : new SuggestManager(searchBar);
+    }
+    render() {
+        const rootClasses = {
+            "ft-search-bar--container": true,
+            "ft-search-bar--dense": this.searchBar.dense,
+            "ft-search-bar--desktop": true,
+            "ft-search-bar--floating-panel-open": this.searchBar.displayFacets && !this.searchBar.forceMenuOpen,
+            "ft-search-bar--forced-open": this.searchBar.forceMenuOpen
+        };
+        return html `
+            <div class="${classMap(rootClasses)}" part="container" tabindex="-1">
+                <div class="ft-search-bar" part="search-bar">
+                    ${(this.renderSearchBarLeftAction())}
+                    <div class="ft-search-bar--input-container" part="input-container" tabindex="-1">
+                        <div class="ft-search-bar--input-outline" part="input-outline">
+                            ${this.searchBar.dense ? this.selectedFacetsManager.render() : nothing}
+                            <input class="ft-search-bar--input ft-typography--body2"
+                                   part="input"
+                                   type="text"
+                                   placeholder="${this.searchBar.labelResolver.resolve("inputPlaceHolder")}"
+                                   value="${this.searchBar.query}"
+                                   @keydown=${(e) => this.onSearchBarKeyDown(e)}
+                                   @keyup=${(e) => this.onSearchBarKeyUp(e)}>
+                        </div>
+                        ${this.suggestManager.render()}
+                    </div>
+                    ${this.renderDesktopSearchBarButtons()}
+                    ${this.searchBar.renderDesktopFloatingMenu()}
+                </div>
+                ${this.searchBar.dense
+            ? nothing
+            : this.searchBar.forceMenuOpen ? this.searchBar.renderDesktopMenu()
+                : this.selectedFacetsManager.render()}
+            </div>
+        `;
+    }
+    renderSearchBarLeftAction() {
+        if (this.searchBar.hasFacets()) {
+            return this.searchBar.forceMenuOpen ? nothing : html `
+                <ft-button class="ft-search-bar--filters-opener ft-search-bar--left-action"
+                           part="filters-opener"
+                           trailingIcon
+                           icon="${this.searchBar.displayFacets ? "expand_less" : "expand_more"}"
+                           @click=${(e) => {
+                e.stopPropagation();
+                this.searchBar.displayFacets = !this.searchBar.displayFacets;
+            }}
+                           @focusin=${(e) => e.stopPropagation()}>
+                    ${this.searchBar.labelResolver.resolve("filtersButton")}
+                </ft-button>
+            `;
+        }
+        else if (this.searchBar.hasLocaleSelector()) {
+            return html `
+                <ft-select outlined
+                           class="ft-search-bar--content-locale ft-search-bar--left-action"
+                           part="content-locale select-ft-locale"
+                           .exportpartsPrefixes=${["content-locale", "select-ft-locale"]}
+                           @change=${(e) => this.searchBar.contentLocale = e.detail == null ? undefined : e.detail}>
+                    ${repeat(this.searchBar.availableContentLocales, l => l.lang, l => html `
+                                <ft-select-option .value=${l.lang}
+                                                  label="${l.label}"
+                                                  ?selected=${l.lang === this.searchBar.contentLocale}>
+                                </ft-select-option>
+                            `)}
+                </ft-select>
+            `;
+        }
+        return nothing;
+    }
+    renderDesktopSearchBarButtons() {
+        return html `
+            <div class="ft-search-bar--actions"
+                 part="search-bar-actions">
+                ${this.searchBar.query ? html `
+                    <ft-button class="ft-search-bar--clear-query"
+                               part="clear-query"
+                               icon="close"
+                               round dense
+                               label="${this.searchBar.labelResolver.resolve("clearInputButton")}"
+                               @click=${() => this.searchBar.setQuery("")}
+                    ></ft-button>
+                    <div class="ft-search-bar--separator"></div>
+                ` : null}
+                <ft-button class="ft-search-bar--launch-search"
+                           part="launch-search-in-bar"
+                           icon="search"
+                           round dense
+                           label="${this.searchBar.labelResolver.resolve("searchButton")}"
+                           @click=${() => this.searchBar.launchSearch()}
+                ></ft-button>
+            </div>
+        `;
+    }
+    onSearchBarKeyDown(e) {
+        var _a;
+        switch (e.key) {
+            case "Escape":
+                this.searchBar.mobileMenuOpen = false;
+                (_a = this.searchBar.input) === null || _a === void 0 ? void 0 : _a.blur();
+                break;
+            case "ArrowDown":
+                e.stopPropagation();
+                e.preventDefault();
+                this.suggestManager.focusFirstSuggestion();
+                break;
+        }
+    }
+    onSearchBarKeyUp(e) {
+        const input = e.composedPath()[0];
+        this.searchBar.query = input.value;
+        if (e.key === "Enter") {
+            this.searchBar.launchSearch();
+        }
+    }
+}
+//language=css
+DesktopSearchBarManager.styles = css `
+
+    `;
+//# sourceMappingURL=DesktopSearchBarManager.js.map

package/build/managers/FacetsChipsManager.d.ts

@@ -0,0 +1,10 @@
+import type { FtSearchBar } from "../ft-search-bar";
+export declare class FacetsChipsManager {
+    private searchBar;
+    constructor(searchBar: FtSearchBar);
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    private openMobileFilters;
+    getLocaleLabel(locale: string | undefined): string | undefined;
+}
+//# sourceMappingURL=FacetsChipsManager.d.ts.map

package/build/managers/FacetsChipsManager.js

@@ -0,0 +1,129 @@
+import { css, html, nothing } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { getBreadcrumbFromValue, getLabelFromValue, getSelectedValues } from "../converters";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtSnapScrollCssVariables } from "@fluid-topics/ft-snap-scroll";
+import { FtChipCssVariables } from "@fluid-topics/ft-chip";
+export class FacetsChipsManager {
+    constructor(searchBar) {
+        this.searchBar = searchBar;
+    }
+    render() {
+        if (!this.searchBar.hasLocaleSelector() && !this.searchBar.hasFacets()) {
+            return html ``;
+        }
+        const isMobile = this.searchBar.isMobile();
+        const useSnapScroll = (!isMobile && this.searchBar.dense) || (isMobile && this.searchBar.isMobileMenuOpen());
+        const filters = html `
+            ${this.searchBar.hasLocaleSelector() && (this.searchBar.hasFacets() || isMobile) ? html `
+                <ft-chip part="selected-filters selected-filter-ft-locale"
+                         ?dense=${this.searchBar.dense && !isMobile}
+                         ?clickable=${isMobile}
+                         @click=${() => this.openMobileFilters("ft:locale")}
+                         data-key="ft:locale"
+                         data-value="${this.searchBar.contentLocale}">
+                    ${(this.getLocaleLabel(this.searchBar.contentLocale))}
+                </ft-chip>
+            ` : null}
+            ${repeat(this.searchBar.facets, facet => facet.key, facet => {
+            const values = getSelectedValues(facet);
+            return repeat(values, value => {
+                let label = facet.label + ": " + getBreadcrumbFromValue(value);
+                const keyWithNoColumn = facet.key.replace(":", "-");
+                const chip = html `
+                                        <ft-chip
+                                                part="selected-filters selected-filter-${keyWithNoColumn}"
+                                                ?dense=${this.searchBar.dense && !isMobile}
+                                                ?clickable=${isMobile}
+                                                ?removable=${!isMobile}
+                                                icon=${isMobile ? nothing : "close"}
+                                                label="${label}"
+                                                title=${useSnapScroll ? label : nothing}
+                                                @click=${() => this.openMobileFilters(facet.key)}
+                                                @icon-click=${() => this.searchBar.setFilter(facet.key, values.filter(v => v !== value))}
+                                                data-key="${facet.key}"
+                                                data-value="${value}">
+                                            ${getLabelFromValue(value)}
+                                        </ft-chip>
+                                    `;
+                return useSnapScroll ? chip : html `
+                                        <ft-tooltip inline text="${label}">
+                                            ${chip}
+                                        </ft-tooltip>
+                                    `;
+            });
+        })}
+            ${isMobile ? html `
+                <ft-chip part="selected-filters mobile-filters-opener"
+                         icon="add"
+                         clickable
+                         @click=${() => {
+            this.searchBar.mobileMenuOpen = true;
+            this.searchBar.displayFacets = true;
+        }}>
+                    ${this.searchBar.labelResolver.resolve("filtersButton")}
+                </ft-chip>
+            ` : nothing}
+        `;
+        return useSnapScroll
+            ? html `
+                    <ft-snap-scroll horizontal controls hideScrollbar limitSize
+                                    class="ft-search-bar--selected-filters"
+                                    part="selected-filters-container"
+                                    exportpartsPrefix="selected-filters-container">
+                        ${filters}
+                    </ft-snap-scroll>
+                `
+            : html `
+                    <div class="ft-search-bar--selected-filters" part="selected-filters-container">
+                        ${filters}
+                    </div>
+                `;
+    }
+    openMobileFilters(filterKey) {
+        if (this.searchBar.isMobile()) {
+            this.searchBar.mobileMenuOpen = true;
+            this.searchBar.displayFacets = true;
+            this.searchBar.scrollToFacet = filterKey;
+        }
+    }
+    getLocaleLabel(locale) {
+        var _a;
+        return (_a = this.searchBar.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;
+    }
+}
+//language=css
+FacetsChipsManager.styles = css `
+        .ft-search-bar--selected-filters:not(ft-snap-scroll) {
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        ft-snap-scroll.ft-search-bar--selected-filters {
+            overflow: hidden;
+            ${setVariable(FtSnapScrollCssVariables.gap, "4px")};
+        }
+
+        ft-snap-scroll.ft-search-bar--selected-filters::part(content) {
+            align-items: center;
+        }
+
+        .ft-search-bar--desktop ft-snap-scroll.ft-search-bar--selected-filters {
+            ${setVariable(FtChipCssVariables.iconSize, "17px")};
+            ${setVariable(FtChipCssVariables.fontSize, "12px")};
+        }
+
+        .ft-search-bar--selected-filters * {
+            max-width: 100%;
+        }
+
+        .ft-search-bar--selected-filters ft-chip {
+            flex-grow: 0;
+        }
+    `;
+//# sourceMappingURL=FacetsChipsManager.js.map

package/build/managers/MobileSearchBarManager.d.ts

@@ -0,0 +1,14 @@
+import { FtSearchBar } from "../ft-search-bar";
+import { FacetsChipsManager } from "./FacetsChipsManager";
+import { SuggestManager } from "./SuggestManager";
+export declare class MobileSearchBarManager {
+    private searchBar;
+    private selectedFacetsManager;
+    private suggestManager;
+    constructor(searchBar: FtSearchBar, selectedFacetsManager?: FacetsChipsManager, suggestManager?: SuggestManager);
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderMobileSearchBarButtons;
+    private onSearchBarKeyUp;
+}
+//# sourceMappingURL=MobileSearchBarManager.d.ts.map

package/build/managers/MobileSearchBarManager.js

@@ -0,0 +1,92 @@
+import { css, html, nothing } from "lit";
+import { FacetsChipsManager } from "./FacetsChipsManager";
+import { SuggestManager } from "./SuggestManager";
+import { classMap } from "lit/directives/class-map.js";
+export class MobileSearchBarManager {
+    constructor(searchBar, selectedFacetsManager, suggestManager) {
+        this.searchBar = searchBar;
+        this.selectedFacetsManager = selectedFacetsManager !== null && selectedFacetsManager !== void 0 ? selectedFacetsManager : new FacetsChipsManager(searchBar);
+        this.suggestManager = suggestManager !== null && suggestManager !== void 0 ? suggestManager : new SuggestManager(searchBar);
+    }
+    render() {
+        const rootClasses = {
+            "ft-search-bar--container": true,
+            "ft-search-bar--mobile": true,
+            "ft-search-bar--mobile-menu-open": this.searchBar.isMobileMenuOpen(),
+            "ft-search-bar--forced-open": this.searchBar.forceMobileMenuOpen,
+        };
+        return html `
+            <div class="${classMap(rootClasses)}" part="container" tabindex="-1">
+                <div class="ft-search-bar">
+                    <div class="ft-search-bar--input-container" part="input-container">
+                        <div class="ft-search-bar--input-outline" part="input-outline">
+                            <input class="ft-search-bar--input ft-typography--body2"
+                                   part="input"
+                                   type="text"
+                                   placeholder="${this.searchBar.labelResolver.resolve("inputPlaceHolder")}"
+                                   value="${this.searchBar.query}"
+                                   @keyup=${(e) => this.onSearchBarKeyUp(e)}
+                                   @focus=${() => {
+            this.searchBar.mobileMenuOpen = true;
+            this.searchBar.displayFacets = false;
+        }}>
+                        </div>
+                    </div>
+                    ${this.renderMobileSearchBarButtons()}
+                </div>
+                ${this.searchBar.displayFacets ? this.searchBar.renderFacetsActions() : this.selectedFacetsManager.render()}
+                ${this.searchBar.displayFacets ? this.searchBar.renderMobileFacets() : this.suggestManager.render()}
+                ${this.searchBar.isMobileMenuOpen() || this.searchBar.displayFacets ? html `
+                            <ft-button class="ft-search-bar--launch-search"
+                                       part="launch-search-in-panel"
+                                       icon="search"
+                                       @click=${this.searchBar.launchSearch}>
+                                ${this.searchBar.labelResolver.resolve("searchButton")}
+                            </ft-button>
+                        ` : nothing}
+            </div>
+        `;
+    }
+    renderMobileSearchBarButtons() {
+        const displayClearButton = this.searchBar.query || (this.searchBar.isMobileMenuOpen() && !this.searchBar.forceMobileMenuOpen);
+        return html `
+            <div class="ft-search-bar--actions" part="search-bar-actions">
+                ${displayClearButton ? html `
+                    <ft-button class="ft-search-bar--clear-query"
+                               part="clear-query"
+                               icon="close"
+                               round
+                               label="${this.searchBar.labelResolver.resolve("clearInputButton")}"
+                               tooltipPosition="left"
+                               @click=${() => {
+            this.searchBar.setQuery("");
+            this.searchBar.mobileMenuOpen = false;
+            this.searchBar.displayFacets = false;
+        }}
+                    ></ft-button>
+                    <div class="ft-search-bar--separator"></div>
+                ` : nothing}
+                <ft-button class="ft-search-bar--launch-search"
+                           part="launch-search-in-bar"
+                           icon="search"
+                           round
+                           label="${this.searchBar.labelResolver.resolve("searchButton")}"
+                           tooltipPosition="left"
+                           @click=${() => { var _a; return this.searchBar.isMobileMenuOpen() ? this.searchBar.launchSearch() : (_a = this.searchBar.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
+                ></ft-button>
+            </div>
+        `;
+    }
+    onSearchBarKeyUp(e) {
+        const input = e.composedPath()[0];
+        this.searchBar.query = input.value;
+        if (e.key === "Enter") {
+            this.searchBar.launchSearch();
+        }
+    }
+}
+//language=css
+MobileSearchBarManager.styles = css `
+
+    `;
+//# sourceMappingURL=MobileSearchBarManager.js.map

package/build/managers/SuggestManager.d.ts

@@ -0,0 +1,20 @@
+import type { FtSearchBar } from "../ft-search-bar";
+export declare class SuggestManager {
+    private searchBar;
+    private updateDebouncer;
+    constructor(searchBar: FtSearchBar, debounceTime?: number);
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    update(): Promise<void>;
+    private onSuggestKeyDown;
+    private onSuggestKeyUp;
+    private onSuggestClick;
+    private onSuggestSelected;
+    private removeRecentSearch;
+    private getIcon;
+    private getFocusedSuggestionElement;
+    private getLastSuggestionElement;
+    private getFirstSuggestionElement;
+    focusFirstSuggestion(): void;
+}
+//# sourceMappingURL=SuggestManager.d.ts.map

package/build/managers/SuggestManager.js

@@ -0,0 +1,215 @@
+import { css, html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { FtIcons, FtIconVariants, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
+import { Debouncer } from "@fluid-topics/ft-wc-utils";
+import { FtSearchBarCssVariables } from "../ft-search-bar.css";
+export class SuggestManager {
+    constructor(searchBar, debounceTime = 300) {
+        this.searchBar = searchBar;
+        this.updateDebouncer = new Debouncer(debounceTime);
+    }
+    render() {
+        const filteredRecentSearches = this.searchBar.recentSearches.filter(q => q.toLowerCase().includes(this.searchBar.query.toLowerCase()));
+        const shouldDisplaySuggestions = this.searchBar.suggestions.length > 0 || filteredRecentSearches.length > 0;
+        return html `
+            <div class="ft-search-bar--suggestions ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
+                 part="suggestions-container"
+                 @keydown=${(e) => this.onSuggestKeyDown(e)}>
+                ${repeat(filteredRecentSearches.slice(0, 5), query => query, query => html `
+                            <a href="${this.searchBar.searchRequestSerializer({
+            ...this.searchBar.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>
+                                <ft-icon variant="material" part="suggestion-icon">history</ft-icon>
+                                <ft-typography variant="body1">${query}</ft-typography>
+                                <ft-button icon="close"
+                                           round
+                                           part="remove-suggestion"
+                                           ?dense=${!this.searchBar.isMobile}
+                                           label="${this.searchBar.labelResolver.resolve("removeRecentSearch")}"
+                                           tooltipPosition="left"
+                                           @click=${(e) => this.removeRecentSearch(e, query)}></ft-button>
+                            </a>
+                        `)}
+                ${repeat(this.searchBar.suggestions, suggest => suggest.value, suggest => html `
+                            <a href="${this.searchBar.searchRequestSerializer({
+            ...this.searchBar.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>
+                        `)}
+            </div>
+        `;
+    }
+    update() {
+        return new Promise((accept, reject) => {
+            this.updateDebouncer.run(async () => {
+                this.searchBar.suggestions = this.searchBar.api && this.searchBar.query.length > 2
+                    ? await this.searchBar.api.getSuggestions(this.searchBar.suggestRequest).then(r => r.suggestions).catch(() => [])
+                    : [];
+                accept();
+            });
+        });
+    }
+    onSuggestKeyDown(e) {
+        var _a, _b, _c, _d, _e, _f;
+        switch (e.key) {
+            case "ArrowUp":
+                (_c = ((_b = (_a = this.getFocusedSuggestionElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : this.getLastSuggestionElement())) === null || _c === void 0 ? void 0 : _c.focus();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case "ArrowDown":
+                (_f = ((_e = (_d = this.getFocusedSuggestionElement()) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.getFirstSuggestionElement())) === null || _f === void 0 ? void 0 : _f.focus();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+        }
+    }
+    onSuggestKeyUp(e, suggest) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.onSuggestSelected(e, suggest);
+        }
+    }
+    onSuggestClick(e, suggest) {
+        if (!e.ctrlKey && !e.metaKey) {
+            this.onSuggestSelected(e, suggest);
+        }
+    }
+    onSuggestSelected(e, suggest) {
+        e.preventDefault();
+        this.searchBar.setQuery(suggest);
+        this.searchBar.launchSearch();
+    }
+    removeRecentSearch(e, query) {
+        var _a, _b;
+        e.preventDefault();
+        e.stopPropagation();
+        let currentFocuseElement = e.target.closest(".ft-search-bar--suggestion");
+        const thingToFocus = (_b = (_a = currentFocuseElement === null || currentFocuseElement === void 0 ? void 0 : currentFocuseElement.previousElementSibling) !== null && _a !== void 0 ? _a : currentFocuseElement === null || currentFocuseElement === void 0 ? void 0 : currentFocuseElement.nextElementSibling) !== null && _b !== void 0 ? _b : this.searchBar.input;
+        thingToFocus === null || thingToFocus === void 0 ? void 0 : thingToFocus.focus();
+        this.searchBar.recentSearches = this.searchBar.recentSearches.filter(q => q.toLowerCase() !== query.toLowerCase());
+        this.searchBar.saveRecentSearches();
+    }
+    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>
+        `;
+    }
+    getFocusedSuggestionElement() {
+        return this.searchBar.querySelector(".ft-search-bar--suggestion:focus-within");
+    }
+    getLastSuggestionElement() {
+        let suggestions = this.searchBar.querySelectorAll(".ft-search-bar--suggestion");
+        return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
+    }
+    getFirstSuggestionElement() {
+        return this.searchBar.querySelector(".ft-search-bar--suggestion");
+    }
+    focusFirstSuggestion() {
+        var _a;
+        (_a = this.getFirstSuggestionElement()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+}
+//language=css
+SuggestManager.styles = css `
+        .ft-search-bar--mobile .ft-search-bar--suggestions {
+            flex-grow: 1;
+            flex-shrink: 1;
+            overflow-y: auto;
+            height: 0;
+        }
+
+        .ft-search-bar--mobile-menu-open .ft-search-bar--suggestions {
+            border-top: 1px solid ${FtSearchBarCssVariables.colorOutline};
+        }
+
+        .ft-search-bar--mobile-menu-open .ft-search-bar--suggestions {
+            height: initial;
+        }
+
+        .ft-search-bar--floating-panel,
+        .ft-search-bar--desktop .ft-search-bar--suggestions {
+            position: absolute;
+            z-index: ${FtSearchBarCssVariables.floatingZIndex};
+            top: 100%;
+            left: -1px;
+            right: -1px;
+            display: none;
+            background: ${FtSearchBarCssVariables.colorSurface};
+            border: 1px solid ${FtSearchBarCssVariables.colorOutline};
+            border-radius: 0 0 ${FtSearchBarCssVariables.borderRadius} ${FtSearchBarCssVariables.borderRadius};
+            box-shadow: ${FtSearchBarCssVariables.elevation02};
+            outline: none;
+        }
+
+        .ft-search-bar--desktop .ft-search-bar--suggestions {
+            top: calc(100% + 2px);
+        }
+
+        .ft-search-bar--input-container:focus-within .ft-search-bar--suggestions-not-empty {
+            display: block;
+        }
+
+        .ft-search-bar--suggestion {
+            text-decoration: none;
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 8px;
+            gap: 8px;
+            cursor: pointer;
+            color: ${FtSearchBarCssVariables.colorOnSurface};
+            min-height: 52px;
+        }
+
+        .ft-search-bar--suggestion > *:not(ft-ripple) {
+            position: relative;
+        }
+
+        .ft-search-bar--desktop .ft-search-bar--suggestion {
+            min-height: 44px;
+        }
+
+        .ft-search-bar--suggestion:focus {
+            outline: none;
+        }
+
+        .ft-search-bar--recent-search + .ft-search-bar--suggestion:not(.ft-search-bar--recent-search) {
+            border-top: 1px solid ${FtSearchBarCssVariables.colorOutline};
+        }
+
+        .ft-search-bar--suggestion ft-typography {
+            display: block;
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
+    `;
+//# sourceMappingURL=SuggestManager.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-search-bar",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Search bar component using Fluid Topics public API",
   "keywords": [
     "Lit"
@@ -11,26 +11,26 @@
   "web": "build/ft-search-bar.min.js",
   "typings": "build/index",
   "files": [
-    "build/*.ts",
-    "build/*.js"
+    "build/**/*.ts",
+    "build/**/*.js"
   ],
   "repository": {
     "type": "git",
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-accordion": "^0.3.0",
-    "@fluid-topics/ft-button": "^0.3.0",
-    "@fluid-topics/ft-chip": "^0.3.0",
-    "@fluid-topics/ft-filter": "^0.3.0",
-    "@fluid-topics/ft-icon": "^0.3.0",
-    "@fluid-topics/ft-select": "^0.3.0",
-    "@fluid-topics/ft-size-watcher": "^0.3.0",
-    "@fluid-topics/ft-skeleton": "^0.3.0",
-    "@fluid-topics/ft-snap-scroll": "^0.3.0",
-    "@fluid-topics/ft-tooltip": "^0.3.0",
-    "@fluid-topics/ft-typography": "^0.3.0",
-    "@fluid-topics/ft-wc-utils": "^0.3.0",
+    "@fluid-topics/ft-accordion": "0.3.3",
+    "@fluid-topics/ft-button": "0.3.3",
+    "@fluid-topics/ft-chip": "0.3.3",
+    "@fluid-topics/ft-filter": "0.3.3",
+    "@fluid-topics/ft-icon": "0.3.3",
+    "@fluid-topics/ft-select": "0.3.3",
+    "@fluid-topics/ft-size-watcher": "0.3.3",
+    "@fluid-topics/ft-skeleton": "0.3.3",
+    "@fluid-topics/ft-snap-scroll": "0.3.3",
+    "@fluid-topics/ft-tooltip": "0.3.3",
+    "@fluid-topics/ft-typography": "0.3.3",
+    "@fluid-topics/ft-wc-utils": "0.3.3",
     "lit": "2.2.8"
   },
   "devDependencies": {
@@ -39,5 +39,5 @@
   "peerDependencies": {
     "@fluid-topics/public-api": "1.0.18"
   },
-  "gitHead": "2019aceb4a578402211f951ec3d68dbc0acf25c7"
+  "gitHead": "b8846f1a72db01834c7217897043ef8cbf7d06fb"
 }