@fluid-topics/ft-search-selected-facets 1.2.58 → 1.2.60

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

@@ -3,10 +3,14 @@ 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 { FtMetadataFilter, FtSearchFacet, FtSearchScopeKeys } from "@fluid-topics/public-api";
-declare const FtSearchSelectedFacets_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+declare const FtSearchSelectedFacets_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-app-context").FtLitElementWithDateFormatInterface>;
 export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base implements FtSearchSelectedFacetsProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    displayLabel: boolean;
+    forceTooltip: boolean;
+    multiLine: boolean;
+    hierarchicalValueTruncatingLevel?: number;
     facets?: Array<FtSearchFacet>;
     searchInDocumentTitlesOnly?: boolean;
     filters?: FtMetadataFilter[];
@@ -20,6 +24,7 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
     private getSelectedValues;
     private getLabelFromValue;
     private getBreadcrumbFromValue;
+    private readAndFormatValueFromFacet;
     private unquote;
     private renderSearchInDocumentTitlesOnly;
     private renderPeriodFilter;

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { flatDeep, FocusMainContentEvent, redux, shadowQuerySelectorAll } from "@fluid-topics/ft-wc-utils";
+import { flatDeep, FocusMainContentEvent, formatHierarchicalValues, redux, shadowQuerySelectorAll } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-search-selected-facets.styles";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
 import { FtChip } from "@fluid-topics/ft-chip";
@@ -16,7 +17,8 @@ import { searchInDocumentTitlesOnlySelector } from "@fluid-topics/ft-search-cont
 import { searchTypeContext, searchTypeDefaultMessages } from "@fluid-topics/ft-search-type";
 import { periodFilterContext, periodFilterDefaultMessages } from "@fluid-topics/ft-search-period-filter";
 import { searchSelectedFacets, searchSelectedFacetsDefaultMessages } from "./FtSearchSelectedFacetsMessages";
