@fluid-topics/ft-search-language-filter 1.2.65

package/README.md

@@ -0,0 +1,19 @@
+Content language filter for integrated fluid-topics search pages
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-language-filter
+yarn add @fluid-topics/ft-search-language-filter
+```
+
+## Usage
+
+```typescript
+import {html} from "lit"
+import "@fluid-topics/ft-search-language-filter"
+
+function render() {
+    return html` <ft-search-language-filter></ft-search-language-filter> `
+}
+```

package/build/SearchLanguageFilterMessages.d.ts

@@ -0,0 +1,6 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export interface SearchLanguageFilterMessages extends I18nMessages {
+    label(): string;
+}
+export declare const selectorContext: I18nMessageContext<SearchLanguageFilterMessages>;
+export declare const selectorDefaultMessages: DefaultI18nMessages<SearchLanguageFilterMessages>;

package/build/SearchLanguageFilterMessages.js

@@ -0,0 +1,5 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export const selectorContext = I18nMessageContext.build("designedSearchLanguageFilter");
+export const selectorDefaultMessages = {
+    label: "Select a language",
+};

package/build/ft-search-language-filter.d.ts

@@ -0,0 +1,18 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchLanguageFilterProperties } from "./ft-search-language-filter.properties";
+import { FtSearchLocale } from "@fluid-topics/public-api";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+declare const FtSearchLanguageFilter_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtSearchLanguageFilter extends FtSearchLanguageFilter_base implements FtSearchLanguageFilterProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    locales?: Array<FtSearchLocale>;
+    currentSearchLocale?: string;
+    selectedSearchLocale?: string;
+    constructor();
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private setContentLocale;
+    protected update(props: PropertyValues): void;
+}
+export {};

package/build/ft-search-language-filter.js

@@ -0,0 +1,72 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from "lit";
+import { state } from "lit/decorators.js";
+import { redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-search-language-filter.styles";
+import { repeat } from "lit/directives/repeat.js";
+import { FtSelect, FtSelectOption } from "@fluid-topics/ft-select";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { selectorContext, selectorDefaultMessages } from "./SearchLanguageFilterMessages";
+class FtSearchLanguageFilter extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.addI18nContext(selectorContext, selectorDefaultMessages);
+    }
+    render() {
+        var _a, _b, _c;
+        if (((_b = (_a = this.locales) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 1) {
+            return nothing;
+        }
+        return html `
+            <div part="container">
+                <ft-select
+                    aria-labelledby="language-filter-label"
+                    outlined
+                    @change=${(e) => this.setContentLocale(e)}>
+                    ${repeat(((_c = this.locales) !== null && _c !== void 0 ? _c : []), (locale) => locale.lang, (locale) => {
+            var _a;
+            return html `
+                                <ft-select-option value="${(_a = locale.lang) !== null && _a !== void 0 ? _a : "all"}"
+                                                  label="${locale.label}"
+                                                  ?selected=${locale.lang == this.selectedSearchLocale}
+                                >
+                                </ft-select-option>
+                            `;
+        })}
+                </ft-select>
+            </div>
+        `;
+    }
+    setContentLocale(e) {
+        var _a;
+        this.selectedSearchLocale = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setContentLocale(e.detail === "all" ? undefined : e.detail);
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("currentSearchLocale")) {
+            this.selectedSearchLocale = this.currentSearchLocale;
+            this.dispatchEvent(new CustomEvent("current-search-locale-change", { detail: this.currentSearchLocale }));
+        }
+    }
+}
+FtSearchLanguageFilter.elementDefinitions = {
+    "ft-select": FtSelect,
+    "ft-select-option": FtSelectOption,
+};
+FtSearchLanguageFilter.styles = styles;
+__decorate([
+    redux({ store: "search" })
+], FtSearchLanguageFilter.prototype, "locales", void 0);
+__decorate([
+    redux({ store: "search", selector: (state) => state.request.contentLocale })
+], FtSearchLanguageFilter.prototype, "currentSearchLocale", void 0);
+__decorate([
+    state()
+], FtSearchLanguageFilter.prototype, "selectedSearchLocale", void 0);
+export { FtSearchLanguageFilter };