@fluid-topics/ft-search-bar 0.0.88

package/README.md

@@ -0,0 +1,29 @@
+Search bar component using Fluid Topics public API
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-bar
+yarn add @fluid-topics/ft-search-bar
+```
+
+## Usage
+
+The search bar requires the [Fluid Topics public API](https://www.npmjs.com/package/@fluid-topics/public-api) to be imported independently. 
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-bar"
+import "@fluid-topics/public-api/dist/fluidtopics.min.js"
+
+function render() {
+    return html` 
+        <ft-search-bar 
+            baseUrl="http://doc.fluidtopics.com"
+            .displayedFilters=${["Version_FT", "Category", "Platform", "audience"]}
+            @change=${ (e: SearchStateChangeEvent) => console.log("Search state change:", e.detail) }
+            @launch-search=${ (e: LaunchSearchEvent) => console.log("Launch search:", e.detail) }
+        ></ft-search-bar> 
+    `
+}
+```

package/build/converters.d.ts

@@ -0,0 +1,10 @@
+import { FtSearchFacet, FtSearchRequest } from "@fluid-topics/public-api";
+import { FtFilterProperties } from "@fluid-topics/ft-filter";
+export declare function serializeRequest(baseUrl: string, request: FtSearchRequest): string;
+export declare function quote(value: string): string;
+export declare function unquote(value: string): string;
+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;
+//# sourceMappingURL=converters.d.ts.map

package/build/converters.js

@@ -0,0 +1,57 @@
+import { flatDeep } from "@fluid-topics/ft-filter/build/utils";
+export function serializeRequest(baseUrl, request) {
+    var _a;
+    const params = new URLSearchParams({
+        "content-lang": (_a = request.contentLocale) !== null && _a !== void 0 ? _a : "all",
+        "query": request.query
+    });
+    if (request.filters.length > 0) {
+        const filters = request.filters.map(filter => {
+            const values = filter.values
+                .map(value => value.replace(/_/g, "\\\\\\\\_")
+                .replace(/~/g, "\\\\~")
+                .replace(/\*/g, "\\*"))
+                .map(value => encodeURIComponent(quote(value)))
+                .join("_");
+            return `${filter.key}~${values}`;
+        }).join("*");
+        params.append("filters", filters);
+    }
+    const url = new URL(`${baseUrl}/search/all?${params.toString()}`);
+    return url.href;
+}
+export function quote(value) {
+    return `"${value}"`;
+}
+export function unquote(value) {
+    if (value.startsWith("\"") && value.endsWith("\"")) {
+        return value.replace(/(^"+)|("+$)/g, "");
+    }
+    return value;
+}
+export function getLabelFromValue(value) {
+    return unquote(value).split("|").pop();
+}
+export function getBreadcrumbFromValue(value) {
+    return unquote(value).split("|").join(" > ");
+}
+function facetEntryToOption(entry, forceUnselected) {
+    return {
+        label: entry.label,
+        selected: !forceUnselected && entry.selected,
+        subOptions: entry.childNodes.map(n => facetEntryToOption(n, entry.selected)),
+        value: entry.value
+    };
+}
+export function selectedValues(facet) {
+    return flatDeep(facet.options, n => { var _a; return (_a = n.subOptions) !== null && _a !== void 0 ? _a : []; }).filter(n => n.selected).map(n => n.label);
+}
+export function facetToFilter(facet) {
+    return {
+        id: facet.key,
+        label: facet.label,
+        multivalued: facet.multiSelectionable,
+        options: facet.rootNodes.map(n => facetEntryToOption(n, false))
+    };
+}
+//# sourceMappingURL=converters.js.map

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

