@fluid-topics/ft-search-bar 0.2.16 → 0.2.19

package/build/ft-search-bar.css.d.ts

@@ -7,6 +7,7 @@ export declare const FtSearchBarCssVariables: {
     mobileOpenBottom: FtCssVariable;
     mobileOpenLeft: FtCssVariable;
     mobileOpenRight: FtCssVariable;
+    desktopFiltersHeight: FtCssVariable;
     floatingZIndex: FtCssVariable;
     colorSurface: FtCssVariable;
     colorOnSurface: FtCssVariable;

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

@@ -6,6 +6,7 @@ import { FtSelectCssVariables } from "@fluid-topics/ft-select";
 import { FtSnapScrollCssVariables } from "@fluid-topics/ft-snap-scroll";
 import { FtChipCssVariables } from "@fluid-topics/ft-chip";
 import { FtSkeletonCssVariables } from "@fluid-topics/ft-skeleton";
+import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip";
 export const FtSearchBarCssVariables = {
     height: FtCssVariable.create("--ft-search-bar-height", "SIZE", "38px"),
     borderRadius: FtCssVariable.extend("--ft-search-bar-border-radius", designSystemVariables.borderRadiusS),
@@ -14,7 +15,8 @@ export const FtSearchBarCssVariables = {
     mobileOpenBottom: FtCssVariable.create("--ft-search-bar-mobile-open-bottom", "SIZE", "0"),
     mobileOpenLeft: FtCssVariable.create("--ft-search-bar-mobile-open-left", "SIZE", "0"),
     mobileOpenRight: FtCssVariable.create("--ft-search-bar-mobile-open-right", "SIZE", "0"),
-    floatingZIndex: FtCssVariable.create("--ft-search-bar-floating-components-z-index", "NUMBER", "2"),
+    desktopFiltersHeight: FtCssVariable.create("--ft-search-bar-desktop-filters-height", "SIZE", "350px"),
+    floatingZIndex: FtCssVariable.create("--ft-search-bar-floating-components-z-index", "NUMBER", "3"),
     colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
     colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
     colorOnSurfaceMedium: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
@@ -50,9 +52,16 @@ export const searchBarCss = css `
         right: ${FtSearchBarCssVariables.mobileOpenRight};
         z-index: ${FtSearchBarCssVariables.floatingZIndex};
         padding: 16px;
+    }
+
+    .ft-search-bar--mobile-menu-open:not(.ft-search-bar--forced-open) {
         background: ${FtSearchBarCssVariables.colorSurface};
     }
 
+    .ft-search-bar--mobile-menu-open.ft-search-bar--forced-open {
+        position: ${FtSearchBarCssVariables.mobileOpenPosition.get("static")};
+    }
+
     .ft-search-bar {
         position: relative;
         display: flex;
@@ -106,12 +115,12 @@ export const searchBarCss = css `
         flex-grow: 1;
         border: none;
         background-color: transparent;
+        color: ${FtSearchBarCssVariables.colorOnSurface};
         outline: none;
     }
 
-    .ft-search-bar--desktop .ft-search-bar--input {
-        flex-shrink: 0;
-        min-width: 250px;
+    .ft-search-bar--input::placeholder {
+        color: ${FtSearchBarCssVariables.colorOnSurfaceMedium};
     }
 
     .ft-search-bar--actions {
@@ -121,7 +130,7 @@ export const searchBarCss = css `
         align-items: center;
         height: 100%;
 
-        --ft-tooltip-z-index: 3;
+        ${setVariable(FtTooltipCssVariables.zIndex, `calc(${FtSearchBarCssVariables.floatingZIndex} + 1)`)};
     }
 
     .ft-search-bar > ft-button,
@@ -179,23 +188,31 @@ export const searchBarCss = css `
 `;
 //language=css
 export const facetsCss = css `
-    .ft-search-bar--floating-panel .ft-search-bar--presets {
+    .ft-search-bar--desktop-menu .ft-search-bar--presets {
         margin-right: auto;
     }
 
-    .ft-search-bar--floating-panel .ft-search-bar--presets {
+    .ft-search-bar--desktop-menu .ft-search-bar--presets {
         min-width: 250px;
         ${setVariable(FtSelectCssVariables.optionsZIndex, "2")};
     }
 
-    .ft-search-bar--floating-panel {
+    .ft-search-bar--desktop-menu {
+        display: flex;
         flex-direction: column;
         gap: 16px;
+    }
+
+    .ft-search-bar + .ft-search-bar--desktop-menu {
+        margin-top: 8px;
+    }
+
+    .ft-search-bar--floating-panel {
         padding: 16px;
     }
 
     .ft-search-bar--floating-panel-open .ft-search-bar--floating-panel {
-        display: flex;
+        display: block;
     }
 
     .ft-search-bar--desktop .ft-search-bar--facets-actions {
@@ -203,6 +220,9 @@ export const facetsCss = css `
         align-items: center;
         justify-content: flex-end;
         gap: 8px;
+    }
+
+    .ft-search-bar--floating-panel .ft-search-bar--facets-actions {
         padding: 0 10px;
     }
 
@@ -224,13 +244,13 @@ export const facetsCss = css `
         display: none;
     }
 
-    .ft-search-bar--floating-panel .ft-search-bar--filters-container {
+    .ft-search-bar--desktop-menu .ft-search-bar--filters-container {
         display: block;
-        height: 350px;
+        height: ${FtSearchBarCssVariables.desktopFiltersHeight};
         --ft-snap-scroll-gap: 16px;
     }
 
-    .ft-search-bar--floating-panel ft-filter {
+    .ft-search-bar--desktop-menu ft-filter {
         display: flex;
         flex-grow: 0;
         max-height: 100%;
@@ -294,7 +314,7 @@ export const facetsCss = css `
         padding-right: 0;
     }
 
-    .ft-search-bar--floating-panel .ft-search-bar--launch-search {
+    .ft-search-bar--desktop-menu .ft-search-bar--launch-search {
         margin: 0;
     }
 `;
@@ -350,7 +370,7 @@ export const suggestionsCss = css `
     .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);
+        z-index: ${FtSearchBarCssVariables.floatingZIndex};
         top: 100%;
         left: -1px;
         right: -1px;
@@ -370,12 +390,6 @@ export const suggestionsCss = css `
         display: block;
     }
 
-    .ft-search-bar--no-suggestions {
-        text-align: center;
-        padding: 8px;
-        color: ${FtSearchBarCssVariables.colorOnSurface};
-    }
-
     .ft-search-bar--suggestion {
         text-decoration: none;
         position: relative;

package/build/ft-search-bar.d.ts

@@ -16,8 +16,8 @@ export interface FtSearchBarLabels extends ParametrizedLabels {
     clearInputButton?: string;
     clearFilterButton?: string;
     displayMoreFilterValuesButton?: string;
+    noFilterValuesAvailable?: string;
     searchButton?: string;
-    noSuggestions?: string;
     contentLocaleSelector?: string;
     presetsSelector?: string;
     removeRecentSearch?: string;
@@ -28,7 +28,7 @@ export declare type DisplayMode = "auto" | "mobile" | "desktop";
 export interface FtSearchBarProperties {
     labels?: FtSearchBarLabels;
     mode?: DisplayMode;
-    forceMobileMenuOpen?: boolean;
+    forceMenuOpen?: boolean;
     baseUrl: string;
     apiIntegrationIdentifier?: string;
     contentLocale?: string;
@@ -52,6 +52,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     dense: boolean;
     mode?: DisplayMode;
     forceMobileMenuOpen: boolean;
+    forceMenuOpen: boolean;
     baseUrl: string;
     apiIntegrationIdentifier: string;
     contentLocale?: string;
@@ -88,7 +89,6 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private lastSuggestion?;
     private updateFacetsDebouncer;
     private suggestDebouncer;
-    private get recentSearchesStorageKey();
     private api?;
     get request(): FtSearchRequest;
     get facetsRequest(): Array<FtSearchFacetConf>;
@@ -99,6 +99,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private get hasPriors();
     private get hasLocaleSelector();
     focus(): void;
+    focusInput(): void;
     clear(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     protected renderSearchBar(): import("lit-html").TemplateResult<1>;
@@ -107,9 +108,11 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private renderMobileFacets;
     private contentLocalesAsFilterOptions;
     private renderDesktopSearchBar;
+    private renderDesktopMenu;
     private renderSearchBarLeftAction;
     private renderDesktopSearchBarButtons;
     private renderFacetsActions;
+    private renderDesktopClearFilters;
     private renderDesktopFacets;
     private renderSelectedFacets;
     private renderSuggestions;
@@ -131,6 +134,8 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private onSuggestKeyUp;
     private onSuggestSelected;
     private launchSearch;
+    private get recentSearchesStorageKey();
+    private initRecentSearches;
     private saveRecentSearches;
     private closeFloatingContainer;
     connectedCallback(): void;
@@ -144,7 +149,5 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private clearFilters;
     private removeRecentSearch;
     private onSuggestKeyDown;
-    private getFilterExportParts;
-    private getFilterSubPartExportAttribute;
 }
 //# sourceMappingURL=ft-search-bar.d.ts.map