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

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

@@ -1,25 +1,22 @@
-import { FtCssVariable } from "@fluid-topics/ft-wc-utils";
 export declare const FtSearchBarCssVariables: {
-    height: FtCssVariable;
-    borderRadius: FtCssVariable;
-    mobileOpenPosition: FtCssVariable;
-    mobileOpenTop: FtCssVariable;
-    mobileOpenBottom: FtCssVariable;
-    mobileOpenLeft: FtCssVariable;
-    mobileOpenRight: FtCssVariable;
-    desktopFiltersHeight: FtCssVariable;
-    floatingZIndex: FtCssVariable;
-    colorSurface: FtCssVariable;
-    colorOnSurface: FtCssVariable;
-    colorOnSurfaceMedium: FtCssVariable;
-    colorOutline: FtCssVariable;
-    colorPrimary: FtCssVariable;
-    elevation02: FtCssVariable;
-    buttonColor: FtCssVariable;
-    buttonRippleColor: FtCssVariable;
+    height: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mobileOpenPosition: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mobileOpenTop: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mobileOpenBottom: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mobileOpenLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mobileOpenRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    desktopFiltersHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    floatingZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    buttonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    buttonRippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const searchBarCss: import("lit").CSSResult;
 export declare const facetsCss: import("lit").CSSResult;
-export declare const selectedFiltersCss: import("lit").CSSResult;
-export declare const suggestionsCss: import("lit").CSSResult;
 //# sourceMappingURL=ft-search-bar.css.d.ts.map

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

@@ -1,30 +1,28 @@
-import { designSystemVariables, FtCssVariable, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
 import { css } from "lit";
 import { FtButtonCssVariables } from "@fluid-topics/ft-button";
 import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
 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),
-    mobileOpenPosition: FtCssVariable.create("--ft-search-bar-mobile-open-position", "POSITION", "fixed"),
-    mobileOpenTop: FtCssVariable.create("--ft-search-bar-mobile-open-top", "SIZE", "0"),
-    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"),
-    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"),
-    colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
-    colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
-    elevation02: FtCssVariable.external(designSystemVariables.elevation02, "Design system"),
-    buttonColor: FtCssVariable.external(FtButtonCssVariables.color, "Button"),
-    buttonRippleColor: FtCssVariable.external(FtButtonCssVariables.rippleColor, "Button"),
+    height: FtCssVariableFactory.create("--ft-search-bar-height", "SIZE", "38px"),
+    borderRadius: FtCssVariableFactory.extend("--ft-search-bar-border-radius", designSystemVariables.borderRadiusS),
+    mobileOpenPosition: FtCssVariableFactory.create("--ft-search-bar-mobile-open-position", "POSITION", "fixed"),
+    mobileOpenTop: FtCssVariableFactory.create("--ft-search-bar-mobile-open-top", "SIZE", "0"),
+    mobileOpenBottom: FtCssVariableFactory.create("--ft-search-bar-mobile-open-bottom", "SIZE", "0"),
+    mobileOpenLeft: FtCssVariableFactory.create("--ft-search-bar-mobile-open-left", "SIZE", "0"),
+    mobileOpenRight: FtCssVariableFactory.create("--ft-search-bar-mobile-open-right", "SIZE", "0"),
+    desktopFiltersHeight: FtCssVariableFactory.create("--ft-search-bar-desktop-filters-height", "SIZE", "350px"),
+    floatingZIndex: FtCssVariableFactory.create("--ft-search-bar-floating-components-z-index", "NUMBER", "3"),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
+    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
+    buttonColor: FtCssVariableFactory.external(FtButtonCssVariables.color, "Button"),
+    buttonRippleColor: FtCssVariableFactory.external(FtButtonCssVariables.rippleColor, "Button"),
 };
 //language=css
 export const searchBarCss = css `
@@ -318,110 +316,4 @@ export const facetsCss = css `
         margin: 0;
     }
 `;
-//language=css
-export const selectedFiltersCss = 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;
-    }
-`;
-//language=css
-export const suggestionsCss = 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=ft-search-bar.css.js.map

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

