@fluid-topics/ft-filter 2.2.37 → 2.2.39

package/build/FtFilterMessages.d.ts

@@ -3,6 +3,7 @@ export interface FtFilterMessages extends I18nMessages {
     filterInputPlaceHolder(label: string): string;
     clearFilterButton(): string;
     displayMoreFilterValuesButton(): string;
+    displayLessFilterValuesButton(): string;
     noFilterValuesAvailable(): string;
 }
 export declare const ftFilterContext: I18nMessageContext<FtFilterMessages>;

package/build/ft-filter-level.d.ts

@@ -9,6 +9,11 @@ export declare const analyticsActions: {
         defaultEventName: string;
         defaultComponentId: string;
     };
+    "less-filters-button-pressed": {
+        label: string;
+        defaultEventName: string;
+        defaultComponentId: string;
+    };
 };
 declare const FtFilterLevel_base: import("@fluid-topics/ft-wc-utils").withAnalyticsType<typeof FtLitElement & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtLitElementWithAriaNotificationInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>, {
     "more-filters-button-pressed": {
@@ -16,6 +21,11 @@ declare const FtFilterLevel_base: import("@fluid-topics/ft-wc-utils").withAnalyt
         defaultEventName: string;
         defaultComponentId: string;
     };
+    "less-filters-button-pressed": {
+        label: string;
+        defaultEventName: string;
+        defaultComponentId: string;
+    };
 }>;
 export declare class FtFilterLevel extends FtFilterLevel_base {
     static elementDefinitions: ElementDefinitionsMap;
@@ -30,7 +40,7 @@ export declare class FtFilterLevel extends FtFilterLevel_base {
     preventNavigation: boolean;
     filter: string;
     filteredOptionsNumberAriaNotification?: I18nAttributeValue;
-    displayedValuesLimit: number;
+    displayedValuesMinimum: number;
     protected container?: HTMLDivElement;
     protected radios?: FtRadio[];
     protected displayedPages: number;
@@ -48,6 +58,7 @@ export declare class FtFilterLevel extends FtFilterLevel_base {
     private goBackOnKeyPress;
     private goBackOnClick;
     private displayMore;
+    private displayLess;
     private buildMultiValuedOption;
     private buildMonoValuedOption;
     private onRadioKeyDown;

package/build/ft-filter-level.js

@@ -23,6 +23,11 @@ export const analyticsActions = {
         defaultEventName: "filters-click_see_more",
         defaultComponentId: "ft-filter-level",
     },
+    "less-filters-button-pressed": {
+        label: "Revealing less filters",
+        defaultEventName: "filters-click_see_less",
+        defaultComponentId: "ft-filter-level",
+    },
 };
 export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(FtLitElement)), analyticsActions) {
     constructor() {
@@ -35,7 +40,7 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
         this.displayCount = false;
         this.preventNavigation = false;
         this.filter = "";
-        this.displayedValuesLimit = 0;
+        this.displayedValuesMinimum = 0;
         this.displayedPages = 1;
         this.filteredOptions = [];
         this.ariaNotificationDebouncer = new Debouncer(500);
@@ -45,7 +50,7 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
         return limit != null && limit < this.options.length;
     }
     get limit() {
-        return this.displayedValuesLimit > 0 ? this.displayedPages * this.displayedValuesLimit : undefined;
+        return this.displayedValuesMinimum > 0 ? this.displayedPages * this.displayedValuesMinimum : undefined;
     }
     get height() {
         var _a;
@@ -86,6 +91,8 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
     }
     render() {
         const limitedOptions = this.filteredOptions.slice(0, this.limit);
+        const displayMoreButton = limitedOptions.length < this.filteredOptions.length;
+        const displayLessButton = this.displayedValuesMinimum > 0 && limitedOptions.length > this.displayedValuesMinimum;
         return html `
             <div class="ft-filter-level--container ${this.disabled ? "ft-filter--disabled" : ""}">
                 ${this.parent == null ? null : html `
@@ -125,18 +132,35 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
                                     `}
                             </div>
                         `; })}
