@fluid-topics/ft-filter 2.2.35 → 2.2.37

package/build/FtFilterMessages.d.ts

@@ -0,0 +1,8 @@
+import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtFilterMessages extends I18nMessages {
+    filterInputPlaceHolder(label: string): string;
+    clearFilterButton(): string;
+    displayMoreFilterValuesButton(): string;
+    noFilterValuesAvailable(): string;
+}
+export declare const ftFilterContext: I18nMessageContext<FtFilterMessages>;

package/build/FtFilterMessages.js

@@ -0,0 +1,2 @@
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n";
+export const ftFilterContext = I18nMessageContext.build("designedFilterComponent");

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

@@ -29,8 +29,6 @@ export declare class FtFilterLevel extends FtFilterLevel_base {
     displayCount: boolean;
     preventNavigation: boolean;
     filter: string;
-    moreValuesButtonLabel: string;
-    noValuesLabel?: string;
     filteredOptionsNumberAriaNotification?: I18nAttributeValue;
     displayedValuesLimit: number;
     protected container?: HTMLDivElement;

package/build/ft-filter-level.js

@@ -7,7 +7,7 @@ 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 { Debouncer, flatDeep, FtLitElement, hasChanged, numberProperty, withAriaNotification, withAnalytics, } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, flatDeep, FtLitElement, hasChanged, numberProperty, withAnalytics, withAriaNotification, } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { FtRipple } from "@fluid-topics/ft-ripple";
@@ -16,6 +16,7 @@ import { FtCheckbox } from "@fluid-topics/ft-checkbox";
 import { FtRadio, } from "@fluid-topics/ft-radio";
 import { levelStyles } from "./ft-filter-level.styles";
 import { withI18n } from "@fluid-topics/ft-i18n";
+import { ftFilterContext } from "./FtFilterMessages";
 export const analyticsActions = {
     "more-filters-button-pressed": {
         label: "Revealing more filters",
@@ -34,7 +35,6 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
         this.displayCount = false;
         this.preventNavigation = false;
         this.filter = "";
-        this.moreValuesButtonLabel = "More";
         this.displayedValuesLimit = 0;
         this.displayedPages = 1;
         this.filteredOptions = [];
@@ -102,9 +102,9 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
                             <ft-typography variant="${FtTypographyVariants.body2}">${this.parent.label}</ft-typography>
                         </div>
                     `}
-                ${this.filteredOptions.length === 0 && this.noValuesLabel ? html `
+                ${this.filteredOptions.length === 0 ? html `
                         <ft-typography class="ft-filter-level--no-values" element="span" variant="${FtTypographyVariants.body2}">
-                            ${this.noValuesLabel}
+                            ${ftFilterContext.messages.noFilterValuesAvailable()}
                         </ft-typography>
                     ` : nothing}
                 ${repeat(limitedOptions, (option) => option.value, (option) => { var _a; return html `
@@ -135,7 +135,7 @@ export class FtFilterLevel extends withAnalytics(withI18n(withAriaNotification(F
             this.emitAnalyticsAction("more-filters-button-pressed", {});
             this.displayMore();
         }}>
-                            ${this.moreValuesButtonLabel}
+                            ${ftFilterContext.messages.displayMoreFilterValuesButton()}
                         </ft-button>
                     ` : nothing}
             </div>
@@ -257,12 +257,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtFilterLevel.prototype, "filter", void 0);
-__decorate([
-    property({ type: String })
-], FtFilterLevel.prototype, "moreValuesButtonLabel", void 0);
-__decorate([
-    property({ type: String })
-], FtFilterLevel.prototype, "noValuesLabel", void 0);
 __decorate([
     property()
 ], FtFilterLevel.prototype, "filteredOptionsNumberAriaNotification", void 0);

package/build/ft-filter.d.ts

@@ -18,10 +18,6 @@ export declare class FtFilter extends FtFilter_base implements FtFilterPropertie
     static styles: import("lit").CSSResult[];
     id: string;
     label: string;
-    filterPlaceHolder: string;
-    clearButtonLabel: string;
-    moreValuesButtonLabel: string;
-    noValuesLabel: string;
     options: Array<FtFilterOptionProperties>;
     multivalued: boolean;
     disabled: boolean;

package/build/ft-filter.js

@@ -6,12 +6,13 @@ 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, withAnalytics, FtLitElement, jsonProperty, numberProperty, waitUntil, } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, deepEqual, flatDeep, FtLitElement, jsonProperty, numberProperty, waitUntil, withAnalytics, } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
-import { FtFilterLevel, analyticsActions } from "./ft-filter-level";
+import { analyticsActions, FtFilterLevel, } from "./ft-filter-level";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtSnapScroll, } from "@fluid-topics/ft-snap-scroll";
 import { styles } from "./ft-filter.styles";
