@fluid-topics/ft-search-sort-selector 1.3.17

package/README.md

@@ -0,0 +1,19 @@
+Sort selector component for fluid-topics search pages
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-sort-selector
+yarn add @fluid-topics/ft-search-sort-selector
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-sort-selector"
+
+function render() {
+    return html` <ft-search-sort-selector foo="bar"></ft-search-sort-selector> `
+}
+```

package/build/SearchSortSelectorMessages.d.ts

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

package/build/SearchSortSelectorMessages.js

@@ -0,0 +1,5 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export const context = I18nMessageContext.build("designedSearchSortSelector");
+export const defaultMessages = {
+    label: "Sort by",
+};

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

@@ -0,0 +1,23 @@
+import { nothing } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchSortSelectorProperties } from "./ft-search-sort-selector.properties";
+import { FtSearchSortOption } from "@fluid-topics/public-api";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { I18nAttributeValue } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+import { PropertyValues } from "lit/development";
+declare const FtSearchSortSelector_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtSearchSortSelector extends FtSearchSortSelector_base implements FtSearchSortSelectorProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    constructor();
+    labels: Array<I18nAttributeValue>;
+    configuredSortOptions: string[];
+    currentSortId?: string;
+    sortOptions?: FtSearchSortOption[];
+    selectedSort?: string;
+    getDisplayedSortOptions(): FtSearchSortOption[];
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private setSort;
+    protected willUpdate(props: PropertyValues<FtSearchSortSelector>): void;
+}
+export {};

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

@@ -0,0 +1,109 @@
+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 { jsonProperty, redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-search-sort-selector.styles";
+import { FtSelect, FtSelectOption } from "@fluid-topics/ft-select";
+import { repeat } from "lit/directives/repeat.js";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { i18nListAttribute } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+import { i18nAttributeConverter } from "@fluid-topics/ft-i18n/build/decorators/I18nAttributeConverter";
+import { context, defaultMessages } from "./SearchSortSelectorMessages";
+class FtSearchSortSelector extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.labels = [];
+        this.configuredSortOptions = [];
+        this.addI18nContext(context, defaultMessages);
+    }
+    getDisplayedSortOptions() {
+        var _a;
+        if (this.configuredSortOptions.length == 0) {
+            return (_a = this.sortOptions) !== null && _a !== void 0 ? _a : [];
+        }
+        return this.configuredSortOptions
+            .map((sortId) => { var _a; return (_a = this.sortOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option.id == sortId); })
+            .filter((option) => option != null)
+            .map((option) => option);
+    }
+    render() {
+        const displayedSortOptions = this.getDisplayedSortOptions();
+        if (displayedSortOptions.length <= 1) {
+            return nothing;
+        }
+        return html `
+            <div part="container">
+                <ft-select
+                    outlined
+                    label="${context.messages.label()}"
+                    aria-label="${context.messages.label()}"
+                    @change=${(e) => this.setSort(e)}>
+                    ${repeat(displayedSortOptions, (sort) => sort.id, (sort, index) => {
+            var _a, _b;
+            return html `
+                                <ft-select-option value="${sort.id}"
+                                                  label="${((_b = (_a = this.labels) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.message) || sort.label.key}"
+                                                  ?selected=${sort.id == this.selectedSort}></ft-select-option>
+                            `;
+        })}
+                </ft-select>
+            </div>
+        `;
+    }
+    setSort(e) {
+        var _a;
+        this.selectedSort = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSortId(e.detail);
+    }
+    willUpdate(props) {
+        var _a, _b, _c, _d, _e, _f;
+        super.willUpdate(props);
+        const displayedSortOptions = this.getDisplayedSortOptions();
+        const watchedKeys = [
+            "currentSortId",
+            "sortOptions",
+        ];
+        if (watchedKeys.some((p) => props.has(p)) && displayedSortOptions.length > 0) {
+            this.selectedSort = (_b = (_a = displayedSortOptions.find(({ id }) => id === this.currentSortId)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : (_c = displayedSortOptions[0]) === null || _c === void 0 ? void 0 : _c.id;
+            if (this.selectedSort && this.selectedSort != this.currentSortId) {
+                (_d = this.stateManager) === null || _d === void 0 ? void 0 : _d.setSortId(this.selectedSort);
+            }
+        }
+        // Focus on first option in designer when the list of configured sorts changes
+        if (props.has("configuredSortOptions")) {
+            this.selectedSort = (_e = displayedSortOptions[0]) === null || _e === void 0 ? void 0 : _e.id;
+            if (this.selectedSort && this.selectedSort != this.currentSortId) {
+                (_f = this.stateManager) === null || _f === void 0 ? void 0 : _f.setSortId(this.selectedSort);
+            }
+        }
+        if (props.has("sortOptions") || props.has("configuredSortOptions")) {
+            this.labels = displayedSortOptions.map((option) => i18nAttributeConverter.fromLocalizableLabel(option.label));
+        }
+    }
+}
+FtSearchSortSelector.elementDefinitions = {
+    "ft-select": FtSelect,
+    "ft-select-option": FtSelectOption,
+};
+FtSearchSortSelector.styles = styles;
+__decorate([
+    i18nListAttribute()
+], FtSearchSortSelector.prototype, "labels", void 0);
+__decorate([
+    jsonProperty([])
+], FtSearchSortSelector.prototype, "configuredSortOptions", void 0);
+__decorate([
+    redux({ store: "search", selector: (state) => state.request.sortId })
+], FtSearchSortSelector.prototype, "currentSortId", void 0);
+__decorate([
+    redux({ store: "search", selector: (state) => { var _a; return (_a = state.configuration) === null || _a === void 0 ? void 0 : _a.sortOptions; } })
+], FtSearchSortSelector.prototype, "sortOptions", void 0);
+__decorate([
+    state()
+], FtSearchSortSelector.prototype, "selectedSort", void 0);
+export { FtSearchSortSelector };