@@ -0,0 +1,132 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
+import { FluidTopicsApi, FtSearchRequest, FtSuggestRequest } from "@fluid-topics/public-api";
+declare global {
+    interface Window {
+        fluidtopics?: {
+            FluidTopicsApi: new (tenantBaseUrl: string, integrationIdentifier: string) => FluidTopicsApi;
+        };
+    }
+}
+export interface FtSearchBarLabels extends ParametrizedLabels {
+    clearFilters?: string;
+    filtersButton?: string;
+    oneFilterEnabled?: string;
+    nFiltersEnabled?: string;
+    inputPlaceHolder?: string;
+    filterInputPlaceHolder?: string;
+    clearInputButton?: string;
+    clearFilterButton?: string;
+    displayMoreFilterValuesButton?: string;
+    searchButton?: string;
+    noSuggestions?: string;
+    contentLocaleSelector?: string;
+    removeRecentSearch?: string;
+    back?: string;
+}
+export declare const DEFAULT_LABELS: FtSearchBarLabels;
+export interface FtSearchBarProperties {
+    labels?: FtSearchBarLabels;
+    baseUrl: string;
+    apiIntegrationIdentifier?: string;
+    contentLocale?: string;
+    uiLocale?: string;
+    displayedFilters?: Array<string>;
+}
+export interface FtSearchBarCssVariables {
+    "--ft-search-bar-height"?: string;
+    "--ft-search-bar-border-radius"?: string;
+    "--ft-search-bar-mobile-open-position"?: string;
+    "--ft-search-bar-mobile-open-top"?: string;
+    "--ft-search-bar-mobile-open-bottom"?: string;
+    "--ft-search-bar-mobile-open-left"?: string;
+    "--ft-search-bar-mobile-open-right"?: string;
+    "--ft-search-bar-floating-components-z-index"?: string;
+}
+export declare class LaunchSearchEvent extends CustomEvent<FtSearchRequest> {
+    constructor(request: FtSearchRequest);
+}
+export declare class SearchStateChangeEvent extends CustomEvent<FtSearchRequest> {
+    constructor(request: FtSearchRequest);
+}
+export declare class FtSearchBar extends FtLitElement implements FtSearchBarProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    protected getStyles(): import("lit").CSSResult[];
+    baseUrl: string;
+    apiIntegrationIdentifier: string;
+    contentLocale?: string;
+    private availableContentLocales;
+    uiLocale?: string;
+    labels: FtSearchBarLabels;
+    private labelResolver;
+    displayedFilters: Array<string>;
+    searchRequestSerializer: (request: FtSearchRequest) => string;
+    private searchFilters;
+    private sizeCategory;
+    private displayFacets;
+    private mobileMenuOpen;
+    private facets;
+    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?;
+    private updateFacetsDebouncer;
+    private suggestDebouncer;
+    private get recentSearchesStorageKey();
+    private api?;
+    get request(): FtSearchRequest;
+    get suggestRequest(): FtSuggestRequest;
+    private get hasFacets();
+    private get hasLocaleSelector();
+    focus(): void;
+    clear(): void;
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    private renderDesktopSearchBar;
+    private renderSearchBarLeftAction;
+    private renderDesktopSearchBarButtons;
+    private renderMobileSearchBar;
+    private renderMobileSearchBarButtons;
+    private renderMobileFacetsActions;
+    private renderMobileFacets;
+    private renderSuggestions;
+    private getIcon;
+    private renderDesktopFacetsActions;
+    private renderDesktopFacets;
+    private renderSelectedFacets;
+    protected firstUpdated(props: PropertyValues): Promise<void>;
+    protected update(props: PropertyValues): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private initApi;
+    private setApi;
+    private facetsLoaded;
+    private updateFacets;
+    private updateSuggestions;
+    private onSearchBarKeyUp;
+    private onSearchBarKeyDown;
+    private onFloatingContainerKeyUp;
+    private setQuery;
+    private onSuggestClick;
+    private onSuggestKeyUp;
+    private onSuggestSelected;
+    private launchSearch;
+    private saveRecentSearches;
+    private closeFloatingContainer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateSize;
+    private getLocaleLabel;
+    private setFilter;
+    private clearFilters;
+    private removeRecentSearch;
+    private onSuggestKeyDown;
+}
+//# sourceMappingURL=ft-search-bar.d.ts.map