@fluid-topics/ft-search-facet 0.3.62

package/README.md

@@ -0,0 +1,21 @@
+Search facet for integrated search component
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-facet
+yarn add @fluid-topics/ft-search-facet
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-facet"
+
+function render() {
+    return html`<ft-search-context>
+                    <ft-search-facet facetId="author"></ft-search-facet>
+                </ft-search-context>`
+}
+```

package/build/SearchFacetMessages.d.ts

@@ -0,0 +1,10 @@
+import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface SearchFacetMessages extends I18nMessages {
+    filterInputPlaceHolder(label: string): string;
+    clearFilterButton(): string;
+    displayMoreFilterValuesButton(): string;
+    noFilterValuesAvailable(): string;
+    noMetadataSelected(): string;
+}
+export declare const searchFacetContext: I18nMessageContext<SearchFacetMessages>;
+//# sourceMappingURL=SearchFacetMessages.d.ts.map

package/build/SearchFacetMessages.js

@@ -0,0 +1,3 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const searchFacetContext = I18nMessageContext.build("designedSearchFacet");
+//# sourceMappingURL=SearchFacetMessages.js.map

package/build/converter.d.ts

@@ -0,0 +1,4 @@
+import { FtSearchFacet } from "@fluid-topics/public-api/dist/mjs/types/ft-common/public";
+import { FtFilterOptionProperties } from "@fluid-topics/ft-filter";
+export declare function convertFacetToFilterOptions(facet: FtSearchFacet): Array<FtFilterOptionProperties>;
+//# sourceMappingURL=converter.d.ts.map

package/build/converter.js

@@ -0,0 +1,12 @@
+export function convertFacetToFilterOptions(facet) {
+    return facet.rootNodes.map(node => convertFacetNodeToFilterOptions(node));
+}
+function convertFacetNodeToFilterOptions(facetNode) {
+    return {
+        label: facetNode.label,
+        value: facetNode.value,
+        selected: facetNode.selected,
+        subOptions: facetNode.childNodes.map(node => convertFacetNodeToFilterOptions(node)),
+    };
+}
+//# sourceMappingURL=converter.js.map

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

@@ -0,0 +1,3 @@
+export declare const FtSearchFacetCssVariables: {};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-search-facet.css.d.ts.map

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

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const FtSearchFacetCssVariables = {};
+// language=CSS
+export const styles = css `
+`;
+//# sourceMappingURL=ft-search-facet.css.js.map

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

@@ -0,0 +1,20 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchFacetProperties } from "./ft-search-facet.properties";
+import { FtSearchComponent, FtSearchStateManager } from "@fluid-topics/ft-search-context/build/registration";
+declare const FtSearchFacet_base: typeof FtSearchComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtSearchFacet extends FtSearchFacet_base implements FtSearchFacetProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    facetId: string;
+    maxValues: number;
+    private request?;
+    private facets;
+    private editorMode?;
+    setSearchStateManager(stateManager: FtSearchStateManager): void;
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected updated(props: PropertyValues): void;
+    private onFacetValueSelected;
+}
+export {};
+//# sourceMappingURL=ft-search-facet.d.ts.map

package/build/ft-search-facet.js

@@ -0,0 +1,93 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from "lit";
+import { redux } from "@fluid-topics/ft-wc-utils";
+import { property } from "lit/decorators.js";
+import { styles } from "./ft-search-facet.css";
+import { FtFilter } from "@fluid-topics/ft-filter";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { convertFacetToFilterOptions } from "./converter";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { searchFacetContext } from "./SearchFacetMessages";
+import { ftAppInfoStore } from "@fluid-topics/ft-app-context";
+export class FtSearchFacet extends withI18n(FtSearchComponent) {
+    constructor() {
+        super(...arguments);
+        this.facetId = "";
+        this.maxValues = 7;
+        this.facets = [];
+    }
+    setSearchStateManager(stateManager) {
+        super.setSearchStateManager(stateManager);
+        if (this.facetId) {
+            stateManager.addFacet(this.facetId);
+        }
+        this.addI18nContext(searchFacetContext);
+        this.addStore(ftAppInfoStore);
+    }
+    render() {
+        let facet = this.facets.find(f => f.key == this.facetId);
+        if (facet) {
+            return html `
+                <div class="ft-search-facet--label">
+                    <ft-typography variant="button">${facet.label}</ft-typography>
+                </div>
+                <ft-filter
+                        part="filter"
+                        .exportpartsPrefixes=${["filter"]}
+                        id="${this.facetId}"
+                        ?multivalued=${facet.multiSelectionable}
+                        raiseSelectedOptions
+                        .options=${convertFacetToFilterOptions(facet)}
+                        .displayedValuesLimit=${this.maxValues}
+                        filterPlaceHolder="${searchFacetContext.messages.filterInputPlaceHolder(facet.label)}"
+                        clearButtonLabel="${searchFacetContext.messages.clearFilterButton()}"
+                        moreValuesButtonLabel="${searchFacetContext.messages.displayMoreFilterValuesButton()}"
+                        noValuesLabel="${searchFacetContext.messages.noFilterValuesAvailable()}"
+                        @change=${this.onFacetValueSelected}
+                ></ft-filter>
+            `;
+        }
+        if (!this.facetId && this.editorMode) {
+            return html `${searchFacetContext.messages.noMetadataSelected()}`;
+        }
+        return nothing;
+    }
+    updated(props) {
+        var _a;
+        super.updated(props);
+        if (props.has("facetId")) {
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.replaceFacet(props.get("facetId"), this.facetId);
+        }
+    }
+    onFacetValueSelected(event) {
+        var _a;
+        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setFilter(this.facetId, event.detail);
+    }
+}
+FtSearchFacet.elementDefinitions = {
+    "ft-filter": FtFilter,
+    "ft-typography": FtTypography,
+};
+FtSearchFacet.styles = styles;
+__decorate([
+    property()
+], FtSearchFacet.prototype, "facetId", void 0);
+__decorate([
+    property({ type: Number })
+], FtSearchFacet.prototype, "maxValues", void 0);
+__decorate([
+    redux({ store: "search" })
+], FtSearchFacet.prototype, "request", void 0);
+__decorate([
+    redux({ store: "search" })
+], FtSearchFacet.prototype, "facets", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtSearchFacet.prototype, "editorMode", void 0);
+//# sourceMappingURL=ft-search-facet.js.map