@fluid-topics/ft-search-bar 0.1.8 → 0.1.11

package/build/converters.d.ts

@@ -7,4 +7,5 @@ export declare function getLabelFromValue(value: string): string | undefined;
 export declare function getBreadcrumbFromValue(value: string): string;
 export declare function selectedValues(facet: FtFilterProperties): Array<string>;
 export declare function facetToFilter(facet: FtSearchFacet): FtFilterProperties;
+export declare function getSelectedValues(facet: FtSearchFacet): Array<string>;
 //# sourceMappingURL=converters.d.ts.map

package/build/converters.js

@@ -54,4 +54,9 @@ export function facetToFilter(facet) {
         options: facet.rootNodes.map(n => facetEntryToOption(n, false))
     };
 }
+export function getSelectedValues(facet) {
+    return flatDeep(facet.rootNodes, n => n.selected ? [] : n.childNodes)
+        .filter(n => n.selected)
+        .map(n => n.value);
+}
 //# sourceMappingURL=converters.js.map

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

@@ -38,6 +38,10 @@ export const searchBarCss = css `
         outline: none;
     }
 
+    .ft-search-bar--container > * {
+        flex-shrink: 0;
+    }
+
     .ft-search-bar--mobile-menu-open {
         position: ${FtSearchBarCssVariables.mobileOpenPosition};
         top: ${FtSearchBarCssVariables.mobileOpenTop};
@@ -49,7 +53,6 @@ export const searchBarCss = css `
     }
 
     .ft-search-bar {
-        flex-shrink: 0;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -116,14 +119,14 @@ export const searchBarCss = css `
     }
 
     .ft-search-bar--left-action::part(button) {
-        height : 100%;
+        height: 100%;
     }
 
     .ft-search-bar--floating-panel-open .ft-search-bar--left-action {
         ${setVariable(FtButtonCssVariables.borderRadius, css `calc(${FtSearchBarCssVariables.borderRadius} - 1px) 0 0 0`)};
     }
 
-    .ft-search-bar--launch-search,
+    .ft-search-bar .ft-search-bar--launch-search,
     .ft-search-bar--clear-query {
         margin: 0 4px;
     }
@@ -169,11 +172,13 @@ export const facetsCss = css `
     }
 
     .ft-search-bar--floating-panel {
+        flex-direction: column;
+        gap: 16px;
         padding: 16px;
     }
 
     .ft-search-bar--floating-panel-open .ft-search-bar--floating-panel {
-        display: block;
+        display: flex;
     }
 
     .ft-search-bar--desktop .ft-search-bar--facets-actions {
@@ -182,7 +187,6 @@ export const facetsCss = css `
         justify-content: flex-end;
         gap: 8px;
         padding: 0 10px;
-        margin-bottom: 16px;
     }
 
     .ft-search-bar--mobile .ft-search-bar--facets-actions {
@@ -272,6 +276,10 @@ export const facetsCss = css `
         padding-left: 0;
         padding-right: 0;
     }
+    
+    .ft-search-bar--floating-panel .ft-search-bar--launch-search {
+        margin: 0;
+    }
 `;
 //language=css
 export const selectedFiltersCss = css `

package/build/ft-search-bar.js

