@fluid-topics/ft-search-period-filter 1.1.64

package/README.md

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

package/build/SearchPeriodFilterMessages.d.ts

@@ -0,0 +1,14 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export interface SearchPeriodFilterMessages extends I18nMessages {
+    label(): string;
+    anyTime(): string;
+    LAST_WEEK(): string;
+    LAST_MONTH(): string;
+    LAST_QUARTER(): string;
+    LAST_YEAR(): string;
+    CUSTOM(): string;
+    customPeriod(from?: string, to?: string): string;
+    period(value: string): string;
+}
+export declare const periodFilterContext: I18nMessageContext<SearchPeriodFilterMessages>;
+export declare const periodFilterDefaultMessages: DefaultI18nMessages<SearchPeriodFilterMessages>;

package/build/SearchPeriodFilterMessages.js

@@ -0,0 +1,13 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export const periodFilterContext = I18nMessageContext.build("designedSearchPeriodFilter");
+export const periodFilterDefaultMessages = {
+    label: "Last update",
+    anyTime: "Any time",
+    LAST_WEEK: "Less than a week",
+    LAST_MONTH: "Less than a month",
+    LAST_QUARTER: "Less than a quarter",
+    LAST_YEAR: "Less than a year",
+    CUSTOM: "Custom period",
+    customPeriod: "From {0} to {1}",
+    period: "Period: {0}"
+};

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

@@ -0,0 +1,18 @@
+import { FtSearchPeriodFilterProperties } from "./ft-search-period-filter.properties";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtPeriodFilter } from "@fluid-topics/public-api";
+declare const FtSearchPeriodFilter_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtSearchPeriodFilter extends FtSearchPeriodFilter_base implements FtSearchPeriodFilterProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    lessThanAWeek?: boolean;
+    lessThanAMonth?: boolean;
+    lessThanAQuarter?: boolean;
+    lessThanAYear?: boolean;
+    periodFilter?: FtPeriodFilter;
+    constructor();
+    protected render(): import("lit").TemplateResult<1>;
+    private setPeriodFilter;
+}
+export {};

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

@@ -0,0 +1,66 @@
+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-period-filter.styles";
+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 { periodFilterContext, periodFilterDefaultMessages } from "./SearchPeriodFilterMessages";
+import { property } from "lit/decorators.js";
+import { FtRadio, FtRadioGroup } from "@fluid-topics/ft-radio";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtPeriodFilterType } from "@fluid-topics/public-api";
+class FtSearchPeriodFilter extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.addI18nContext(periodFilterContext, periodFilterDefaultMessages);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return html `<div part="container">
+                <div part="header">
+                    <ft-typography variant="overline" part="label" id="label">
+                        ${periodFilterContext.messages.label()}
+                    </ft-typography>
+                </div>
+                <ft-radio-group @change=${(e) => this.setPeriodFilter(e)} aria-labelledby="label">
+                    <ft-radio value="anyTime" ?checked=${this.periodFilter === undefined || this.periodFilter.periodType === undefined}>${periodFilterContext.messages.anyTime()}</ft-radio>
+                    ${this.lessThanAWeek ? html `<ft-radio ?checked=${((_a = this.periodFilter) === null || _a === void 0 ? void 0 : _a.periodType) == "LAST_WEEK"} value="LAST_WEEK">${periodFilterContext.messages.LAST_WEEK()}</ft-radio>` : nothing}
+                    ${this.lessThanAMonth ? html `<ft-radio ?checked=${((_b = this.periodFilter) === null || _b === void 0 ? void 0 : _b.periodType) == "LAST_MONTH"} value="LAST_MONTH">${periodFilterContext.messages.LAST_MONTH()}</ft-radio>` : nothing}
+                    ${this.lessThanAQuarter ? html `<ft-radio ?checked=${((_c = this.periodFilter) === null || _c === void 0 ? void 0 : _c.periodType) == "LAST_QUARTER"} value="LAST_QUARTER">${periodFilterContext.messages.LAST_QUARTER()}</ft-radio>` : nothing}
+                    ${this.lessThanAYear ? html `<ft-radio ?checked=${((_d = this.periodFilter) === null || _d === void 0 ? void 0 : _d.periodType) == "LAST_YEAR"} value="LAST_YEAR">${periodFilterContext.messages.LAST_YEAR()}</ft-radio>` : nothing}
+                </ft-radio-group>
+            </div>`;
+    }
+    setPeriodFilter(e) {
+        var _a;
+        const periodType = FtPeriodFilterType[e.detail];
+        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setPeriodFilter(periodType === undefined ? undefined : { periodType: periodType });
+    }
+}
+FtSearchPeriodFilter.elementDefinitions = {
+    "ft-radio-group": FtRadioGroup,
+    "ft-radio": FtRadio,
+    "ft-typography": FtTypography,
+};
+FtSearchPeriodFilter.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], FtSearchPeriodFilter.prototype, "lessThanAWeek", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchPeriodFilter.prototype, "lessThanAMonth", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchPeriodFilter.prototype, "lessThanAQuarter", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchPeriodFilter.prototype, "lessThanAYear", void 0);
+__decorate([
+    redux({ store: "search", selector: (state) => state.request.periodFilter })
+], FtSearchPeriodFilter.prototype, "periodFilter", void 0);
+export { FtSearchPeriodFilter };