@fluid-topics/ft-search-facet 1.3.28 → 1.3.30

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

@@ -2,6 +2,7 @@ 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";
+import { I18nAttributeValue } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
 declare const FtSearchFacet_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtSearchFacet extends FtSearchFacet_base implements FtSearchFacetProperties {
     static elementDefinitions: ElementDefinitionsMap;
@@ -11,6 +12,7 @@ export declare class FtSearchFacet extends FtSearchFacet_base implements FtSearc
     raiseSelectedOptions: boolean;
     displayTotalResultsCount: boolean;
     displayMode: "cascade" | "hierarchical";
+    filteredOptionsNumberAriaNotification: I18nAttributeValue;
     private facets?;
     private editorMode?;
     private filter?;

package/build/ft-search-facet.js

@@ -5,7 +5,7 @@ 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 { redux, reduxEventListener } from "@fluid-topics/ft-wc-utils";
+import { jsonProperty, numberProperty, redux, reduxEventListener } from "@fluid-topics/ft-wc-utils";
 import { property, query, state } from "lit/decorators.js";
 import { styles } from "./ft-search-facet.styles";
 import { FtFilter } from "@fluid-topics/ft-filter";
@@ -27,6 +27,11 @@ class FtSearchFacet extends withI18n(FtSearchComponent) {
         this.raiseSelectedOptions = false;
         this.displayTotalResultsCount = false;
         this.displayMode = "cascade";
+        this.filteredOptionsNumberAriaNotification = {
+            context: "officialContext",
+            key: "searchFacetsFilteredOptionsNumberAriaNotification",
+            message: "",
+        };
         this.facetHelper = new FacetHelper();
     }
     setSearchStateManager(stateManager) {
@@ -40,7 +45,7 @@ class FtSearchFacet extends withI18n(FtSearchComponent) {
     render() {
         if (this.facet) {
             // We want to keep cascade for no hierarchical meta
-            let effectivelyDisplayMode = this.facet.hierarchical ? this.displayMode : "cascade";
+            const effectivelyDisplayMode = this.facet.hierarchical ? this.displayMode : "cascade";
             return effectivelyDisplayMode == "cascade" ? this.renderCascadeFilter(this.facet) : this.renderHierarchicalFilter(this.facet);
         }
         if (this.editorMode) {
@@ -60,7 +65,7 @@ class FtSearchFacet extends withI18n(FtSearchComponent) {
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.replaceFacet(props.get("facetId"), this.facetId);
         }
         if (props.has("facetId") || props.has("facets")) {
-            this.facet = (_b = this.facets) === null || _b === void 0 ? void 0 : _b.find(f => f.key == this.facetId);
+            this.facet = (_b = this.facets) === null || _b === void 0 ? void 0 : _b.find((f) => f.key == this.facetId);
         }
     }
     onFacetValueSelected(event) {
@@ -83,32 +88,33 @@ class FtSearchFacet extends withI18n(FtSearchComponent) {
                 clearButtonLabel="${searchFacetContext.messages.clearFilterButton()}"
                 moreValuesButtonLabel="${searchFacetContext.messages.displayMoreFilterValuesButton()}"
                 noValuesLabel="${searchFacetContext.messages.noFilterValuesAvailable()}"
+                .filteredOptionsNumberAriaNotification=${this.filteredOptionsNumberAriaNotification}
                 @change=${this.onFacetValueSelected}
             ></ft-filter>
         `;
     }
     renderHierarchicalFilter(facet) {
-        let tree = this.convertFacetToTree(facet);
+        const tree = this.convertFacetToTree(facet);
         return html `
             <ft-tree-selector
                 part="tree-selector"
                 .exportpartsPrefixes=${["filter"]}
-                data=${tree}
-                label=${facet.label}
+                data="${tree}"
+                label="${facet.label}"
                 expandLabel="${searchFacetContext.messages.expandLabel()}"
                 collapseLabel="${searchFacetContext.messages.collapseLabel()}"
                 expandParametrizedLabel="${searchFacetContext.rawMessages.expandParametrizedLabel}"
                 collapseParametrizedLabel="${searchFacetContext.rawMessages.collapseParametrizedLabel}"
                 expandAllLabel="${searchFacetContext.messages.expandAllLabel()}"
                 collapseAllLabel="${searchFacetContext.messages.collapseAllLabel()}"
-                @treenode-change="${(e) => this.onTreeValueChange(facet, e.detail)}"
-                @treenode-clear-all="${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(this.facetId, []); }}"
+                @treenode-change=${(e) => this.onTreeValueChange(facet, e.detail)}
+                @treenode-clear-all=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(this.facetId, []); }}
             ></ft-tree-selector>
         `;
     }
     convertFacetToTree(facet) {
         return {
-            rootNodes: facet.rootNodes.map(entry => this.convertEntryToTreeNode(entry))
+            rootNodes: facet.rootNodes.map((entry) => this.convertEntryToTreeNode(entry)),
         };
     }
     convertEntryToTreeNode(entry) {
@@ -117,8 +123,8 @@ class FtSearchFacet extends withI18n(FtSearchComponent) {
             label: entry.label + (this.displayTotalResultsCount ? ` (${entry.totalResultsCount})` : ""),
             selected: entry.selected,
             expanded: this.isEntryExpanded(entry),
-            indeterminate: entry.descendantSelected ? entry.childNodes.some(e => !e.selected) : false,
-            children: entry.childNodes.map(e => this.convertEntryToTreeNode(e))
+            indeterminate: entry.descendantSelected ? entry.childNodes.some((e) => !e.selected) : false,
+            children: entry.childNodes.map((e) => this.convertEntryToTreeNode(e)),
         };
     }
     isEntryExpanded(entry) {
@@ -138,14 +144,14 @@ FtSearchFacet.elementDefinitions = {
     "ft-filter": FtFilter,
     "ft-tree-selector": FtTreeSelector,
     "ft-typography": FtTypography,
-    "ft-button": FtButton
+    "ft-button": FtButton,
 };
 FtSearchFacet.styles = styles;
 __decorate([
     property()
 ], FtSearchFacet.prototype, "facetId", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtSearchFacet.prototype, "maxValues", void 0);
 __decorate([
     property({ type: Boolean })
@@ -156,6 +162,9 @@ __decorate([
 __decorate([
     property()
 ], FtSearchFacet.prototype, "displayMode", void 0);
+__decorate([
+    jsonProperty({ context: "officialContext", key: "searchFacetsFilteredOptionsNumberAriaNotification" })
+], FtSearchFacet.prototype, "filteredOptionsNumberAriaNotification", void 0);
 __decorate([
     redux({ store: "search" })
 ], FtSearchFacet.prototype, "facets", void 0);