+import { ftFilterContext } from "./FtFilterMessages";
 export class FtFilterChangeEvent extends CustomEvent {
     constructor(selectedValues) {
         super("change", { detail: selectedValues });
@@ -22,10 +23,6 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
         super(...arguments);
         this.id = "";
         this.label = "";
-        this.filterPlaceHolder = "Filter {0}";
-        this.clearButtonLabel = "Clear";
-        this.moreValuesButtonLabel = "More";
-        this.noValuesLabel = "No values available";
         this.options = [];
         this.multivalued = false;
         this.disabled = false;
@@ -54,7 +51,7 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
     render() {
         const valuesSelected = this.flatOptions.some((o) => o.selected);
         const showFilter = this.withScroll || this.filter || this.lastLevelHasHiddenvalues;
-        const placeholder = this.filterPlaceHolder.replace("{0}", this.label);
+        const placeholder = ftFilterContext.messages.filterInputPlaceHolder(this.label);
         return html `
             <div class="ft-filter--container ${this.disabled ? "ft-filter--disabled" : ""}"
                  part="container">
@@ -69,14 +66,14 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
                         </div>
                         ${valuesSelected && !this.hideClearButton ? html `
                             <ft-button icon="close"
-                                       aria-label="${this.clearButtonLabel + " " + this.label}"
+                                       aria-label="${ftFilterContext.messages.clearFilterButton() + " " + this.label}"
                                        dense
                                        @click=${() => {
             this.clear();
             this.focusOnFirstOption();
         }}
                                        part="clear-button">
-                                ${this.clearButtonLabel}
+                                ${ftFilterContext.messages.clearFilterButton()}
                             </ft-button>
                         ` : null}
                     </div>
@@ -190,7 +187,6 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
                 filterId="${this.id}"
                 .filter=${this.filter}
                 .configuredAnalyticsActions=${this.configuredAnalyticsActions}
-                moreValuesButtonLabel="${this.moreValuesButtonLabel}"
                 ?multivalued=${this.multivalued}
                 ?disabled=${this.disabled || className !== "ft-filter--level-center"}
                 ?hideSelectedOptions=${this.raiseSelectedOptions}
@@ -203,7 +199,6 @@ export class FtFilter extends withAnalytics(FtLitElement, analyticsActions) {
                 @display-level=${this.onDisplayLevel}
                 part="values available-values"
                 .exportpartsPrefixes=${["values", "available-values"]}
-                noValuesLabel="${this.noValuesLabel}"
                 .filteredOptionsNumberAriaNotification=${this.filteredOptionsNumberAriaNotification}
             ></ft-filter-level>
         `;
@@ -308,18 +303,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtFilter.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], FtFilter.prototype, "filterPlaceHolder", void 0);
-__decorate([
-    property({ type: String })
-], FtFilter.prototype, "clearButtonLabel", void 0);
-__decorate([
-    property({ type: String })
-], FtFilter.prototype, "moreValuesButtonLabel", void 0);
-__decorate([
-    property({ type: String })
-], FtFilter.prototype, "noValuesLabel", void 0);
 __decorate([
     jsonProperty([])
 ], FtFilter.prototype, "options", void 0);