@fluid-topics/ft-search-selected-facets 1.0.12

package/README.md

@@ -0,0 +1,19 @@
+List of selected facets in a designed search page context
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-selected-facets
+yarn add @fluid-topics/ft-search-selected-facets
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-selected-facets"
+
+function render() {
+    return html` <ft-search-selected-facets></ft-search-selected-facets> `
+}
+```

package/build/ft-search-selected-facets.css.d.ts

@@ -0,0 +1,4 @@
+export declare const FtSearchSelectedFacetsCssVariables: {
+    spacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-search-selected-facets.css.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtSearchSelectedFacetsCssVariables = {
+    spacing: FtCssVariableFactory.create("--ft-search-selected-facets-spacing", "SIZE", "8px")
+};
+// language=CSS
+export const styles = css `
+    .ft-search-selected-facets--container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${FtSearchSelectedFacetsCssVariables.spacing};
+    }
+`;

package/build/ft-search-selected-facets.d.ts

@@ -0,0 +1,16 @@
+import { nothing } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchSelectedFacetsProperties } from "./ft-search-selected-facets.properties";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { FtSearchFacet } from "@fluid-topics/public-api";
+export declare class FtSearchSelectedFacets extends FtSearchComponent implements FtSearchSelectedFacetsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    facets?: Array<FtSearchFacet>;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private getSelectedValues;
+    private getLabelFromValue;
+    private getBreadcrumbFromValue;
+    private quote;
+    private unquote;
+}

package/build/ft-search-selected-facets.js

@@ -0,0 +1,75 @@
+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 { repeat } from "lit/directives/repeat.js";
+import { flatDeep, redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-search-selected-facets.css";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { FtChip } from "@fluid-topics/ft-chip";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+class FtSearchSelectedFacets extends FtSearchComponent {
+    render() {
+        if (this.facets == null || this.facets.length === 0) {
+            return nothing;
+        }
+        return html `
+
+            <div class="ft-search-selected-facets--container">
+                ${repeat(this.facets, facet => facet.key, facet => {
+            const values = this.getSelectedValues(facet);
+            return repeat(values, value => facet.key + "-" + value, value => {
+                let label = facet.label + ": " + this.getBreadcrumbFromValue(value);
+                const keyWithNoColumn = facet.key.replace(":", "-");
+                return html `
+                                            <ft-tooltip inline text="${label}"
+                                                        part="tooltips tooltip-${keyWithNoColumn}">
+                                                <ft-chip
+                                                        part="ft-search-selected-facets ft-search-selected-facet-${keyWithNoColumn}"
+                                                        removable
+                                                        label="${label}"
+                                                        @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setFilter(facet.key, values.filter(v => v !== value)); }}
+                                                        data-key="${facet.key}"
+                                                        data-value="${value}">
+                                                    ${this.getLabelFromValue(value)}
+                                                </ft-chip>
+                                            </ft-tooltip>
+                                        `;
+            });
+        })}
+            </div>
+        `;
+    }
+    getSelectedValues(facet) {
+        return flatDeep(facet.rootNodes, n => n.selected ? [] : n.childNodes)
+            .filter(n => n.selected)
+            .map(n => n.value);
+    }
+    getLabelFromValue(value) {
+        return this.unquote(value).split("|").pop();
+    }
+    getBreadcrumbFromValue(value) {
+        return this.unquote(value).split("|").join(" > ");
+    }
+    quote(value) {
+        return `"${value}"`;
+    }
+    unquote(value) {
+        if (value.startsWith("\"") && value.endsWith("\"")) {
+            return value.replace(/(^"+)|("+$)/g, "");
+        }
+        return value;
+    }
+}
+FtSearchSelectedFacets.elementDefinitions = {
+    "ft-chip": FtChip,
+    "ft-tooltip": FtTooltip,
+};
+FtSearchSelectedFacets.styles = styles;
+__decorate([
+    redux()
+], FtSearchSelectedFacets.prototype, "facets", void 0);
+export { FtSearchSelectedFacets };