@fluid-topics/ft-search-selected-facets 1.2.49 → 1.2.51

package/build/FtSearchSelectedFacetsMessages.d.ts

@@ -0,0 +1,7 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtSearchSelectedFacetsMessages extends I18nMessages {
+    filterGroupLabel(): string;
+    removeFilterLabel(): string;
+}
+export declare const searchSelectedFacets: I18nMessageContext<FtSearchSelectedFacetsMessages>;
+export declare const searchSelectedFacetsDefaultMessages: DefaultI18nMessages<FtSearchSelectedFacetsMessages>;

package/build/FtSearchSelectedFacetsMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const searchSelectedFacets = I18nMessageContext.build("designedSearchSelectedFacets");
+export const searchSelectedFacetsDefaultMessages = {
+    filterGroupLabel: "Filters enabled",
+    removeFilterLabel: "Remove filter"
+};

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

@@ -15,6 +15,8 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
     constructor();
     protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
     private renderFacet;
+    private getNextChipToFocusOn;
+    private determineAndApplyFocus;
     private getSelectedValues;
     private getLabelFromValue;
     private getBreadcrumbFromValue;

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import { flatDeep, redux } from "@fluid-topics/ft-wc-utils";
+import { flatDeep, FocusMainContentEvent, 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";
@@ -15,6 +15,7 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { searchInDocumentTitlesOnlySelector } from "@fluid-topics/ft-search-context";
 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) {
     get hasSomethingToDisplay() {
         var _a, _b;
@@ -25,6 +26,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
     constructor() {
         super();
         this.addI18nContext(searchTypeContext, searchTypeDefaultMessages);
+        this.addI18nContext(searchSelectedFacets, searchSelectedFacetsDefaultMessages);
         this.addI18nContext(periodFilterContext, periodFilterDefaultMessages);
     }
     render() {
@@ -33,7 +35,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
             return nothing;
         }
         return html `
-            <div class="ft-search-selected-facets--container">
+            <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));
@@ -54,9 +56,14 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                         part="tooltips tooltip-${keyWithNoColumn}">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-${keyWithNoColumn}"
-                    removable
+                    removable hideIconTooltip
+                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     label="${label}"
-                    @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(facetKey, selectedValues.filter(v => v !== value)); }}
+                    @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)}
@@ -64,6 +71,32 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
             </ft-tooltip>
         `;
     }
+    getNextChipToFocusOn(currentChip) {
+        const allChips = shadowQuerySelectorAll(this.shadowRoot, "ft-chip");
+        const currentIndex = allChips.indexOf(currentChip);
+        if (currentIndex === -1 || allChips.length <= 1) {
+            return null;
+        }
+        // If there's a next filter, focus it
+        if (currentIndex < allChips.length - 1) {
+            return allChips[currentIndex + 1];
+        }
+        // Otherwise focus the previous filter
+        return allChips[currentIndex - 1];
+    }
+    determineAndApplyFocus(e) {
+        const chipElement = e.currentTarget;
+        const elementToFocus = this.getNextChipToFocusOn(chipElement);
+        if (elementToFocus) {
+            elementToFocus.elementToFocus = {
+                selector: `ft-button`
+            };
+        }
+        else {
+            // No chip to focus on anymore, notify to focus main content
+            this.dispatchEvent(new FocusMainContentEvent());
+        }
+    }
     getSelectedValues(facet) {
         return flatDeep(facet.rootNodes, n => n.selected ? [] : n.childNodes)
             .filter(n => n.selected)
@@ -87,7 +120,8 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                         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
+                    removable hideIconTooltip
+                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
                     @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSearchInDocumentTitlesOnly(false); }}>
                     ${searchTypeContext.messages.documentTitlesOnly()}
                 </ft-chip>
@@ -109,8 +143,13 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                         part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable
-                    @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key); }}>
+                    removable hideIconTooltip
+                    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]()}
                 </ft-chip>
             </ft-tooltip>`;
@@ -120,8 +159,13 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
             <ft-tooltip inline text="${periodFilterContext.messages.period(periodFilterContext.messages.customPeriod(rangeFilter.from, rangeFilter.to))}" part=" tooltips tooltip-search-period-filter">
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
-                    removable
-                    @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key); }}>
+                    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"]()}
                 </ft-chip>
             </ft-tooltip>`;