-class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
+import { withDateFormat } from "@fluid-topics/ft-app-context";
+class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent)) {
     get hasSomethingToDisplay() {
         var _a, _b;
         return this.searchInDocumentTitlesOnly
@@ -25,6 +27,10 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
     }
     constructor() {
         super();
+        this.displayLabel = false;
+        this.forceTooltip = false;
+        this.multiLine = false;
+        this.hierarchicalValueTruncatingLevel = 3;
         this.addI18nContext(searchTypeContext, searchTypeDefaultMessages);
         this.addI18nContext(searchSelectedFacets, searchSelectedFacetsDefaultMessages);
         this.addI18nContext(periodFilterContext, periodFilterDefaultMessages);
@@ -49,25 +55,35 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
         if (facetKey === "ft:publicationId") {
             return nothing;
         }
-        let label = facetLabel + ": " + this.getBreadcrumbFromValue(value);
         const keyWithNoColumn = facetKey.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 hideIconTooltip
-                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
-                    label="${label}"
-                    @icon-click=${(e) => {
+        const displayValue = this.getLabelFromValue(facetKey, value);
+        const displayTooltipValue = this.getBreadcrumbFromValue(facetKey, value);
+        const label = facetLabel + ": " + displayTooltipValue;
+        const noTooltip = !this.forceTooltip && this.displayLabel && displayTooltipValue == displayValue;
+        const chip = html `
+            <ft-chip
+                part="ft-search-selected-facets ft-search-selected-facet-${keyWithNoColumn}"
+                removable hideIconTooltip
+                iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                label="${label}"
+                @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(facetKey, selectedValues.filter(v => v !== value));
             this.determineAndApplyFocus(e);
         }}
-                    data-key="${facetKey}"
-                    data-value="${value}">
-                    ${this.getLabelFromValue(value)}
-                </ft-chip>
+                ?multiLine="${this.multiLine}"
+                data-key="${facetKey}"
+                data-value="${value}">
+                ${this.displayLabel ? html `
+                    <span part="label">${facetLabel}: </span>` : nothing}
+                <span part="values">
+                    ${displayValue}
+                </span>
+            </ft-chip>`;
+        return noTooltip ? chip : html `
+            <ft-tooltip inline text="${label}"
+                        part="tooltips tooltip-${keyWithNoColumn}">
+                ${chip}
             </ft-tooltip>
         `;
     }
@@ -102,11 +118,18 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
             .filter(n => n.selected)
             .map(n => n.value);
     }
-    getLabelFromValue(value) {
-        return this.unquote(value).split("|").pop();
+    getLabelFromValue(key, value) {
+        return this.readAndFormatValueFromFacet(key, value, this.hierarchicalValueTruncatingLevel);
+    }
+    getBreadcrumbFromValue(key, value) {
+        return this.readAndFormatValueFromFacet(key, value);
     }
-    getBreadcrumbFromValue(value) {
-        return this.unquote(value).split("|").join(" > ");
+    readAndFormatValueFromFacet(key, value, hierarchicalTruncate) {
+        const dateFormatter = this.getDateFormatter(key);
+        if (dateFormatter) {
+            return dateFormatter(value);
+        }
+        return formatHierarchicalValues(this.unquote(value).split("|"), hierarchicalTruncate);
     }
     unquote(value) {
         if (value.startsWith("\"") && value.endsWith("\"")) {
@@ -115,22 +138,32 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
         return value;
     }
     renderSearchInDocumentTitlesOnly() {
-        return this.searchInDocumentTitlesOnly ? html `
-            <ft-tooltip inline text="${searchTypeContext.messages.documentTitlesOnly()}"
-                        part="tooltips tooltip-search-in-document-titles-only">
-                <ft-chip
-                    part="ft-search-selected-facets ft-search-selected-facet-search-in-document-titles-only"
-                    removable hideIconTooltip
-                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
-                    @icon-click=${(e) => {
+        if (!this.searchInDocumentTitlesOnly) {
+            return nothing;
+        }
+        const label = searchTypeContext.messages.documentTitlesOnly();
+        const chip = html `
+            <ft-chip
+                part="ft-search-selected-facets ft-search-selected-facet-search-in-document-titles-only"
+                label="${label}"
+                removable
+                hideIconTooltip
+                iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSearchInDocumentTitlesOnly(false);
             this.determineAndApplyFocus(e);
-        }}>
-                    ${searchTypeContext.messages.documentTitlesOnly()}
-                </ft-chip>
-            </ft-tooltip>
-        ` : nothing;
+        }}
+                ?multiLine="${this.multiLine}">
+                    <span part="values">
+                        ${label}
+                    </span>
+            </ft-chip>`;
+        return !this.forceTooltip ? chip : html `
+            <ft-tooltip inline text="${label}"
+                        part="tooltips tooltip-search-in-document-titles-only">
+                ${chip}
+            </ft-tooltip>`;
     }
     renderPeriodFilter(filter) {
         if (filter.dateFilter) {
@@ -142,35 +175,47 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
         return nothing;
     }
     renderDateFilter(key, dateFilter) {
+        const label = periodFilterContext.messages.period(periodFilterContext.messages[dateFilter.type]());
         return html `
-            <ft-tooltip inline text="${periodFilterContext.messages.period(periodFilterContext.messages[dateFilter.type]())}"
+            <ft-tooltip inline text="${label}"
                         part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable hideIconTooltip
+                    removable
+                    hideIconTooltip
+                    label="${label}"
                     iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key);
             this.determineAndApplyFocus(e);
-        }}>
-                    ${periodFilterContext.messages[dateFilter.type]()}
+        }}
+                    ?multiLine="${this.multiLine}">
+                    <span part="values">
+                        ${periodFilterContext.messages[dateFilter.type]()}
+                    </span>
                 </ft-chip>
             </ft-tooltip>`;
     }
     renderRangeFilter(key, rangeFilter) {
+        const label = periodFilterContext.messages.period(periodFilterContext.messages.customPeriod(rangeFilter.from, rangeFilter.to));
         return html `
-            <ft-tooltip inline text="${periodFilterContext.messages.period(periodFilterContext.messages.customPeriod(rangeFilter.from, rangeFilter.to))}" part=" tooltips tooltip-search-period-filter">
+            <ft-tooltip inline text="${label}" part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable hideIconTooltip
+                    label="${label}"
+                    removable
+                    hideIconTooltip
                     iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key);
             this.determineAndApplyFocus(e);
-        }}>
-                    ${periodFilterContext.messages["CUSTOM"]()}
+        }}
+                    ?multiLine="${this.multiLine}">
+                    <span part="values">
+                        ${periodFilterContext.messages["CUSTOM"]()}
+                    </span>
                 </ft-chip>
             </ft-tooltip>`;
     }
@@ -180,6 +225,18 @@ FtSearchSelectedFacets.elementDefinitions = {
     "ft-tooltip": FtTooltip,
 };
 FtSearchSelectedFacets.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], FtSearchSelectedFacets.prototype, "displayLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSelectedFacets.prototype, "forceTooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSelectedFacets.prototype, "multiLine", void 0);
+__decorate([
+    property({ type: Number })
+], FtSearchSelectedFacets.prototype, "hierarchicalValueTruncatingLevel", void 0);
 __decorate([
     redux({ store: "search" })
 ], FtSearchSelectedFacets.prototype, "facets", void 0);