@fluid-topics/ft-filter 1.3.27 → 1.3.29

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

@@ -1,6 +1,10 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { PropertyValues } from "lit";
+import { Debouncer, ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtRadio } from "@fluid-topics/ft-radio";
 import { FtFilterOptionProperties } from "./ft-filter-option.properties";
-export declare class FtFilterLevel extends FtLitElement {
+import { I18nAttributeValue } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+declare const FtFilterLevel_base: 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>;
+export declare class FtFilterLevel extends FtFilterLevel_base {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     filterId: string;
@@ -11,19 +15,23 @@ export declare class FtFilterLevel extends FtLitElement {
     hideSelectedOptions: boolean;
     displayCount: boolean;
     preventNavigation: boolean;
-    private filter;
-    private moreValuesButtonLabel;
-    private noValuesLabel?;
+    filter: string;
+    moreValuesButtonLabel: string;
+    noValuesLabel?: string;
+    filteredOptionsNumberAriaNotification?: I18nAttributeValue;
     displayedValuesLimit: number;
-    private container?;
-    private radios?;
-    private displayedPages;
+    protected container?: HTMLDivElement;
+    protected radios?: FtRadio[];
+    protected displayedPages: number;
+    protected filteredOptions: FtFilterOptionProperties[];
+    protected ariaNotificationDebouncer: Debouncer;
     get hasHiddenValues(): boolean;
     private get limit();
     get height(): number;
     focusOnBackButton(): void;
     focusOnExpandButton(value: string): void;
     focusOnFirstOption(): void;
+    protected willUpdate(props: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private goBackOnKeyPress;
     private goBackOnClick;
@@ -33,4 +41,6 @@ export declare class FtFilterLevel extends FtLitElement {
     private onRadioKeyDown;
     private optionsChanged;
     private displayLevel;
+    protected updated(props: PropertyValues): void;
 }
+export {};

package/build/ft-filter-level.js

@@ -7,15 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { flatDeep, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, flatDeep, FtLitElement, hasChanged, numberProperty, withAriaNotification } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "@fluid-topics/ft-button";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { FtCheckbox } from "@fluid-topics/ft-checkbox";
 import { FtRadio } from "@fluid-topics/ft-radio";
 import { levelStyles } from "./ft-filter-level.styles";
-class FtFilterLevel extends FtLitElement {
+import { withI18n } from "@fluid-topics/ft-i18n";
+class FtFilterLevel extends withI18n(withAriaNotification(FtLitElement)) {
     constructor() {
         super(...arguments);
         this.filterId = "";
@@ -29,9 +30,11 @@ class FtFilterLevel extends FtLitElement {
         this.moreValuesButtonLabel = "More";
         this.displayedValuesLimit = 0;
         this.displayedPages = 1;
+        this.filteredOptions = [];
+        this.ariaNotificationDebouncer = new Debouncer(500);
     }
     get hasHiddenValues() {
-        let limit = this.limit;
+        const limit = this.limit;
         return limit != null && limit < this.options.length;
     }
     get limit() {
@@ -57,15 +60,23 @@ class FtFilterLevel extends FtLitElement {
             selector: `.ft-filter-level--option [part~="option"]`,
         };
     }
-    render() {
-        let options = [...this.options];
-        if (this.hideSelectedOptions) {
-            options = options.filter(o => !o.selected);
-        }
-        if (this.filter) {
-            options = options.filter(o => o.label.toLowerCase().includes(this.filter.toLowerCase()));
+    willUpdate(props) {
+        super.willUpdate(props);
+        if (props.has("options") || props.has("hideSelectedOptions") || props.has("filter")) {
+            let options = [...this.options];
+            if (this.hideSelectedOptions) {
+                options = options.filter((o) => !o.selected);
+            }
+            if (this.filter) {
+                options = options.filter((o) => o.label.toLowerCase().includes(this.filter.toLowerCase()));
+            }
+            if (options != this.filteredOptions) {
+                this.filteredOptions = options;
+            }
         }
-        const limitedOptions = options.slice(0, this.limit);
+    }
+    render() {
+        const limitedOptions = this.filteredOptions.slice(0, this.limit);
         return html `
             <div class="ft-filter-level--container ${this.disabled ? "ft-filter--disabled" : ""}">
                 ${this.parent == null ? null : html `
@@ -79,15 +90,15 @@ class FtFilterLevel extends FtLitElement {
                              @click=${this.goBackOnClick}>
                             <ft-ripple></ft-ripple>
                             <ft-icon>thin_arrow_left</ft-icon>
-                            <ft-typography variant="body2">${this.parent.label}</ft-typography>
+                            <ft-typography variant="${FtTypographyVariants.body2}">${this.parent.label}</ft-typography>
                         </div>
                     `}
-                ${this.options.length === 0 && this.noValuesLabel ? html `
-                        <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
+                ${this.filteredOptions.length === 0 && this.noValuesLabel ? html `
+                        <ft-typography class="ft-filter-level--no-values" element="span" variant="${FtTypographyVariants.body2}">
                             ${this.noValuesLabel}
                         </ft-typography>
                     ` : nothing}
-                ${repeat(limitedOptions, option => option.value, option => {
+                ${repeat(limitedOptions, (option) => option.value, (option) => {
             var _a;
             return html `
                             <div class="ft-filter-level--option" part="options" tabindex="-1">
@@ -108,7 +119,7 @@ class FtFilterLevel extends FtLitElement {
                             </div>
                         `;
         })}
-                ${limitedOptions.length < options.length ? html `
+                ${limitedOptions.length < this.filteredOptions.length ? html `
                         <ft-button
                             class="ft-filter-level--display-more"
                             icon="thin_arrow"
@@ -149,7 +160,7 @@ class FtFilterLevel extends FtLitElement {
                          data-value="${option.value}"
                          .checked=${option.selected}
                          .disabled=${this.disabled}
-                         .indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some(o => o.selected)}
+                         .indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], (o) => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some((o) => o.selected)}
                          @change=${(e) => this.optionsChanged(e, option)}>
                 ${option.renderOption ? option.renderOption : option.label}${this.displayCount ? ` (${option.count})` : ""}
             </ft-checkbox>
@@ -183,6 +194,21 @@ class FtFilterLevel extends FtLitElement {
     displayLevel(option) {
         this.dispatchEvent(new CustomEvent("display-level", { detail: option }));
     }
+    updated(props) {
+        super.updated(props);
+        if (props.has("filter")
+            && props.has("filteredOptions")
+            && props.get("filteredOptions") !== undefined
+            && props.get("filter") !== undefined) {
+            this.ariaNotificationDebouncer.run(async () => {
+                if (this.filteredOptionsNumberAriaNotification == undefined) {
+                    return;
+                }
+                const notification = await this.awaitI18n({ ...this.filteredOptionsNumberAriaNotification, args: [this.filteredOptions.length] });
+                this.sendAriaNotification(notification);
+            });
+        }
+    }
 }
 FtFilterLevel.elementDefinitions = {
     "ft-button": FtButton,
@@ -201,7 +227,7 @@ __decorate([
     property({ type: Object })
 ], FtFilterLevel.prototype, "parent", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, hasChanged })
 ], FtFilterLevel.prototype, "options", void 0);
 __decorate([
     property({ type: Boolean })
@@ -228,7 +254,10 @@ __decorate([
     property({ type: String })
 ], FtFilterLevel.prototype, "noValuesLabel", void 0);
 __decorate([
-    property({ type: Number })
+    property()
+], FtFilterLevel.prototype, "filteredOptionsNumberAriaNotification", void 0);
+__decorate([
+    numberProperty()
 ], FtFilterLevel.prototype, "displayedValuesLimit", void 0);
 __decorate([
     query(".ft-filter-level--container")
@@ -239,4 +268,7 @@ __decorate([
 __decorate([
     state()
 ], FtFilterLevel.prototype, "displayedPages", void 0);
+__decorate([
+    state()
+], FtFilterLevel.prototype, "filteredOptions", void 0);
 export { FtFilterLevel };

package/build/ft-filter.d.ts

@@ -2,6 +2,7 @@ import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFilterProperties } from "./ft-filter.properties";
 import { FtFilterOptionProperties } from "./ft-filter-option.properties";
+import { I18nAttributeValue } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
 export declare class FtFilterChangeEvent extends CustomEvent<Array<any>> {
     constructor(selectedValues: any[]);
 }
@@ -20,6 +21,7 @@ export declare class FtFilter extends FtLitElement implements FtFilterProperties
     raiseSelectedOptions: boolean;
     displayCount: boolean;
     displayedValuesLimit: number;
+    filteredOptionsNumberAriaNotification?: I18nAttributeValue;
     hideClearButton: boolean;
     private slotElement;
     private container?;

package/build/ft-filter.js

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from "lit";
 import { property, query, queryAll, state } from "lit/decorators.js";
-import { Debouncer, deepEqual, flatDeep, FtLitElement, jsonProperty, waitUntil } from "@fluid-topics/ft-wc-utils";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { Debouncer, deepEqual, flatDeep, FtLitElement, jsonProperty, numberProperty, waitUntil } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtFilterLevel } from "./ft-filter-level";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
@@ -43,16 +43,16 @@ class FtFilter extends FtLitElement {
         this.lastDispatchedValues = [];
     }
     get flatOptions() {
-        return flatDeep(this.options, o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; });
+        return flatDeep(this.options, (o) => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; });
     }
     get childrenFilteredFlatOptions() {
-        return flatDeep(this.options, o => { var _a; return o.selected ? [] : ((_a = o.subOptions) !== null && _a !== void 0 ? _a : []); });
+        return flatDeep(this.options, (o) => { var _a; return o.selected ? [] : ((_a = o.subOptions) !== null && _a !== void 0 ? _a : []); });
     }
     get selectedValues() {
-        return this.childrenFilteredFlatOptions.filter(o => o.selected).map(o => o.value);
+        return this.childrenFilteredFlatOptions.filter((o) => o.selected).map((o) => o.value);
     }
     render() {
-        const valuesSelected = this.flatOptions.some(o => o.selected);
+        const valuesSelected = this.flatOptions.some((o) => o.selected);
         const showFilter = this.withScroll || this.filter || this.lastLevelHasHiddenvalues;
         const placeholder = this.filterPlaceHolder.replace("{0}", this.label);
         return html `
@@ -62,7 +62,7 @@ class FtFilter extends FtLitElement {
 
                     <div class="ft-filter--header" part="header">
                         <div class="filter-label" id="id-group-${this.id}">
-                            <ft-typography class="ft-filter--label" variant="overline" part="label">
+                            <ft-typography class="ft-filter--label" variant="${FtTypographyVariants.overline}" part="label">
                                 ${this.label}
                             </ft-typography>
                             <slot name="label"></slot>
@@ -103,8 +103,8 @@ class FtFilter extends FtLitElement {
     update(props) {
         super.update(props);
         if (props.has("options")) {
-            const newValues = new Set(this.flatOptions.map(o => o.value));
-            this.displayedLevels = this.displayedLevels.filter(value => newValues.has(value));
+            const newValues = new Set(this.flatOptions.map((o) => o.value));
+            this.displayedLevels = this.displayedLevels.filter((value) => newValues.has(value));
             this.lastDispatchedValues = this.selectedValues;
         }
     }
@@ -138,7 +138,7 @@ class FtFilter extends FtLitElement {
     }
     renderLevels() {
         const allOptions = this.flatOptions;
-        const selectedOptions = allOptions.filter(o => o.selected);
+        const selectedOptions = allOptions.filter((o) => o.selected);
         const currentLevelIndex = (this.slideIn || this.slideOut)
             ? this.displayedLevels.length - 2
             : this.displayedLevels.length - 1;
@@ -149,12 +149,13 @@ class FtFilter extends FtLitElement {
                         filterId="${this.id}"
                         ?multivalued=${this.multivalued}
                         ?disabled=${this.disabled}
-                        ?displayCount="${this.displayCount}"
+                        ?displayCount=${this.displayCount}
                         preventNavigation
                         .options=${selectedOptions}
                         @change=${this.onChange}
                         part="values selected-values"
                         .exportpartsPrefixes=${["values", "selected-values"]}
+                        .filteredOptionsNumberAriaNotification=${this.filteredOptionsNumberAriaNotification}
                     ></ft-filter-level>
                     <div class="ft-filter--separator">
                 ` : null}
@@ -168,7 +169,7 @@ class FtFilter extends FtLitElement {
         })}>
                 ${this.renderLevel(rootOptionsClass, this.options)}
                 ${this.displayedLevels
-            .map(optionValue => allOptions.find(o => o.value === optionValue))
+            .map((optionValue) => allOptions.find((o) => o.value === optionValue))
             .map((option, index) => {
             var _a;
             const className = (option === null || option === void 0 ? void 0 : option.value) === this.slideIn || (option === null || option === void 0 ? void 0 : option.value) === this.slideOut
@@ -186,12 +187,12 @@ class FtFilter extends FtLitElement {
             <ft-filter-level
                 class="${className}"
                 filterId="${this.id}"
-                .filter="${this.filter}"
+                .filter=${this.filter}
                 moreValuesButtonLabel="${this.moreValuesButtonLabel}"
                 ?multivalued=${this.multivalued}
                 ?disabled=${this.disabled || className !== "ft-filter--level-center"}
                 ?hideSelectedOptions=${this.raiseSelectedOptions}
-                ?displayCount="${this.displayCount}"
+                ?displayCount=${this.displayCount}
                 .parent=${parent}
                 .options=${options}
                 .displayedValuesLimit=${this.displayedValuesLimit}
@@ -201,6 +202,7 @@ class FtFilter extends FtLitElement {
                 part="values available-values"
                 .exportpartsPrefixes=${["values", "available-values"]}
                 noValuesLabel="${this.noValuesLabel}"
+                .filteredOptionsNumberAriaNotification=${this.filteredOptionsNumberAriaNotification}
             ></ft-filter-level>
         `;
     }
@@ -231,9 +233,9 @@ class FtFilter extends FtLitElement {
         });
     }
     clear() {
-        this.flatOptions.forEach(o => o.selected = false);
+        this.flatOptions.forEach((o) => o.selected = false);
         if (this.displayedLevels.length > 0) {
-            let currentLevel = this.displayedLevels[this.displayedLevels.length - 1];
+            const currentLevel = this.displayedLevels[this.displayedLevels.length - 1];
             this.displayedLevels = [currentLevel];
             this.slideOut = currentLevel;
         }
@@ -242,7 +244,7 @@ class FtFilter extends FtLitElement {
     onChange(e) {
         var _a;
         e.stopPropagation();
-        const option = this.flatOptions.find(o => o.value === e.detail.value);
+        const option = this.flatOptions.find((o) => o.value === e.detail.value);
         option.selected = !option.selected;
         const clearOption = (o) => {
             var _a;
@@ -264,7 +266,7 @@ class FtFilter extends FtLitElement {
             var _a;
             this.sendEventIfValuesChanged();
             this.requestUpdate();
-            (_a = this.levels) === null || _a === void 0 ? void 0 : _a.forEach(l => l.requestUpdate());
+            (_a = this.levels) === null || _a === void 0 ? void 0 : _a.forEach((l) => l.requestUpdate());
         });
     }
     sendEventIfValuesChanged() {
@@ -276,7 +278,7 @@ class FtFilter extends FtLitElement {
     }
     updateOptionsFromSlot(e) {
         e.stopPropagation();
-        this.options = this.slotElement.assignedElements().map(n => n);
+        this.options = this.slotElement.assignedElements().map((n) => n);
         this.optionsChanged();
     }
     onFilterChange() {
@@ -331,8 +333,11 @@ __decorate([
     property({ type: Boolean })
 ], FtFilter.prototype, "displayCount", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtFilter.prototype, "displayedValuesLimit", void 0);
+__decorate([
+    jsonProperty(undefined)
+], FtFilter.prototype, "filteredOptionsNumberAriaNotification", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtFilter.prototype, "hideClearButton", void 0);