@fluid-topics/ft-search-selected-facets 1.3.31 → 1.3.32

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

@@ -1,9 +1,10 @@
-import { nothing } from "lit";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { nothing, 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";
 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> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-app-context").FtLitElementWithDateFormatInterface>;
+import { I18nAttributeValue } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+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> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtLitElementWithAriaNotificationInterface>;
 export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base implements FtSearchSelectedFacetsProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
@@ -15,7 +16,10 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
     searchInDocumentTitlesOnly?: boolean;
     filters?: FtMetadataFilter[];
     scope?: FtSearchScopeKeys;
+    selectedFacetsAriaNotification: I18nAttributeValue;
+    protected ariaNotificationDebouncer: Debouncer;
     get hasSomethingToDisplay(): boolean | undefined;
+    get numberOfChips(): number;
     constructor();
     protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
     private renderFacet;
@@ -30,5 +34,7 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
     private renderPeriodFilter;
     private renderDateFilter;
     private renderRangeFilter;
+    updated(props: PropertyValues): void;
+    private announceFilters;
 }
 export {};

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { flatDeep, FocusMainContentEvent, formatHierarchicalValues, redux, shadowQuerySelectorAll } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, flatDeep, FocusMainContentEvent, formatHierarchicalValues, jsonProperty, numberProperty, redux, shadowQuerySelectorAll, withAriaNotification } 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";
@@ -18,12 +18,15 @@ import { searchTypeContext, searchTypeDefaultMessages } from "@fluid-topics/ft-s
 import { periodFilterContext, periodFilterDefaultMessages } from "@fluid-topics/ft-search-period-filter";
 import { searchSelectedFacets, searchSelectedFacetsDefaultMessages } from "./FtSearchSelectedFacetsMessages";
 import { withDateFormat } from "@fluid-topics/ft-app-context";
-class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent)) {
+class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(withI18n(FtSearchComponent))) {
     get hasSomethingToDisplay() {
         var _a, _b;
         return this.searchInDocumentTitlesOnly
-            || ((_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.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));
+    }
+    get numberOfChips() {
+        return shadowQuerySelectorAll(this.shadowRoot, "ft-chip").length;
     }
     constructor() {
         super();
@@ -31,6 +34,12 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
         this.forceTooltip = false;
         this.multiLine = false;
         this.hierarchicalValueTruncatingLevel = 3;
+        this.selectedFacetsAriaNotification = {
+            context: "officialContext",
+            key: "searchSelectedFacetsAriaNotification",
+            message: "",
+        };
+        this.ariaNotificationDebouncer = new Debouncer(100);
         this.addI18nContext(searchTypeContext, searchTypeDefaultMessages);
         this.addI18nContext(searchSelectedFacets, searchSelectedFacetsDefaultMessages);
         this.addI18nContext(periodFilterContext, periodFilterDefaultMessages);
@@ -42,12 +51,12 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
         }
         return html `
             <div role="group" class="ft-search-selected-facets--container" aria-label="${searchSelectedFacets.messages.filterGroupLabel()}">
-                ${repeat(this.facets || [], facet => facet.key, facet => {
+                ${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));
+            return repeat(values, (value) => facet.key + "-" + value, (value) => this.renderFacet(facet.key, facet.label, values, value));
         })}
                 ${this.renderSearchInDocumentTitlesOnly()}
-                ${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))}
+                ${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>
         `;
     }
@@ -68,10 +77,10 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
                 label="${label}"
                 @icon-click=${(e) => {
             var _a;
-            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(facetKey, selectedValues.filter(v => v !== value));
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(facetKey, selectedValues.filter((v) => v !== value));
             this.determineAndApplyFocus(e);
         }}