@@ -11,7 +11,7 @@ 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 { facetToFilter, getBreadcrumbFromValue, getLabelFromValue, getSelectedValues, 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";
@@ -188,6 +188,14 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
             </div>
             ${this.displayFacets ? this.renderFacetsActions() : this.renderSelectedFacets()}
             ${this.displayFacets ? this.renderMobileFacets() : this.renderSuggestions()}
+            ${this.mobileMenuOpen || this.displayFacets ? html `
+                        <ft-button class="ft-search-bar--launch-search"
+                                   part="search-bar-actions"
+                                   icon="search"
+                                   @click=${this.launchSearch}>
+                            ${this.labelResolver.resolve("searchButton")}
+                        </ft-button>
+                    ` : nothing}
         `;
     }
     renderMobileSearchBarButtons() {
@@ -259,7 +267,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
                                             raiseSelectedOptions
                                             .options=${filter.options}
                                             .displayedValuesLimit=${10}
-                                            @change=${(e) => this.setFilter(filter.id, filter.label, e.detail)}
+                                            @change=${(e) => this.setFilter(filter.id, e.detail)}
                                     ></ft-filter>
                                 </ft-accordion-item>
                             `;
@@ -295,7 +303,14 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
                 <div class="ft-search-bar--floating-panel" @keyup=${this.onFloatingContainerKeyUp} tabindex="-1">
                     ${this.renderFacetsActions()}
                     ${this.renderDesktopFacets()}
-
+                    <div class="ft-search-bar--facets-actions">
+                        <ft-button class="ft-search-bar--launch-search"
+                                   part="search-bar-actions"
+                                   icon="search"
+                                   @click=${this.launchSearch}>
+                            ${this.labelResolver.resolve("searchButton")}
+                        </ft-button>
+                    </div>
                 </div>
             </div>
             ${this.dense ? nothing : this.renderSelectedFacets()}
@@ -416,7 +431,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
                                         raiseSelectedOptions
                                         .options=${filter.options}
                                         .displayedValuesLimit=${10}
-                                        @change=${(e) => this.setFilter(filter.id, filter.label, e.detail)}
+                                        @change=${(e) => this.setFilter(filter.id, e.detail)}
                                 ></ft-filter>
                             `;
         })}
@@ -424,7 +439,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
         `;
     }
     renderSelectedFacets() {
-        if (!this.hasLocaleSelector && this.searchFilters.length === 0) {
+        if (!this.hasLocaleSelector && !this.hasFacets) {
             return null;
         }
         const useSnapScroll = (!this.isMobile && this.dense) || (this.isMobile && this.mobileMenuOpen);
@@ -437,9 +452,10 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
                     ${(this.getLocaleLabel(this.contentLocale))}
                 </ft-chip>
             ` : null}
-            ${repeat(this.searchFilters, filter => filter.key, filter => {
-            return repeat(filter.values, value => {
-                let label = filter.label + ": " + getBreadcrumbFromValue(value);
+            ${repeat(this.facets, facet => facet.key, facet => {
+            const values = getSelectedValues(facet);
+            return repeat(values, value => {
+                let label = facet.label + ": " + getBreadcrumbFromValue(value);
                 const chip = html `
                                         <ft-chip
                                                 part="selected-filters"
@@ -449,8 +465,8 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
                                                 icon=${this.isMobile ? nothing : "close"}
                                                 label="${label}"
                                                 title=${useSnapScroll ? label : nothing}
-                                                @click=${() => this.openMobileFilters(filter.key)}
-                                                @icon-click=${() => this.setFilter(filter.key, filter.label, filter.values.filter(v => v !== value))}>
+                                                @click=${() => this.openMobileFilters(facet.key)}
+                                                @icon-click=${() => this.setFilter(facet.key, values.filter(v => v !== value))}>
                                             ${getLabelFromValue(value)}
                                         </ft-chip>
                                     `;
@@ -737,7 +753,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
             .map(l => l.label)
             .pop()) !== null && _a !== void 0 ? _a : locale;
     }
-    setFilter(key, label, selectedValues) {
+    setFilter(key, selectedValues) {
         let newFilters = this.searchFilters.filter(f => f.key !== key);
         this.facets.forEach(facet => {
             if (facet.key === key) {
@@ -747,7 +763,6 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
         if (selectedValues.length) {
             newFilters.push({
                 key: key,
-                label: label,
                 negative: false,
                 values: selectedValues
             });
@@ -760,7 +775,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
             if (request.contentLocale != null) {
                 this.contentLocale = request.contentLocale;
             }
-            this.searchFilters = request.filters.map(f => { var _a; return ({ ...f, label: (_a = this.knownFacetLabels[f.key]) !== null && _a !== void 0 ? _a : f.key }); });
+            this.searchFilters = request.filters;
         }
     }
     clearFilters() {