@fluid-topics/ft-search-bar 0.1.6 → 0.1.9

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

@@ -0,0 +1,24 @@
+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;
+    floatingZIndex: FtCssVariable;
+    colorSurface: FtCssVariable;
+    colorOnSurface: FtCssVariable;
+    colorOnSurfaceMedium: FtCssVariable;
+    colorOutline: FtCssVariable;
+    colorPrimary: FtCssVariable;
+    elevation02: FtCssVariable;
+    buttonColor: FtCssVariable;
+    buttonRippleColor: 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

@@ -0,0 +1,392 @@
+import { designSystemVariables, FtCssVariable, 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";
+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"),
+    floatingZIndex: FtCssVariable.create("--ft-search-bar-floating-components-z-index", "NUMBER", "2"),
+    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"),
+};
+//language=css
+export const searchBarCss = css `
+    * {
+        box-sizing: border-box;
+    }
+
+    .ft-search-bar--container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        color: ${FtSearchBarCssVariables.colorOnSurface};
+        background: ${FtSearchBarCssVariables.colorSurface};
+        outline: none;
+    }
+
+    .ft-search-bar--container > * {
+        flex-shrink: 0;
+    }
+
+    .ft-search-bar--mobile-menu-open {
+        position: ${FtSearchBarCssVariables.mobileOpenPosition};
+        top: ${FtSearchBarCssVariables.mobileOpenTop};
+        bottom: ${FtSearchBarCssVariables.mobileOpenBottom};
+        left: ${FtSearchBarCssVariables.mobileOpenLeft};
+        right: ${FtSearchBarCssVariables.mobileOpenRight};
+        z-index: ${FtSearchBarCssVariables.floatingZIndex};
+        padding: 16px;
+    }
+
+    .ft-search-bar {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: ${FtSearchBarCssVariables.height};
+
+        background: ${FtSearchBarCssVariables.colorSurface};
+        border: 1px solid ${FtSearchBarCssVariables.colorOutline};
+        border-radius: ${FtSearchBarCssVariables.borderRadius};
+    }
+
+    .ft-search-bar--floating-panel-open .ft-search-bar {
+        border-radius: ${FtSearchBarCssVariables.borderRadius} ${FtSearchBarCssVariables.borderRadius} 0 0;
+    }
+
+    .ft-search-bar--input-container {
+        flex-grow: 1;
+        flex-shrink: 1;
+        position: relative;
+        height: calc(100% - 2px);
+    }
+
+    .ft-search-bar--input-outline {
+        flex-grow: 1;
+        flex-shrink: 1;
+        height: 100%;
+        width: 100%;
+        align-self: stretch;
+        display: grid;
+        padding: 0 8px;
+        border-radius: ${FtSearchBarCssVariables.borderRadius};
+    }
+
+    .ft-search-bar--dense .ft-search-bar--input-outline {
+        grid-template-columns: auto minmax(200px, 1fr);
+        gap: 8px;
+    }
+
+    .ft-search-bar--input-container:focus-within .ft-search-bar--input-outline {
+        outline: 2px solid ${FtSearchBarCssVariables.colorPrimary};
+    }
+
+    .ft-search-bar--input {
+        height: 100%;
+        flex-grow: 1;
+        border: none;
+        background-color: transparent;
+        outline: none;
+    }
+
+    .ft-search-bar--desktop .ft-search-bar--input {
+        flex-shrink: 0;
+        min-width: 250px;
+    }
+
+    .ft-search-bar > ft-button {
+        flex-shrink: 0;
+    }
+
+    .ft-search-bar--left-action {
+        ${setVariable(FtButtonCssVariables.borderRadius, css `calc(${FtSearchBarCssVariables.borderRadius} - 1px) 0 0 calc(${FtSearchBarCssVariables.borderRadius} - 1px)`)};
+        border-right: 1px solid ${FtSearchBarCssVariables.colorOutline};
+        height: 100%;
+    }
+
+    .ft-search-bar--left-action::part(button) {
+        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 .ft-search-bar--launch-search,
+    .ft-search-bar--clear-query {
+        margin: 0 4px;
+    }
+
+    .ft-search-bar--separator {
+        height: 20px;
+        border-right: 1px solid ${FtSearchBarCssVariables.colorOutline};
+    }
+
+    .ft-search-bar--left-action.ft-search-bar--content-locale {
+        ${setVariable(FtInputLabelCssVariables.borderColor, "transparent")};
+        ${setVariable(FtInputLabelCssVariables.borderRadiusS, css `calc(${FtSearchBarCssVariables.borderRadius} - 1px)`)};
+        ${setVariable(FtSelectCssVariables.selectedOptionColor, FtSearchBarCssVariables.buttonColor)};
+    }
+
+    .ft-search-bar--left-action.ft-search-bar--content-locale,
+    .ft-search-bar--left-action.ft-search-bar--content-locale::part(container),
+    .ft-search-bar--left-action.ft-search-bar--content-locale::part(main-panel) {
+        height: 100%;
+    }
+
+    .ft-search-bar--left-action.ft-search-bar--content-locale::part(options) {
+        top: calc(100% + 1px);
+        right: unset;
+        width: max-content;
+        min-width: 100%;
+    }
+
+    .ft-search-bar--left-action.ft-search-bar--content-locale::part(selected-value) {
+        border-radius: calc(${FtSearchBarCssVariables.borderRadius} - 1px) 0 0 calc(${FtSearchBarCssVariables.borderRadius} - 1px);
+    }
+
+`;
+//language=css
+export const facetsCss = css `
+    .ft-search-bar--floating-panel .ft-search-bar--presets {
+        margin-right: auto;
+    }
+
+    .ft-search-bar--floating-panel .ft-search-bar--presets {
+        min-width: 250px;
+        ${setVariable(FtSelectCssVariables.optionsZIndex, "2")};
+    }
+
+    .ft-search-bar--floating-panel {
+        flex-direction: column;
+        gap: 16px;
+        padding: 16px;
+    }
+
+    .ft-search-bar--floating-panel-open .ft-search-bar--floating-panel {
+        display: flex;
+    }
+
+    .ft-search-bar--desktop .ft-search-bar--facets-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 0 10px;
+    }
+
+    .ft-search-bar--mobile .ft-search-bar--facets-actions {
+        flex-shrink: 0;
+        flex-grow: 0;
+        display: flex;
+        gap: 16px;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+
+    .ft-search-bar--mobile .ft-search-bar--facets-actions > * {
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    .ft-search-bar--content-locale::part(clear-button) {
+        display: none;
+    }
+
+    .ft-search-bar--floating-panel .ft-search-bar--filters-container {
+        display: block;
+        height: 350px;
+        --ft-snap-scroll-gap: 16px;
+    }
+
+    .ft-search-bar--floating-panel ft-filter {
+        display: flex;
+        flex-grow: 0;
+        max-height: 100%;
+        max-width: 250px;
+    }
+
+    .ft-search-bar--hierarchical-filter {
+        width: 250px;
+    }
+
+    .ft-search-bar--mobile .ft-search-bar--filters-container {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow-y: auto;
+        margin: 0 -16px;
+        padding: 0 16px;
+    }
+
+    .ft-search-bar--mobile .ft-search-bar--filters-container ft-filter {
+        display: flex;
+        max-height: 60vh;
+    }
+
+    .ft-search-bar--mobile ft-filter::part(container) {
+        flex-grow: 1;
+    }
+
+    .ft-search-bar--filter-label {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 8px;
+    }
+
+    .ft-search-bar--filter-label > * {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .ft-search-bar--filter-label > :first-child {
+        flex-shrink: 0;
+    }
+
+    .ft-search-bar--filter-label > :last-child {
+        flex-shrink: 1;
+        color: ${FtSearchBarCssVariables.colorOnSurfaceMedium};
+    }
+
+    ft-accordion-item::part(toggle) {
+        margin-left: -16px;
+        margin-right: -16px;
+    }
+
+    ft-accordion-item::part(label) {
+        overflow: hidden;
+    }
+
+    ft-accordion-item::part(content) {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    
+    .ft-search-bar--floating-panel .ft-search-bar--launch-search {
+        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: var(--ft-search-bar-floating-components-z-index, 1);
+        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--no-suggestions {
+        text-align: center;
+        padding: 8px;
+        color: ${FtSearchBarCssVariables.colorOnSurface};
+    }
+
+    .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--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,6 @@
 import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtCssVariable, FtLitElement, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
-import { FluidTopicsApi, FtSearchRequest, FtSuggestRequest } from "@fluid-topics/public-api";
+import { ElementDefinitionsMap, FtLitElement, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
+import { FluidTopicsApi, FtSearchFacetConf, FtSearchRequest, FtSuggestRequest } from "@fluid-topics/public-api";
 declare global {
     interface Window {
         fluidtopics?: {
@@ -11,8 +11,6 @@ declare global {
 export interface FtSearchBarLabels extends ParametrizedLabels {
     clearFilters?: string;
     filtersButton?: string;
-    oneFilterEnabled?: string;
-    nFiltersEnabled?: string;
     inputPlaceHolder?: string;
     filterInputPlaceHolder?: string;
     clearInputButton?: string;
@@ -21,10 +19,15 @@ export interface FtSearchBarLabels extends ParametrizedLabels {
     searchButton?: string;
     noSuggestions?: string;
     contentLocaleSelector?: string;
+    presetsSelector?: string;
     removeRecentSearch?: string;
     back?: string;
 }
 export declare const DEFAULT_LABELS: FtSearchBarLabels;
+declare type RelevantFtSearchRequest = Pick<FtSearchRequest, "contentLocale" | "filters"> & Partial<FtSearchRequest>;
+export interface FtSearchPreset extends RelevantFtSearchRequest {
+    name: string;
+}
 export interface FtSearchBarProperties {
     labels?: FtSearchBarLabels;
     baseUrl: string;
@@ -32,25 +35,11 @@ export interface FtSearchBarProperties {
     contentLocale?: string;
     uiLocale?: string;
     displayedFilters?: Array<string>;
+    presets?: Array<FtSearchPreset>;
+    selectedPreset?: string;
+    dense: boolean;
 }
-export declare const FtSearchBarCssVariables: {
-    height: FtCssVariable;
-    borderRadius: FtCssVariable;
-    mobileOpenPosition: FtCssVariable;
-    mobileOpenTop: FtCssVariable;
-    mobileOpenBottom: FtCssVariable;
-    mobileOpenLeft: FtCssVariable;
-    mobileOpenRight: FtCssVariable;
-    floatingZIndex: FtCssVariable;
-    colorSurface: FtCssVariable;
-    colorOnSurface: FtCssVariable;
-    colorOnSurfaceMedium: FtCssVariable;
-    colorOutline: FtCssVariable;
-    colorPrimary: FtCssVariable;
-    elevation02: FtCssVariable;
-    buttonColor: FtCssVariable;
-    buttonRippleColor: FtCssVariable;
-};
+export { FtSearchBarCssVariables } from "./ft-search-bar.css";
 export declare class LaunchSearchEvent extends CustomEvent<FtSearchRequest> {
     constructor(request: FtSearchRequest);
 }
@@ -60,6 +49,7 @@ export declare class SearchStateChangeEvent extends CustomEvent<FtSearchRequest>
 export declare class FtSearchBar extends FtLitElement implements FtSearchBarProperties {
     static elementDefinitions: ElementDefinitionsMap;
     protected getStyles(): import("lit").CSSResult[];
+    dense: boolean;
     baseUrl: string;
     apiIntegrationIdentifier: string;
     contentLocale?: string;
@@ -68,12 +58,15 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     labels: FtSearchBarLabels;
     private labelResolver;
     displayedFilters: Array<string>;
+    presets: Array<FtSearchPreset>;
+    selectedPreset?: string;
     searchRequestSerializer: (request: FtSearchRequest) => string;
     private searchFilters;
     private sizeCategory;
     private displayFacets;
     private mobileMenuOpen;
     private facets;
+    private knownFacetLabels;
     private container?;
     private filtersOpener?;
     private floatingContainer?;
@@ -92,24 +85,28 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private get recentSearchesStorageKey();
     private api?;
     get request(): FtSearchRequest;
+    get facetsRequest(): Array<FtSearchFacetConf>;
     get suggestRequest(): FtSuggestRequest;
+    private get isMobile();
     private get hasFacets();
+    private get hasPresets();
     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 contentLocalesAsFilterOptions;
+    private renderDesktopSearchBar;
+    private renderSearchBarLeftAction;
+    private renderDesktopSearchBarButtons;
+    private renderFacetsActions;
     private renderDesktopFacets;
     private renderSelectedFacets;
+    private renderSuggestions;
+    private getIcon;
+    private openMobileFilters;
     protected firstUpdated(props: PropertyValues): Promise<void>;
     protected update(props: PropertyValues): void;
     protected contentAvailableCallback(props: PropertyValues): void;
@@ -133,6 +130,9 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private updateSize;
     private getLocaleLabel;
     private setFilter;
+    private compareFilters;
+    private compareRequests;
+    private setFiltersFromPreset;
     private clearFilters;
     private removeRecentSearch;
     private onSuggestKeyDown;