-                ${limitedOptions.length < this.filteredOptions.length ? html `
-                        <ft-button
-                            class="ft-filter-level--display-more"
-                            icon="thin_arrow"
-                            dense trailingIcon
-                            part="controls display-more"
-                            @click=${() => {
+                ${displayMoreButton || displayLessButton ? html `
+                        <div class="ft-filter-level--display-buttons" part="controls-container">
+                            ${displayLessButton ? html `
+                                <ft-button
+                                    class="ft-filter-level--display-less"
+                                    icon="thin_arrow_up"
+                                    dense trailingIcon
+                                    part="controls display-less"
+                                    @click=${() => {
+            this.emitAnalyticsAction("less-filters-button-pressed", {});
+            this.displayLess();
+        }}>
+                                    ${ftFilterContext.messages.displayLessFilterValuesButton()}
+                                </ft-button>
+                            ` : nothing}
+                            ${displayMoreButton ? html `
+                                <ft-button
+                                    class="ft-filter-level--display-more"
+                                    icon="thin_arrow"
+                                    dense trailingIcon
+                                    part="controls display-more"
+                                    @click=${() => {
             this.emitAnalyticsAction("more-filters-button-pressed", {});
             this.displayMore();
         }}>
-                            ${ftFilterContext.messages.displayMoreFilterValuesButton()}
-                        </ft-button>
+                                    ${ftFilterContext.messages.displayMoreFilterValuesButton()}
+                                </ft-button>
+                            ` : nothing}
+                        </div>
                     ` : nothing}
             </div>
         `;
@@ -161,6 +185,13 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
             selector: `.ft-filter-level--option:nth-child(${previousLimit + (hasGoBackButton ? 2 : 1)}) [part~="option"]`,
         };
     }
+    displayLess() {
+        this.displayedPages = 1;
+        // The "Less" button disappears once collapsed, keep the focus on the "More" button
+        this.elementToFocus = {
+            selector: `.ft-filter-level--display-more`,
+        };
+    }
     buildMultiValuedOption(option) {
         var _a;
         return html `
@@ -262,7 +293,7 @@ __decorate([
 ], FtFilterLevel.prototype, "filteredOptionsNumberAriaNotification", void 0);
 __decorate([
     numberProperty()
-], FtFilterLevel.prototype, "displayedValuesLimit", void 0);
+], FtFilterLevel.prototype, "displayedValuesMinimum", void 0);
 __decorate([
     query(".ft-filter-level--container")
 ], FtFilterLevel.prototype, "container", void 0);

package/build/ft-filter-level.styles.js

@@ -73,7 +73,15 @@ export const levelStyles = css `
         ${setVariable(FtButtonCssVariables.color, FtFilterLevelCssVariables.colorOnSurface)};
     }
 
-    ft-button.ft-filter-level--display-more {
+    .ft-filter-level--display-buttons {
+        display: flex;
+        gap: 4px;
+    }
+
+    ft-button.ft-filter-level--display-more,
+    ft-button.ft-filter-level--display-less {
+        flex: 1 1 0;
+        min-width: 0;
         ${setVariable(FtButtonCssVariables.color, FtFilterLevelCssVariables.buttonMoreColor)};
     }
 

package/build/ft-filter.d.ts

@@ -12,6 +12,11 @@ declare const FtFilter_base: import("@fluid-topics/ft-wc-utils").withAnalyticsTy
         defaultEventName: string;
         defaultComponentId: string;
     };
+    "less-filters-button-pressed": {
+        label: string;
+        defaultEventName: string;
+        defaultComponentId: string;
+    };
 }>;
 export declare class FtFilter extends FtFilter_base implements FtFilterProperties {
     static elementDefinitions: ElementDefinitionsMap;
@@ -23,7 +28,7 @@ export declare class FtFilter extends FtFilter_base implements FtFilterPropertie
     disabled: boolean;
     raiseSelectedOptions: boolean;
     displayCount: boolean;
-    displayedValuesLimit: number;
+    displayedValuesMinimum: number;
     filteredOptionsNumberAriaNotification?: I18nAttributeValue;
     hideClearButton: boolean;
     private slotElement;

package/build/ft-filter.js

@@ -28,7 +28,7 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
         this.disabled = false;
         this.raiseSelectedOptions = false;
         this.displayCount = false;
-        this.displayedValuesLimit = 0;
+        this.displayedValuesMinimum = 0;
         this.hideClearButton = false;
         this.lastLevelHasHiddenvalues = false;
         this.withScroll = false;
@@ -193,7 +193,7 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
                 ?displayCount=${this.displayCount}
                 .parent=${parent}
                 .options=${options}
-                .displayedValuesLimit=${this.displayedValuesLimit}
+                .displayedValuesMinimum=${this.displayedValuesMinimum}
                 @change=${this.onChange}
                 @go-back=${this.goBack}
                 @display-level=${this.onDisplayLevel}
@@ -320,7 +320,7 @@ __decorate([
 ], FtFilter.prototype, "displayCount", void 0);
 __decorate([
     numberProperty()
-], FtFilter.prototype, "displayedValuesLimit", void 0);
+], FtFilter.prototype, "displayedValuesMinimum", void 0);
 __decorate([
     jsonProperty(undefined)
 ], FtFilter.prototype, "filteredOptionsNumberAriaNotification", void 0);