@fluid-topics/ft-search-locale-selector 1.0.4

package/README.md

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

package/build/SearchLocaleSelectorMessages.d.ts

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

package/build/SearchLocaleSelectorMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export const selectorContext = I18nMessageContext.build("designedSearchLocaleSelector");
+export const selectorDefaultMessages = {
+    label: "Select a language",
+    allLanguagesWarningMessage: "Only recommended when searching for language-agnostic keywords such as product references",
+};

package/build/ft-search-locale-selector.css.d.ts

@@ -0,0 +1,5 @@
+export declare const FtSearchLocaleSelectorCssVariables: {
+    warningIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    warningTooltipMaxWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-search-locale-selector.css.js

@@ -0,0 +1,19 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip/build/ft-tooltip.css";
+export const FtSearchLocaleSelectorCssVariables = {
+    warningIconColor: FtCssVariableFactory.extend("--ft-search-locale-selector-warning-icon-color", designSystemVariables.colorError),
+    warningTooltipMaxWidth: FtCssVariableFactory.create("--ft-search-locale-selector-warning-tooltip-max-width", "SIZE", "250px")
+};
+// language=CSS
+export const styles = css `
+
+    [part="warning-tooltip"] {
+        ${setVariable(FtTooltipCssVariables.maxWidth, FtSearchLocaleSelectorCssVariables.warningTooltipMaxWidth)};
+    }
+
+    [part="warning-icon"] {
+        color: ${FtSearchLocaleSelectorCssVariables.warningIconColor};
+        cursor: help;
+    }
+`;

package/build/ft-search-locale-selector.d.ts

@@ -0,0 +1,20 @@
+import { PropertyValues } from "lit";
+import { FtSearchLocaleSelectorProperties } from "./ft-search-locale-selector.properties";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { FtSearchLocale } from "@fluid-topics/public-api";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { Position } from "@fluid-topics/ft-tooltip";
+declare const FtSearchLocaleSelector_base: typeof FtSearchComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtSearchLocaleSelector extends FtSearchLocaleSelector_base implements FtSearchLocaleSelectorProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    warningTooltipPosition: Position;
+    locales?: Array<FtSearchLocale>;
+    currentSearchLocale?: string;
+    selectedSearchLocale?: string;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    private setContentLocale;
+    protected updated(props: PropertyValues): void;
+}
+export {};

package/build/ft-search-locale-selector.js

@@ -0,0 +1,88 @@
+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 { styles } from "./ft-search-locale-selector.css";
+import { repeat } from "lit/directives/repeat.js";
+import { property, state } from "lit/decorators.js";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { redux } from "@fluid-topics/ft-wc-utils";
+import { FtFilter, FtFilterOption } from "@fluid-topics/ft-filter";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { selectorContext, selectorDefaultMessages } from "./SearchLocaleSelectorMessages";
+class FtSearchLocaleSelector extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.warningTooltipPosition = "left";
+        this.addI18nContext(selectorContext, selectorDefaultMessages);
+    }
+    render() {
+        var _a;
+        return html `
+            <ft-filter
+                    exportpartsPrefix="filter"
+                    label="${selectorContext.messages.label()}"
+                    hideClearButton
+                    @change=${(e) => this.setContentLocale(e)}
+            >
+                ${this.currentSearchLocale == null ? html `
+                            <ft-tooltip slot="label"
+                                        part="warning-tooltip"
+                                        position="${this.warningTooltipPosition}"
+                                        text="${selectorContext.messages.allLanguagesWarningMessage()}">
+                                <ft-icon value="warning" part="warning-icon"></ft-icon>
+                            </ft-tooltip>
+                        ` : nothing}
+                ${repeat(((_a = this.locales) !== null && _a !== void 0 ? _a : []), locale => locale.lang, locale => html `
+                                    <ft-filter-option label="${locale.label}"
+                                                      .value=${locale.lang}
+                                                      ?selected=${locale.lang == this.selectedSearchLocale}></ft-filter-option>
+                                `)}
+            </ft-filter>
+        `;
+    }
+    setContentLocale(e) {
+        this.selectedSearchLocale = e.detail[0];
+        setTimeout(() => {
+            var _a;
+            if (e.detail.length > 0) {
+                this.selectedSearchLocale = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setContentLocale(e.detail[0]);
+            }
+            else {
+                this.selectedSearchLocale = this.currentSearchLocale;
+            }
+        }, 0);
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has("currentSearchLocale")) {
+            this.selectedSearchLocale = this.currentSearchLocale;
+            this.dispatchEvent(new CustomEvent("current-search-locale-change", { detail: this.currentSearchLocale }));
+        }
+    }
+}
+FtSearchLocaleSelector.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-tooltip": FtTooltip,
+    "ft-filter": FtFilter,
+    "ft-filter-option": FtFilterOption
+};
+FtSearchLocaleSelector.styles = styles;
+__decorate([
+    property()
+], FtSearchLocaleSelector.prototype, "warningTooltipPosition", void 0);
+__decorate([
+    redux()
+], FtSearchLocaleSelector.prototype, "locales", void 0);
+__decorate([
+    redux({ selector: (state) => state.request.contentLocale })
+], FtSearchLocaleSelector.prototype, "currentSearchLocale", void 0);
+__decorate([
+    state()
+], FtSearchLocaleSelector.prototype, "selectedSearchLocale", void 0);
+export { FtSearchLocaleSelector };