@fluid-topics/ftds-period-picker 2.1.0

package/build/ftds-period-picker.d.ts

@@ -0,0 +1,52 @@
+import { PropertyValues } from "lit";
+import { FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtdsPeriodPickerDateInputsVisibility, FtdsPeriodPickerProperties, FtPeriod, FtPeriodPickerConfigOption, FtPeriodPickerOption, FtPeriodSelection } from "./ftds-period-picker.properties";
+import { FtdsRadio, FtdsRadioGroup } from "@fluid-topics/ftds-radio";
+import { FtdsTextInput } from "@fluid-topics/ftds-text-input";
+import { FtdsIcon } from "@fluid-topics/ftds-icon";
+import { FtdsFloatingMenu } from "@fluid-topics/ftds-floating-menu";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+export declare class FtPeriodChangeEvent extends CustomEvent<FtPeriodSelection> {
+    constructor(detail: FtPeriodSelection);
+}
+declare const FtdsPeriodPicker_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtInputInterface<FtPeriod>> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtdsPeriodPicker extends FtdsPeriodPicker_base implements FtdsPeriodPickerProperties {
+    static elementDefinitions: {
+        "ftds-radio-group": typeof FtdsRadioGroup;
+        "ftds-radio": typeof FtdsRadio;
+        "ftds-text-input": typeof FtdsTextInput;
+        "ftds-icon": typeof FtdsIcon;
+        "ftds-floating-menu": typeof FtdsFloatingMenu;
+        "ftds-button": typeof FtdsButton;
+    };
+    static styles: import("lit").CSSResult[];
+    dateInputsVisibility: FtdsPeriodPickerDateInputsVisibility;
+    customPeriodLabel: string;
+    periods: FtPeriodPickerConfigOption[];
+    minDate?: Date;
+    maxDate?: Date;
+    defaultPeriod?: FtPeriodSelection;
+    locale: string;
+    currentSelection?: FtPeriodPickerOption;
+    periodOptions: FtPeriodPickerOption[];
+    mainPanel?: HTMLElement;
+    customPeriodFromDateInput: FtdsTextInput;
+    customPeriodToDateInput: FtdsTextInput;
+    ftdsRadioGroup: FtdsRadioGroup;
+    constructor();
+    protected willUpdate(props: PropertyValues): void;
+    protected firstUpdated(props: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected renderRadioOptions(): import("lit-html").TemplateResult<1>;
+    protected renderDateInputs(): import("lit-html").TemplateResult<1>;
+    dateLimitRule(date: Date | undefined, limitDate: Date | undefined, shouldBeLater: boolean): string | true;
+    dateCompareRule(fromDate: Date | undefined, toDate: Date | undefined): string | true;
+    private onOptionChange;
+    private getInput;
+    private updatePeriodInputs;
+    private updateDateInputsValue;
+    private onCustomPeriodDateChange;
+    private triggerDateInputsValidation;
+    private dispatchPeriodChange;
+}
+export {};

package/build/ftds-period-picker.js

@@ -0,0 +1,283 @@
+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, } from "lit";
+import { property, query, state, } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { repeat } from "lit/directives/repeat.js";
+import { DateFormatter, dateProperty, FtdsBase, toFtInput, } from "@fluid-topics/ft-wc-utils";
+import { i18n, withI18n, } from "@fluid-topics/ft-i18n";
+import { FtdsPeriodPickerDateInputsVisibility, } from "./ftds-period-picker.properties";
+import { styles } from "./ftds-period-picker.styles";
+import { ftPeriodI18nContext, periodPickerDefaultMessages, } from "./FtdsPeriodPickerMessages";
+import { FtdsRadio, FtdsRadioGroup, } from "@fluid-topics/ftds-radio";
+import { datesLastInstant, FtPeriodsBuiltin, } from "./FtPeriodsBuiltin";
+import { FtdsTextInput } from "@fluid-topics/ftds-text-input";
+import { FtdsIcon } from "@fluid-topics/ftds-icon";
+import { FtdsFloatingMenu } from "@fluid-topics/ftds-floating-menu";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+export class FtPeriodChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super("change", { detail });
+    }
+}
+export class FtdsPeriodPicker extends withI18n(toFtInput(FtdsBase)) {
+    constructor() {
+        super();
+        this.dateInputsVisibility = FtdsPeriodPickerDateInputsVisibility.dateInputsAlwaysVisible;
+        this.customPeriodLabel = "";
+        this.periods = [FtPeriodsBuiltin.anyTime()];
+        this.locale = "en-US";
+        this.periodOptions = [];
+        this.addI18nContext(ftPeriodI18nContext, periodPickerDefaultMessages);
+        this.errorRules = [
+            (v) => this.dateLimitRule(v === null || v === void 0 ? void 0 : v.from, this.minDate, true),
+            (v) => this.dateLimitRule(v === null || v === void 0 ? void 0 : v.to, this.minDate, true),
+            (v) => this.dateLimitRule(v === null || v === void 0 ? void 0 : v.from, this.maxDate, false),
+            (v) => this.dateLimitRule(v === null || v === void 0 ? void 0 : v.to, this.maxDate, false),
+            () => { var _a, _b; return this.dateCompareRule((_a = this.value) === null || _a === void 0 ? void 0 : _a.from, (_b = this.value) === null || _b === void 0 ? void 0 : _b.to); },
+        ];
+    }
+    willUpdate(props) {
+        super.willUpdate(props);
+        if (props.has("periods")) {
+            this.periodOptions = this.periods.map(({ key, label, selector }) => ({
+                key,
+                label: typeof label === "string" ? label : label(),
+                selector,
+            }));
+        }
+        if (this.defaultPeriod && !this.currentSelection) {
+            if (this.defaultPeriod.key == "custom") {
+                this.value = { from: this.defaultPeriod.from, to: this.defaultPeriod.to };
+                this.currentSelection = {
+                    key: "custom",
+                    label: this.customPeriodLabel,
+                    selector: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : {}; },
+                };
+            }
+            else {
+                const period = this.periodOptions.find((p) => { var _a; return p.key === ((_a = this.defaultPeriod) === null || _a === void 0 ? void 0 : _a.key); });
+                if (period) {
+                    this.value = period.selector();
+                    this.currentSelection = period;
+                }
+            }
+        }
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this.currentSelection) {
+            this.updatePeriodInputs();
+        }
+    }
+    render() {
+        var _a;
+        return html `
+            <div class="period-picker">
+                ${this.renderRadioOptions()}
+                ${when(((_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.key) == "custom" || this.dateInputsVisibility == FtdsPeriodPickerDateInputsVisibility.dateInputsAlwaysVisible, this.renderDateInputs.bind(this))}
+            </div>
+        `;
+    }
+    renderRadioOptions() {
+        var _a;
+        return html `
+            <ftds-radio-group @change=${(e) => this.onOptionChange(e)}
+                              @input=${(e) => e.stopPropagation()}
+                              @input-validated=${(e) => e.stopPropagation()}
+                              aria-label="${ftPeriodI18nContext.messages.pickAPeriod()}">
+                ${repeat(this.periodOptions, (option) => option.key, (option) => {
+            var _a;
+            return html `
+                        <ftds-radio value="${option.key}"
+                                    ?checked=${((_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.key) === option.key}>
+                            ${option.label}
+                        </ftds-radio>
+                    `;
+        })}
+                <ftds-radio value="custom"
+                            ?checked=${((_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.key) === "custom"}>
+                    ${this.customPeriodLabel}
+                </ftds-radio>
+            </ftds-radio-group>
+        `;
+    }
+    renderDateInputs() {
+        return html `
+            <ftds-text-input id="custom-period-from-date"
+                             type="date"
+                             label="${ftPeriodI18nContext.messages.from()}"
+                             .errorRules=${[
+            (v) => this.dateLimitRule(new Date(Date.parse(v)), this.minDate, true),
+            (v) => this.dateLimitRule(new Date(Date.parse(v)), this.maxDate, false),
+        ]}
+                             @input=${(e) => this.onCustomPeriodDateChange("from", e)}
+                             @input-validated=${(e) => e.stopPropagation()}></ftds-text-input>
+            <ftds-text-input id="custom-period-to-date"
+                             type="date"
+                             label="${ftPeriodI18nContext.messages.to()}"
+                             .errorRules=${[
+            (v) => this.dateLimitRule(new Date(Date.parse(v)), this.minDate, true),
+            (v) => this.dateLimitRule(new Date(Date.parse(v)), this.maxDate, false),
+            () => { var _a, _b; return this.dateCompareRule((_a = this.value) === null || _a === void 0 ? void 0 : _a.from, (_b = this.value) === null || _b === void 0 ? void 0 : _b.to); },
+        ]}
+                             @input=${(e) => this.onCustomPeriodDateChange("to", e)}
+                             @input-validated=${(e) => e.stopPropagation()}></ftds-text-input>
+        `;
+    }
+    dateLimitRule(date, limitDate, shouldBeLater) {
+        if (!date || isNaN(date.valueOf()) || !limitDate) {
+            return true;
+        }
+        if ((shouldBeLater && date >= limitDate) || (!shouldBeLater && date <= limitDate)) {
+            return true;
+        }
+        const limitDateStr = DateFormatter.format(limitDate, this.locale, false, false, false);
+        return shouldBeLater
+            ? ftPeriodI18nContext.messages.mustNotBeEarlierThan(limitDateStr)
+            : ftPeriodI18nContext.messages.mustNotBeLaterThan(limitDateStr);
+    }
+    dateCompareRule(fromDate, toDate) {
+        if (!fromDate || !toDate || fromDate <= toDate) {
+            return true;
+        }
+        return ftPeriodI18nContext.messages.fromDateMustBeBeforeToDate();
+    }
+    onOptionChange(e) {
+        e.stopPropagation();
+        if (e.detail === "custom") {
+            this.currentSelection = {
+                key: "custom",
+                label: this.customPeriodLabel,
+                selector: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : {}; },
+            };
+        }
+        else {
+            this.currentSelection = this.periodOptions.find((option) => option.key === e.detail);
+            this.value = this.currentSelection.selector();
+            this.triggerValidation();
+            if (this.dateInputsVisibility == FtdsPeriodPickerDateInputsVisibility.dateInputsAlwaysVisible) {
+                this.updatePeriodInputs();
+            }
+            this.triggerDateInputsValidation();
+        }
+        this.dispatchPeriodChange();
+    }
+    getInput(fromOrTo) {
+        return fromOrTo === "from"
+            ? this.renderRoot.querySelector("#custom-period-from-date")
+            : this.renderRoot.querySelector("#custom-period-to-date");
+    }
+    updatePeriodInputs() {
+        var _a, _b;
+        this.updateDateInputsValue((_a = this.value) === null || _a === void 0 ? void 0 : _a.from, this.getInput("from"));
+        this.updateDateInputsValue((_b = this.value) === null || _b === void 0 ? void 0 : _b.to, this.getInput("to"));
+    }
+    updateDateInputsValue(date, dateInput) {
+        if (!dateInput) {
+            return;
+        }
+        if (date) {
+            // the value provided to an HTML input of 'date' type must be in YYYY-MM-DD format
+            dateInput.value = date.toISOString().split("T")[0];
+        }
+        else {
+            dateInput.value = "";
+        }
+    }
+    onCustomPeriodDateChange(whichDate, e) {
+        var _a;
+        e.stopPropagation();
+        if (((_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.key) != "custom") {
+            this.currentSelection = {
+                key: "custom",
+                label: this.customPeriodLabel,
+                selector: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : {}; },
+            };
+        }
+        const value = e.currentTarget.value;
+        let date;
+        if (value) {
+            const dateValue = Date.parse(value);
+            if (isNaN(dateValue)) {
+                return;
+            }
+            date = new Date(dateValue);
+        }
+        this.value = {
+            ...this.value,
+            [whichDate]: date,
+        };
+        this.dispatchPeriodChange();
+        this.triggerValidation();
+        this.triggerDateInputsValidation();
+    }
+    triggerDateInputsValidation() {
+        var _a, _b;
+        (_a = this.getInput("from")) === null || _a === void 0 ? void 0 : _a.triggerValidation();
+        (_b = this.getInput("to")) === null || _b === void 0 ? void 0 : _b.triggerValidation();
+    }
+    dispatchPeriodChange() {
+        var _a, _b, _c;
+        this.dispatchEvent(new FtPeriodChangeEvent({
+            key: this.currentSelection.key,
+            from: (_a = this.value) === null || _a === void 0 ? void 0 : _a.from,
+            to: ((_b = this.value) === null || _b === void 0 ? void 0 : _b.to) ? datesLastInstant((_c = this.value) === null || _c === void 0 ? void 0 : _c.to) : undefined,
+        }));
+    }
+}
+FtdsPeriodPicker.elementDefinitions = {
+    "ftds-radio-group": FtdsRadioGroup,
+    "ftds-radio": FtdsRadio,
+    "ftds-text-input": FtdsTextInput,
+    "ftds-icon": FtdsIcon,
+    "ftds-floating-menu": FtdsFloatingMenu,
+    "ftds-button": FtdsButton,
+};
+// language=CSS
+FtdsPeriodPicker.styles = [
+    styles,
+];
+__decorate([
+    property()
+], FtdsPeriodPicker.prototype, "dateInputsVisibility", void 0);
+__decorate([
+    i18n(ftPeriodI18nContext.properties.custom())
+], FtdsPeriodPicker.prototype, "customPeriodLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], FtdsPeriodPicker.prototype, "periods", void 0);
+__decorate([
+    dateProperty()
+], FtdsPeriodPicker.prototype, "minDate", void 0);
+__decorate([
+    dateProperty()
+], FtdsPeriodPicker.prototype, "maxDate", void 0);
+__decorate([
+    property({ attribute: false })
+], FtdsPeriodPicker.prototype, "defaultPeriod", void 0);
+__decorate([
+    property()
+], FtdsPeriodPicker.prototype, "locale", void 0);
+__decorate([
+    state()
+], FtdsPeriodPicker.prototype, "currentSelection", void 0);
+__decorate([
+    state()
+], FtdsPeriodPicker.prototype, "periodOptions", void 0);
+__decorate([
+    query(".period-picker--main-panel")
+], FtdsPeriodPicker.prototype, "mainPanel", void 0);
+__decorate([
+    query("#custom-period-from-date")
+], FtdsPeriodPicker.prototype, "customPeriodFromDateInput", void 0);
+__decorate([
+    query("#custom-period-to-date")
+], FtdsPeriodPicker.prototype, "customPeriodToDateInput", void 0);
+__decorate([
+    query("ftds-radio-group")
+], FtdsPeriodPicker.prototype, "ftdsRadioGroup", void 0);