-                ?multiLine="${this.multiLine}"
+                ?multiLine=${this.multiLine}
                 data-key="${facetKey}"
                 data-value="${value}">
                 ${this.displayLabel ? html `
@@ -105,7 +114,7 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
         const elementToFocus = this.getNextChipToFocusOn(chipElement);
         if (elementToFocus) {
             elementToFocus.elementToFocus = {
-                selector: `ft-button`
+                selector: `ft-button`,
             };
         }
         else {
@@ -114,9 +123,9 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
         }
     }
     getSelectedValues(facet) {
-        return flatDeep(facet.rootNodes, n => n.selected ? [] : n.childNodes)
-            .filter(n => n.selected)
-            .map(n => n.value);
+        return flatDeep(facet.rootNodes, (n) => n.selected ? [] : n.childNodes)
+            .filter((n) => n.selected)
+            .map((n) => n.value);
     }
     getLabelFromValue(key, value) {
         return this.readAndFormatValueFromFacet(key, value, this.hierarchicalValueTruncatingLevel);
@@ -154,7 +163,7 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSearchInDocumentTitlesOnly(false);
             this.determineAndApplyFocus(e);
         }}
-                ?multiLine="${this.multiLine}">
+                ?multiLine=${this.multiLine}>
                     <span part="values">
                         ${label}
                     </span>
@@ -190,7 +199,7 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key);
             this.determineAndApplyFocus(e);
         }}
-                    ?multiLine="${this.multiLine}">
+                    ?multiLine=${this.multiLine}>
                     <span part="values">
                         ${periodFilterContext.messages[dateFilter.type]()}
                     </span>
@@ -212,13 +221,43 @@ class FtSearchSelectedFacets extends withDateFormat(withI18n(FtSearchComponent))
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key);
             this.determineAndApplyFocus(e);
         }}
-                    ?multiLine="${this.multiLine}">
+                    ?multiLine=${this.multiLine}>
                     <span part="values">
                         ${periodFilterContext.messages["CUSTOM"]()}
                     </span>
                 </ft-chip>
             </ft-tooltip>`;
     }
+    updated(props) {
+        var _a, _b, _c, _d;
+        super.updated(props);
+        if (props.get("filters")) {
+            const visibleFiltersNumber = (_b = (_a = this.filters) === null || _a === void 0 ? void 0 : _a.filter((f) => f.dateFilter || f.rangeFilter).length) !== null && _b !== void 0 ? _b : 0;
+            const oldFiltersNumber = props.get("filters").filter((f) => f.dateFilter || f.rangeFilter).length;
+            if ((visibleFiltersNumber - oldFiltersNumber == 1) || (oldFiltersNumber > 0 && !this.hasSomethingToDisplay)) {
+                this.announceFilters();
+            }
+        }
+        if (props.get("facets")) {
+            const visibleFacetsNumber = (_d = (_c = this.facets) === null || _c === void 0 ? void 0 : _c.filter((facet) => this.getSelectedValues(facet).length > 0).length) !== null && _d !== void 0 ? _d : 0;
+            const oldFacetsNumber = props.get("facets").filter((facet) => this.getSelectedValues(facet).length > 0).length;
+            if ((visibleFacetsNumber - oldFacetsNumber == 1) || (oldFacetsNumber > 0 && !this.hasSomethingToDisplay)) {
+                this.announceFilters();
+            }
+        }
+        if (props.has("searchInDocumentTitlesOnly")) {
+            const oldSearchInDocOnly = props.get("searchInDocumentTitlesOnly");
+            if ((!oldSearchInDocOnly && this.searchInDocumentTitlesOnly) || (oldSearchInDocOnly && !this.hasSomethingToDisplay)) {
+                this.announceFilters();
+            }
+        }
+    }
+    announceFilters() {
+        this.ariaNotificationDebouncer.run(async () => {
+            const notification = await this.awaitI18n({ ...this.selectedFacetsAriaNotification, args: [this.numberOfChips] });
+            this.sendAriaNotification(notification, { checkVisibility: this.numberOfChips != 0 });
+        });
+    }
 }
 FtSearchSelectedFacets.elementDefinitions = {
     "ft-chip": FtChip,
@@ -235,7 +274,7 @@ __decorate([
     property({ type: Boolean })
 ], FtSearchSelectedFacets.prototype, "multiLine", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtSearchSelectedFacets.prototype, "hierarchicalValueTruncatingLevel", void 0);
 __decorate([
     redux({ store: "search" })
@@ -249,4 +288,7 @@ __decorate([
 __decorate([
     redux({ store: "search", selector: (state) => state.request.scope })
 ], FtSearchSelectedFacets.prototype, "scope", void 0);
+__decorate([
+    jsonProperty({ context: "officialContext", key: "searchSelectedFacetsAriaNotification" })
+], FtSearchSelectedFacets.prototype, "selectedFacetsAriaNotification", void 0);
 export { FtSearchSelectedFacets };