@fluid-topics/ft-search-bar 0.2.14 → 0.2.17

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"),
@@ -53,6 +55,10 @@ export const searchBarCss = css `
         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;
@@ -121,7 +127,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 +185,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 +217,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 +241,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 +311,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 +367,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;

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

@@ -16,6 +16,7 @@ export interface FtSearchBarLabels extends ParametrizedLabels {
     clearInputButton?: string;
     clearFilterButton?: string;
     displayMoreFilterValuesButton?: string;
+    noFilterValuesAvailable?: string;
     searchButton?: string;
     noSuggestions?: string;
     contentLocaleSelector?: string;
@@ -28,7 +29,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 +53,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     dense: boolean;
     mode?: DisplayMode;
     forceMobileMenuOpen: boolean;
+    forceMenuOpen: boolean;
     baseUrl: string;
     apiIntegrationIdentifier: string;
     contentLocale?: string;
@@ -107,9 +109,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;