@@ -1,6 +1,10 @@
-import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtLitElement, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
-import { FluidTopicsApi, FtSearchFacetConf, FtSearchPreset, FtSearchPrior, FtSearchRequest, FtSuggestRequest } from "@fluid-topics/public-api";
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement, ParametrizedLabelResolver, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
+import { FluidTopicsApi, FtSearchFacet, FtSearchFacetConf, FtSearchLocale, FtSearchPreset, FtSearchPrior, FtSearchRequest, FtSuggestRequest, FtSuggestResult } from "@fluid-topics/public-api";
+import { SuggestManager } from "./managers/SuggestManager";
+import { FacetsChipsManager } from "./managers/FacetsChipsManager";
+import { MobileSearchBarManager } from "./managers/MobileSearchBarManager";
+import { DesktopSearchBarManager } from "./managers/DesktopSearchBarManager";
 declare global {
     interface Window {
         fluidtopics?: {
@@ -39,7 +43,6 @@ export interface FtSearchBarProperties {
     selectedPreset?: string;
     dense: boolean;
 }
-export { FtSearchBarCssVariables } from "./ft-search-bar.css";
 export declare class LaunchSearchEvent extends CustomEvent<FtSearchRequest> {
     constructor(request: FtSearchRequest);
 }
@@ -56,11 +59,11 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     baseUrl: string;
     apiIntegrationIdentifier: string;
     contentLocale?: string;
-    private availableContentLocales;
+    availableContentLocales: Array<FtSearchLocale>;
     private availableContentLocalesInitialized;
     uiLocale?: string;
     labels: FtSearchBarLabels;
-    private labelResolver;
+    labelResolver: ParametrizedLabelResolver<FtSearchBarLabels>;
     displayedFilters: Array<string>;
     presets?: Array<FtSearchPreset>;
     selectedPreset?: string;
@@ -68,56 +71,46 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     searchRequestSerializer: (request: FtSearchRequest) => string;
     private searchFilters;
     private sizeCategory;
-    private displayFacets;
-    private mobileMenuOpen;
-    private get isMobileMenuOpen();
-    private facets;
+    displayFacets: boolean;
+    mobileMenuOpen: boolean;
+    isMobileMenuOpen(): boolean;
+    facets: Array<FtSearchFacet>;
     private facetsInitialized;
     private knownFacetLabels;
     private container?;
     private filtersOpener?;
     private floatingContainer?;
     private scrollingFiltersContainer?;
-    private input?;
-    private query;
-    private suggestions;
-    private suggestionsLoaded;
-    private recentSearches;
-    private scrollToFacet?;
-    private firstSuggestion?;
-    private focusedSuggestion?;
-    private lastSuggestion?;
+    input?: HTMLInputElement;
+    query: string;
+    suggestions: Array<FtSuggestResult>;
+    recentSearches: Array<string>;
+    scrollToFacet?: string;
     private updateFacetsDebouncer;
-    private suggestDebouncer;
-    private api?;
+    api?: FluidTopicsApi;
+    suggestManager: SuggestManager;
+    selectedFacetsManager: FacetsChipsManager;
+    desktopSearchBarManager: DesktopSearchBarManager;
+    mobileSearchBarManager: MobileSearchBarManager;
     get request(): FtSearchRequest;
     get facetsRequest(): Array<FtSearchFacetConf>;
     get suggestRequest(): FtSuggestRequest;
-    private get isMobile();
-    private get hasFacets();
+    isMobile(): boolean;
+    hasFacets(): boolean;
     private get hasPresets();
     private get hasPriors();
-    private get hasLocaleSelector();
+    hasLocaleSelector(): boolean;
     focus(): void;
     focusInput(): void;
     clear(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     protected renderSearchBar(): import("lit-html").TemplateResult<1>;
-    private renderMobileSearchBar;
-    private renderMobileSearchBarButtons;
-    private renderMobileFacets;
+    renderMobileFacets(): import("lit-html").TemplateResult<1>;
     private contentLocalesAsFilterOptions;
-    private renderDesktopSearchBar;
-    private renderDesktopMenu;
-    private renderSearchBarLeftAction;
-    private renderDesktopSearchBarButtons;
-    private renderFacetsActions;
+    renderDesktopMenu(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderFacetsActions(): import("lit-html").TemplateResult<1>;
     private renderDesktopClearFilters;
     private renderDesktopFacets;
-    private renderSelectedFacets;
-    private renderSuggestions;
-    private getIcon;
-    private openMobileFilters;
     protected firstUpdated(props: PropertyValues): Promise<void>;
     protected update(props: PropertyValues): void;
     private updateAvailableContentLocales;
@@ -125,29 +118,23 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private initApi;
     private facetsLoaded;
     private updateFacets;
-    private updateSuggestions;
-    private onSearchBarKeyUp;
-    private onSearchBarKeyDown;
     private onFloatingContainerKeyUp;
-    private setQuery;
-    private onSuggestClick;
-    private onSuggestKeyUp;
-    private onSuggestSelected;
-    private launchSearch;
+    setQuery(query: string): void;
+    launchSearch(): void;
     private get recentSearchesStorageKey();
     private initRecentSearches;
-    private saveRecentSearches;
+    saveRecentSearches(): void;
     private closeFloatingContainer;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private updateSize;
-    private getLocaleLabel;
-    private setFilter;
+    setFilter(key: string, selectedValues: Array<string>): void;
     private compareFilters;
     private compareRequests;
     private setFiltersFromPreset;
     private clearFilters;
-    private removeRecentSearch;
-    private onSuggestKeyDown;
+    querySelector(selectors: string): HTMLElement | null;
+    querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
+    renderDesktopFloatingMenu(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 //# sourceMappingURL=ft-search-bar.d.ts.map