@fluid-topics/ft-search-selected-facets 2.2.25 → 2.2.26

package/build/FtSearchSelectedFacetsMessages.d.ts

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

package/build/FtSearchSelectedFacetsMessages.js

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

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

@@ -25,6 +25,7 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
     get numberOfChips(): number;
     constructor();
     protected render(): typeof nothing | import("lit").TemplateResult<1>;
+    private isFacetNegative;
     private renderFacet;
     private getNextChipToFocusOn;
     private determineAndApplyFocus;

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

@@ -65,6 +65,13 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
             </div>
         `;
     }
+    isFacetNegative(key, value) {
+        var _a;
+        var _b;
+        return (_b = (_a = this.filters) === null || _a === void 0 ? void 0 : _a.some((filter) => { var _a, _b; return filter.key === key
+            && ((_a = filter.valueFilter) === null || _a === void 0 ? void 0 : _a.negative) === true
+            && ((_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") {
             return nothing;
@@ -72,13 +79,13 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
         const keyWithNoColumn = facetKey.replace(":", "-");
         const displayValue = this.getLabelFromValue(facetKey, value);
         const displayTooltipValue = this.getBreadcrumbFromValue(facetKey, value);
-        const label = facetLabel + ": " + displayTooltipValue;
+        const label = facetLabel + ": " + (this.isFacetNegative(facetKey, value) ? "NOT " : "") + displayTooltipValue;
         const noTooltip = !this.forceTooltip && this.displayLabel && displayTooltipValue == displayValue;
         const chip = html `
             <ft-chip
                 part="ft-search-selected-facets ft-search-selected-facet-${keyWithNoColumn}"
-                removable hideIconTooltip
-                iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                removable hideIconTooltip accessibleLabelOnIcon
+                iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                 label="${label}"
                 @icon-click=${(e) => {
             var _a;
@@ -91,7 +98,7 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                 ${this.displayLabel ? html `
                     <span part="label">${facetLabel}: </span>` : nothing}
                 <span part="values">
-                    ${displayValue}
+                    ${this.isFacetNegative(facetKey, value) ? html `<strong>NOT</strong> ${displayValue}` : displayValue}
                 </span>
             </ft-chip>`;
         return noTooltip ? chip : html `
@@ -167,8 +174,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                 part="ft-search-selected-facets ft-search-selected-facet-search-in-document-titles-only"
                 label="${label}"
                 removable
-                hideIconTooltip
-                iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                hideIconTooltip accessibleLabelOnIcon
+                iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                 @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSearchInDocumentTitlesOnly(false);
@@ -195,8 +202,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                 part="ft-search-selected-facets ft-search-selected-facet-match-all-keywords"
                 label="${label}"
                 removable
-                hideIconTooltip
-                iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                hideIconTooltip accessibleLabelOnIcon
+                iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                 @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setKeywordMatch(FtSearchKeywordMatch.OPTIONAL);
@@ -230,9 +237,9 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                 <ft-chip
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
                     removable
-                    hideIconTooltip
+                    hideIconTooltip accessibleLabelOnIcon
                     label="${label}"
-                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                    iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                     @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key);
@@ -253,8 +260,8 @@ export class FtSearchSelectedFacets extends withAriaNotification(withDateFormat(
                     part="ft-search-selected-facets ft-search-selected-facet-period-filter"
                     label="${label}"
                     removable
-                    hideIconTooltip
-                    iconLabel="${searchSelectedFacets.messages.removeFilterLabel()}"
+                    hideIconTooltip accessibleLabelOnIcon
+                    iconLabel="${searchSelectedFacets.messages.removeNamedFilterLabel(label)}"
                     @icon-click=${(e) => {
             var _a;
             (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key);