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

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";
@@ -59,7 +59,11 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                     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)}
@@ -67,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)
@@ -115,7 +145,11 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
                     removable hideIconTooltip
                     iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
-                    @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key); }}>
+                    @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>`;
@@ -127,7 +161,11 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
                     removable hideIconTooltip
                     iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
-                    @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key); }}>
+                    @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>`;