@fluid-topics/ft-search-sort-selector 2.0.15 → 2.0.17

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

@@ -14,10 +14,9 @@ export declare class FtSearchSortSelector extends FtSearchSortSelector_base impl
     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;
+    private currentSortIdIsEmptyOrNotInAvailableOptions;
 }
 export {};

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

@@ -4,18 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, nothing, } from "lit";
+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 { 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 { 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) {
+import { context, defaultMessages, } from "./SearchSortSelectorMessages";
+export class FtSearchSortSelector extends withI18n(FtSearchComponent) {
     constructor() {
         super();
         this.labels = [];
@@ -43,48 +42,41 @@ class FtSearchSortSelector extends withI18n(FtSearchComponent) {
                     outlined
                     label="${context.messages.label()}"
                     aria-label="${context.messages.label()}"
-                    @change=${(e) => this.setSort(e)}>
+                    @change=${(e) => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSortId(e.detail); }}>
                     ${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>
+                                                  ?selected=${sort.id == this.currentSortId}></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;
+        var _a, _b;
         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") && props.get("configuredSortOptions") !== undefined) {
-            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 (watchedKeys.some((p) => props.has(p))) {
+            const displayedSortOptions = this.getDisplayedSortOptions();
+            if (displayedSortOptions.length > 0 && this.currentSortIdIsEmptyOrNotInAvailableOptions(displayedSortOptions)) {
+                (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setSortId((_b = displayedSortOptions[0]) === null || _b === void 0 ? void 0 : _b.id, true);
             }
         }
         if (props.has("sortOptions") || props.has("configuredSortOptions")) {
+            const displayedSortOptions = this.getDisplayedSortOptions();
             this.labels = displayedSortOptions.map((option) => i18nAttributeConverter.fromLocalizableLabel(option.label));
         }
     }
+    currentSortIdIsEmptyOrNotInAvailableOptions(availableOptions) {
+        return !this.currentSortId || !availableOptions.some((sortOption) => this.currentSortId == sortOption.id);
+    }
 }
 FtSearchSortSelector.elementDefinitions = {
     "ft-select": FtSelect,
@@ -103,7 +95,3 @@ __decorate([
 __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 };