@fluid-topics/ft-search-selected-facets 1.1.106 → 1.1.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,15 +2,15 @@ import { nothing } from "lit";
2
2
  import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
3
3
  import { FtSearchSelectedFacetsProperties } from "./ft-search-selected-facets.properties";
4
4
  import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
5
- import { FtPeriodFilter, FtSearchFacet } from "@fluid-topics/public-api";
5
+ import { FtMetadataFilter, FtSearchFacet } from "@fluid-topics/public-api";
6
6
  declare const FtSearchSelectedFacets_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
7
7
  export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base implements FtSearchSelectedFacetsProperties {
8
8
  static elementDefinitions: ElementDefinitionsMap;
9
9
  static styles: import("lit").CSSResult;
10
10
  facets?: Array<FtSearchFacet>;
11
11
  searchInDocumentTitlesOnly?: boolean;
12
- periodFilter?: FtPeriodFilter;
13
- get hasSomethingToDisplay(): true | "LAST_WEEK" | "LAST_MONTH" | "LAST_QUARTER" | "LAST_YEAR" | "CUSTOM" | undefined;
12
+ filters?: FtMetadataFilter[];
13
+ get hasSomethingToDisplay(): boolean | undefined;
14
14
  constructor();
15
15
  protected render(): typeof nothing | import("lit").TemplateResult<1>;
16
16
  private renderFacet;
@@ -20,5 +20,7 @@ export declare class FtSearchSelectedFacets extends FtSearchSelectedFacets_base
20
20
  private unquote;
21
21
  private renderSearchInDocumentTitlesOnly;
22
22
  private renderPeriodFilter;
23
+ private renderDateFilter;
24
+ private renderRangeFilter;
23
25
  }
24
26
  export {};
@@ -17,8 +17,10 @@ import { searchTypeContext, searchTypeDefaultMessages } from "@fluid-topics/ft-s
17
17
  import { periodFilterContext, periodFilterDefaultMessages } from "@fluid-topics/ft-search-period-filter";
18
18
  class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
19
19
  get hasSomethingToDisplay() {
20
- var _a;
21
- return this.searchInDocumentTitlesOnly || ((_a = this.facets) === null || _a === void 0 ? void 0 : _a.some(facet => this.getSelectedValues(facet).length > 0)) || (this.periodFilter && this.periodFilter.periodType);
20
+ var _a, _b;
21
+ return this.searchInDocumentTitlesOnly
22
+ || ((_a = this.facets) === null || _a === void 0 ? void 0 : _a.some(facet => this.getSelectedValues(facet).length > 0))
23
+ || ((_b = this.filters) === null || _b === void 0 ? void 0 : _b.some(f => f.dateFilter || f.rangeFilter));
22
24
  }
23
25
  constructor() {
24
26
  super();
@@ -26,6 +28,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
26
28
  this.addI18nContext(periodFilterContext, periodFilterDefaultMessages);
27
29
  }
28
30
  render() {
31
+ var _a, _b;
29
32
  if (!this.hasSomethingToDisplay) {
30
33
  return nothing;
31
34
  }
@@ -36,7 +39,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
36
39
  return repeat(values, value => facet.key + "-" + value, value => this.renderFacet(facet.key, facet.label, values, value));
37
40
  })}
38
41
  ${this.renderSearchInDocumentTitlesOnly()}
39
- ${this.renderPeriodFilter()}
42
+ ${repeat((_b = (_a = this.filters) === null || _a === void 0 ? void 0 : _a.filter(f => f.dateFilter || f.rangeFilter)) !== null && _b !== void 0 ? _b : [], f => f.key, f => this.renderPeriodFilter(f))}
40
43
  </div>
41
44
  `;
42
45
  }
@@ -51,7 +54,7 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
51
54
  removable
52
55
  label="${label}"
53
56
  iconLabel=${"Remove " + label}
54
- @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setFilter(facetKey, selectedValues.filter(v => v !== value)); }}
57
+ @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setValueFilter(facetKey, selectedValues.filter(v => v !== value)); }}
55
58
  data-key="${facetKey}"
56
59
  data-value="${value}">
57
60
  ${this.getLabelFromValue(value)}
@@ -89,21 +92,37 @@ class FtSearchSelectedFacets extends withI18n(FtSearchComponent) {
89
92
  </ft-tooltip>
90
93
  ` : nothing;
91
94
  }
92
- renderPeriodFilter() {
93
- var _a, _b;
94
- return (this.periodFilter && this.periodFilter.periodType) ? html `
95
- <ft-tooltip inline text="${periodFilterContext.messages.period(this.periodFilter.periodType === "CUSTOM" ?
96
- periodFilterContext.messages.customPeriod((_a = this.periodFilter.period) === null || _a === void 0 ? void 0 : _a.from, (_b = this.periodFilter.period) === null || _b === void 0 ? void 0 : _b.to) :
97
- periodFilterContext.messages[this.periodFilter.periodType]())}"
95
+ renderPeriodFilter(filter) {
96
+ if (filter.dateFilter) {
97
+ return this.renderDateFilter(filter.key, filter.dateFilter);
98
+ }
99
+ if (filter.rangeFilter) {
100
+ return this.renderRangeFilter(filter.key, filter.rangeFilter);
101
+ }
102
+ return nothing;
103
+ }
104
+ renderDateFilter(key, dateFilter) {
105
+ return html `
106
+ <ft-tooltip inline text="${periodFilterContext.messages.period(periodFilterContext.messages[dateFilter.type]())}"
98
107
  part=" tooltips tooltip-search-period-filter">
99
108
  <ft-chip
100
109
  part="ft-search-selected-facets ft-search-selected-facet-period-filter"
101
110
  removable
102
- @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setPeriodFilter(undefined); }}>
103
- ${periodFilterContext.messages[this.periodFilter.periodType]()}
111
+ @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeDateFilter(key); }}>
112
+ ${periodFilterContext.messages[dateFilter.type]()}
104
113
  </ft-chip>
105
- </ft-tooltip>
106
- ` : nothing;
114
+ </ft-tooltip>`;
115
+ }
116
+ renderRangeFilter(key, rangeFilter) {
117
+ return html `
118
+ <ft-tooltip inline text="${periodFilterContext.messages.period(periodFilterContext.messages.customPeriod(rangeFilter.from, rangeFilter.to))}" part=" tooltips tooltip-search-period-filter">
119
+ <ft-chip
120
+ part="ft-search-selected-facets ft-search-selected-facet-period-filter"
121
+ removable
122
+ @icon-click=${() => { var _a; return (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.removeRangeFilter(key); }}>
123
+ ${periodFilterContext.messages["CUSTOM"]()}
124
+ </ft-chip>
125
+ </ft-tooltip>`;
107
126
  }
108
127
  }
109
128
  FtSearchSelectedFacets.elementDefinitions = {
@@ -118,6 +137,6 @@ __decorate([
118
137
  redux({ store: "search", selector: searchInDocumentTitlesOnlySelector })
119
138
  ], FtSearchSelectedFacets.prototype, "searchInDocumentTitlesOnly", void 0);
120
139
  __decorate([
121
- redux({ store: "search", selector: (state) => state.request.periodFilter })
122
- ], FtSearchSelectedFacets.prototype, "periodFilter", void 0);
140
+ redux({ store: "search", selector: (state) => state.request.metadataFilters })
141
+ ], FtSearchSelectedFacets.prototype, "filters", void 0);
123
142
  export { FtSearchSelectedFacets };