@fluid-topics/ft-search-selected-facets 2.2.33 → 2.2.35

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

@@ -1,4 +1,4 @@
-import { nothing, PropertyValues } from "lit";
+import { PropertyValues } from "lit";
 import { Debouncer, 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";
@@ -19,12 +19,18 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
     filters?: FtMetadataFilter[];
     scope?: FtSearchScopeKeys;
     selectedFacetsAriaNotification: I18nAttributeValue;
+    nothingToDisplayMessage: I18nAttributeValue;
+    readOnly: boolean;
+    dense: boolean;
+    displayAllFilers: boolean;
     neededSearchRequests: FtSearchStateResourceRequest[];
     protected ariaNotificationDebouncer: Debouncer;
     get hasSomethingToDisplay(): boolean | undefined;
     get numberOfChips(): number;
     constructor();
-    protected render(): typeof nothing | import("lit").TemplateResult<1>;
+    protected render(): string | import("lit").TemplateResult<1>;
+    private renderAllValueFilters;
+    private renderFacets;
     private isFacetNegative;
     private renderFacet;
     private getNextChipToFocusOn;

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

@@ -25,8 +25,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
         var _a, _b;
         return this.searchInDocumentTitlesOnly
             || this.keywordMatch
-            || ((_a = this.facets) === null || _a === void 0 ? void 0 : _a.some((facet) => this.getSelectedValues(facet).length > 0))
-            || ((_b = this.filters) === null || _b === void 0 ? void 0 : _b.some((f) => f.dateFilter || f.rangeFilter));
+            || ((_a = this.filters) === null || _a === void 0 ? void 0 : _a.some((f) => this.displayAllFilers || f.dateFilter || f.rangeFilter))
+            || ((_b = this.facets) === null || _b === void 0 ? void 0 : _b.some((facet) => this.getSelectedValues(facet).length > 0));
     }
     get numberOfChips() {
         return shadowQuerySelectorAll(this.shadowRoot, "ft-chip").length;
@@ -42,6 +42,12 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
             key: "searchSelectedFacetsAriaNotification",
             message: "",
         };
+        this.nothingToDisplayMessage = {
+            message: "",
+        };
+        this.readOnly = false;
+        this.dense = false;
+        this.displayAllFilers = false;
         this.neededSearchRequests = [FtSearchStateResourceRequest.CLUSTERED_SEARCH];
         this.ariaNotificationDebouncer = new Debouncer(100);
         this.addI18nContext(searchTypeContext, searchTypeDefaultMessages);
@@ -52,19 +58,27 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
         var _a;
         var _b;
         if (!this.hasSomethingToDisplay) {
-            return nothing;
+            return this.nothingToDisplayMessage.message;
         }
         return html `
             <div role="group" class="ft-search-selected-facets--container" aria-label="${searchSelectedFacets.messages.filterGroupLabel()}">
-                ${repeat(this.facets || [], (facet) => facet.key, (facet) => {
-            const values = this.getSelectedValues(facet);
-            return repeat(values, (value) => facet.key + "-" + value, (value) => this.renderFacet(facet.key, facet.label, values, value));
-        })}
+                ${this.displayAllFilers ? this.renderAllValueFilters() : this.renderFacets()}
                 ${this.renderSearchScope()}
                 ${repeat((_b = (_a = this.filters) === null || _a === void 0 ? void 0 : _a.filter((f) => f.dateFilter || f.rangeFilter)) !== null && _b !== void 0 ? _b : [], (f) => f.key, (f) => this.renderPeriodFilter(f))}
             </div>
         `;
     }
+    renderAllValueFilters() {
+        return repeat((this.filters || []).filter((f) => !!f.valueFilter), (filter) => filter.key, (filter) => {
+            return repeat(filter.valueFilter.values, (value) => filter.key + "-" + value, (value) => this.renderFacet(filter.key, filter.key, filter.valueFilter.values, value));
+        });
+    }
+    renderFacets() {
+        return repeat(this.facets || [], (facet) => facet.key, (facet) => {
+            const values = this.getSelectedValues(facet);
+            return repeat(values, (value) => facet.key + "-" + value, (value) => this.renderFacet(facet.key, facet.label, values, value));
+        });
+    }
     isFacetNegative(key, value) {
         var _a;
         var _b;
@@ -73,7 +87,7 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
             && ((_b = filter.valueFilter.values) === null || _b === void 0 ? void 0 : _b.includes(value)); })) !== null && _b !== void 0 ? _b : false;
     }
     renderFacet(facetKey, facetLabel, selectedValues, value) {
-        if (facetKey === "ft:publicationId") {
+        if (facetKey === "ft:publicationId" && !this.displayAllFilers) {
             return nothing;
         }
         const keyWithNoColumn = facetKey.replace(":", "-");
@@ -84,7 +98,9 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
         const chip = html `
             <ft-chip
                 part="ft-search-selected-facets ft-search-selected-facet-${keyWithNoColumn}"
-                removable hideIconTooltip accessibleLabelOnIcon
+                ?dense=${this.dense}
+                ?removable=${!this.readOnly}
+                hideIconTooltip accessibleLabelOnIcon
                 iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                 label="${label}"
                 @icon-click=${(e) => {
@@ -173,7 +189,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
             <ft-chip
                 part="ft-search-selected-facets ft-search-selected-facet-search-in-document-titles-only"
                 label="${label}"
-                removable
+                ?dense=${this.dense}
+                ?removable=${!this.readOnly}
                 hideIconTooltip accessibleLabelOnIcon
                 iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                 @icon-click=${(e) => {
@@ -201,7 +218,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
             <ft-chip
                 part="ft-search-selected-facets ft-search-selected-facet-match-all-keywords"
                 label="${label}"
-                removable
+                ?dense=${this.dense}
+                ?removable=${!this.readOnly}
                 hideIconTooltip accessibleLabelOnIcon
                 iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                 @icon-click=${(e) => {
@@ -236,7 +254,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                         part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable
+                    ?dense=${this.dense}
+                    ?removable=${!this.readOnly}
                     hideIconTooltip accessibleLabelOnIcon
                     label="${label}"
                     iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
@@ -259,7 +278,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
                     label="${label}"
-                    removable
+                    ?dense=${this.dense}
+                    ?removable=${!this.readOnly}
                     hideIconTooltip accessibleLabelOnIcon
                     iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                     @icon-click=${(e) => {
@@ -347,3 +367,15 @@ __decorate([
 __decorate([
     jsonProperty({ context: "officialContext", key: "searchSelectedFacetsAriaNotification" })
 ], FtSearchSelectedFacets.prototype, "selectedFacetsAriaNotification", void 0);
+__decorate([
+    jsonProperty({ message: "" })
+], FtSearchSelectedFacets.prototype, "nothingToDisplayMessage", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSelectedFacets.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSelectedFacets.prototype, "dense", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchSelectedFacets.prototype, "displayAllFilers", void 0);