@fluid-topics/ftds-period-picker 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system period picker component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-period-picker
+yarn add @fluid-topics/ftds-period-picker
+```
+
+## Usage
+
+```typescript
+import {html} from "lit"
+import "@fluid-topics/ftds-period-picker"
+
+function render() {
+    return html` <ftds-period-picker foo="bar"></ftds-period-picker> `
+}
+```

package/build/FtPeriodsBuiltin.d.ts

@@ -0,0 +1,21 @@
+import { FtPeriod, FtPeriodPickerConfigOption } from "./ftds-period-picker.properties";
+export declare const nHoursAgo: (n: number) => Date;
+export declare const nDaysAgo: (n: number) => Date;
+export declare const lastNMondays: (n: number) => Date;
+export declare const lastNMonthBeginnings: (n: number) => Date;
+export declare const lastNYearBeginnings: (n: number) => Date;
+export declare const datesLastInstant: (date: Date) => Date;
+export declare const todaysLastInstant: () => Date;
+export declare class FtPeriodsBuiltin {
+    static anyTime: (customLabel?: string) => FtPeriodPickerConfigOption;
+    static lastNhours: (n: number, customLabel?: string) => FtPeriodPickerConfigOption;
+    static lastNdays: (n: number, customLabel?: string) => FtPeriodPickerConfigOption;
+    static today: (customLabel?: string) => FtPeriodPickerConfigOption;
+    static thisCalendarWeek: (customLabel?: string) => FtPeriodPickerConfigOption;
+    static lastNCalendarWeeks: (n: number, customLabel?: string) => FtPeriodPickerConfigOption;
+    static thisCalendarMonth: (customLabel?: string) => FtPeriodPickerConfigOption;
+    static lastNCalendarMonths: (n: number, customLabel?: string) => FtPeriodPickerConfigOption;
+    static thisCalendarYear: (customLabel?: string) => FtPeriodPickerConfigOption;
+    static lastNCalendarYears: (n: number, customLabel?: string) => FtPeriodPickerConfigOption;
+    static custom: (key: string, label: string, selector: () => FtPeriod) => FtPeriodPickerConfigOption;
+}

package/build/FtPeriodsBuiltin.js

@@ -0,0 +1,87 @@
+import { ftPeriodI18nContext } from "./FtdsPeriodPickerMessages";
+export const nHoursAgo = (n) => (new Date(Date.now() - n * 60 * 60 * 1000));
+export const nDaysAgo = (n) => {
+    const d = new Date();
+    d.setDate(d.getDate() - n);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+export const lastNMondays = (n) => {
+    const d = new Date();
+    d.setDate(d.getDate() - d.getDay() - 7 * n);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+export const lastNMonthBeginnings = (n) => {
+    const d = new Date();
+    d.setMonth(d.getMonth() - n, 1);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+export const lastNYearBeginnings = (n) => {
+    const d = new Date();
+    d.setFullYear(d.getFullYear() - n, 0, 1);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+export const datesLastInstant = (date) => {
+    const d = new Date(date);
+    d.setHours(23, 59, 59, 999);
+    return d;
+};
+export const todaysLastInstant = () => datesLastInstant(new Date());
+export class FtPeriodsBuiltin {
+}
+FtPeriodsBuiltin.anyTime = (customLabel) => ({
+    key: "anyTime",
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.anyTime()),
+    selector: () => ({}),
+});
+FtPeriodsBuiltin.lastNhours = (n, customLabel) => ({
+    key: `last${n}hours`,
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.lastNHours(n)),
+    selector: () => ({ from: nHoursAgo(n), to: todaysLastInstant() }),
+});
+FtPeriodsBuiltin.lastNdays = (n, customLabel) => ({
+    key: `last${n}days`,
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.lastNDays(n)),
+    selector: () => ({ from: nDaysAgo(n), to: todaysLastInstant() }),
+});
+FtPeriodsBuiltin.today = (customLabel) => ({
+    key: "today",
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.today()),
+    selector: () => ({ from: nDaysAgo(0), to: todaysLastInstant() }),
+});
+FtPeriodsBuiltin.thisCalendarWeek = (customLabel) => ({
+    key: "thisCalendarWeek",
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.thisCalendarWeek()),
+    selector: () => ({ from: lastNMondays(0), to: todaysLastInstant() }),
+});
+FtPeriodsBuiltin.lastNCalendarWeeks = (n, customLabel) => ({
+    key: `last${n}CalendarWeeks`,
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.lastNCalendarWeeks(n)),
+    selector: () => ({ from: lastNMondays(n), to: lastNMondays(0) }),
+});
+FtPeriodsBuiltin.thisCalendarMonth = (customLabel) => ({
+    key: "thisCalendarMonth",
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.thisCalendarMonth()),
+    selector: () => ({ from: lastNMonthBeginnings(0), to: todaysLastInstant() }),
+});
+FtPeriodsBuiltin.lastNCalendarMonths = (n, customLabel) => ({
+    key: `last${n}CalendarMonth`,
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.lastNCalendarMonths(n)),
+    selector: () => ({ from: lastNMonthBeginnings(n), to: lastNMonthBeginnings(0) }),
+});
+FtPeriodsBuiltin.thisCalendarYear = (customLabel) => ({
+    key: "thisCalendarYear",
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.thisCalendarYear()),
+    selector: () => ({ from: lastNYearBeginnings(0), to: todaysLastInstant() }),
+});
+FtPeriodsBuiltin.lastNCalendarYears = (n, customLabel) => ({
+    key: `last${n}CalendarYears`,
+    label: customLabel !== null && customLabel !== void 0 ? customLabel : (() => ftPeriodI18nContext.messages.lastNCalendarYears(n)),
+    selector: () => ({ from: lastNYearBeginnings(n), to: lastNYearBeginnings(0) }),
+});
+FtPeriodsBuiltin.custom = (key, label, selector) => ({
+    key, label, selector,
+});

package/build/FtdsPeriodPickerMessages.d.ts

@@ -0,0 +1,29 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtdsPeriodPickerMessages extends I18nMessages {
+    anyTime(): string;
+    lastNHours(n: number): string;
+    lastNDays(n: number): string;
+    fromDate(date: string): string;
+    toDate(date: string): string;
+    fromToDates(from: string, to: string): string;
+    custom(): string;
+    from(): string;
+    to(): string;
+    today(): string;
+    thisCalendarWeek(): string;
+    lastNCalendarWeeks(n: number): string;
+    thisCalendarMonth(): string;
+    lastNCalendarMonths(n: number): string;
+    thisCalendarYear(): string;
+    lastNCalendarYears(n: number): string;
+    apply(): string;
+    expand(): string;
+    cancel(): string;
+    mustNotBeEarlierThan(date: string): string;
+    mustNotBeLaterThan(date: string): string;
+    fromDateMustBeBeforeToDate(): string;
+    pickAPeriod(): string;
+    calendarIconLabel(): string;
+}
+export declare const ftPeriodI18nContext: I18nMessageContext<FtdsPeriodPickerMessages>;
+export declare const periodPickerDefaultMessages: DefaultI18nMessages<FtdsPeriodPickerMessages>;

package/build/FtdsPeriodPickerMessages.js

@@ -0,0 +1,33 @@
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n";
+export const ftPeriodI18nContext = I18nMessageContext.build("ftPeriodPicker");
+export const periodPickerDefaultMessages = {
+    "anyTime": "Any time",
+    "lastNHours[\\=1]": "Last hour",
+    "lastNHours": "Last {0} hours",
+    "lastNDays[\\=1]": "Last day",
+    "lastNDays": "Last {0} days",
+    "fromDate": "From {0}",
+    "toDate": "Until {0}",
+    "fromToDates": "From {0} to {1}",
+    "custom": "Custom",
+    "from": "From",
+    "to": "To",
+    "today": "Today",
+    "thisCalendarWeek": "This week",
+    "lastNCalendarWeeks[\\=1]": "Last week",
+    "lastNCalendarWeeks": "Last {0} weeks",
+    "thisCalendarMonth": "This month",
+    "lastNCalendarMonths[\\=1]": "Last month",
+    "lastNCalendarMonths": "Last {0} months",
+    "thisCalendarYear": "This year",
+    "lastNCalendarYears[\\=1]": "Last year",
+    "lastNCalendarYears": "Last {0} years",
+    "apply": "Apply",
+    "expand": "Expand",
+    "cancel": "Cancel",
+    "mustNotBeEarlierThan": "Date must not be earlier than {0}",
+    "mustNotBeLaterThan": "Date must not be later than {0}",
+    "fromDateMustBeBeforeToDate": "From date must be before the to date.",
+    "pickAPeriod": "Pick a period",
+    "calendarIconLabel": "Calendar",
+};

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,7 @@
+import { FtdsPeriodPicker } from "./ftds-period-picker";
+import { FtdsPeriodPickerInSelect } from "./ftds-period-picker-in-select";
+declare const _default: {
+    "ftds-period-picker": typeof FtdsPeriodPicker;
+    "ftds-period-picker-in-select": typeof FtdsPeriodPickerInSelect;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,6 @@
+import { FtdsPeriodPicker } from "./ftds-period-picker";
+import { FtdsPeriodPickerInSelect } from "./ftds-period-picker-in-select";
+export default {
+    "ftds-period-picker": FtdsPeriodPicker,
+    "ftds-period-picker-in-select": FtdsPeriodPickerInSelect,
+};

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

@@ -0,0 +1,60 @@
+import { FtdsPeriodPickerInSelectProperties } from "./ftds-period-picker-in-select.properties";
+import { PropertyValues } from "lit";
+import { FtdsPeriodPicker } from "./ftds-period-picker";
+import { FtInputLabel } from "@fluid-topics/ft-input-label";
+import { FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtdsPeriodPickerDateInputsVisibility, FtdsPeriodPickerInSelectDisplayMode, FtPeriod, FtPeriodPickerConfigOption, FtPeriodPickerOption, FtPeriodSelection } from "./ftds-period-picker.properties";
+import { FtdsFloatingMenu } from "@fluid-topics/ftds-floating-menu";
+import { FtdsIcon } from "@fluid-topics/ftds-icon";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { FtdsBaseInput } from "@fluid-topics/ftds-base-input";
+declare const FtdsPeriodPickerInSelect_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 FtdsPeriodPickerInSelect extends FtdsPeriodPickerInSelect_base implements FtdsPeriodPickerInSelectProperties {
+    static elementDefinitions: {
+        "ftds-floating-menu": typeof FtdsFloatingMenu;
+        "ft-input-label": typeof FtInputLabel;
+        "ftds-icon": typeof FtdsIcon;
+        "ftds-button": typeof FtdsButton;
+        "ftds-period-picker": typeof FtdsPeriodPicker;
+        "ftds-base-input": typeof FtdsBaseInput;
+    };
+    static styles: import("lit").CSSResult[];
+    dateInputsVisibility: FtdsPeriodPickerDateInputsVisibility;
+    displayMode: FtdsPeriodPickerInSelectDisplayMode;
+    label: string;
+    customPeriodLabel: string;
+    defaultPeriod?: FtPeriodSelection;
+    /** @deprecated Use defaultPeriod */
+    defaultValueKey?: string;
+    periods: FtPeriodPickerConfigOption[];
+    minDate?: Date;
+    maxDate?: Date;
+    locale: string;
+    ftFloatingMenu?: FtdsFloatingMenu;
+    ftdsBaseInput?: FtdsBaseInput;
+    periodPickerMenu?: HTMLDivElement;
+    periodPickerTriggerButton?: HTMLDivElement;
+    ftdsPeriodPicker: FtdsPeriodPicker;
+    currentSelection?: FtPeriodPickerOption;
+    applyIsDisabled: boolean;
+    isMenuOpen: boolean;
+    private resizeObserver?;
+    get displayValue(): string;
+    constructor();
+    closeOnEscape(event: KeyboardEvent): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    firstUpdated(props: PropertyValues): void;
+    renderMenuTrigger(): import("lit-html").TemplateResult<1>;
+    renderMenuContent(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    private onFloatingMenuOpenStatus;
+    private onApply;
+    private onCancel;
+    private onPeriodValueChange;
+    private onPeriodPickerStatusChange;
+    private formatCustomDateRange;
+    triggerValidation(): void;
+}
+export {};

package/build/ftds-period-picker-in-select.js

@@ -0,0 +1,305 @@
+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 { FtdsPeriodPicker, FtPeriodChangeEvent, } from "./ftds-period-picker";
+import { FtInputLabel } from "@fluid-topics/ft-input-label";
+import { inSelectStyles } from "./ftds-period-picker-in-select.styles";
+import { property, state, } from "lit/decorators.js";
+import { ftPeriodI18nContext, periodPickerDefaultMessages, } from "./FtdsPeriodPickerMessages";
+import { DateFormatter, dateProperty, deepCopy, DesignSystemFamily, FtdsBase, Status as FtInput_Status, toFtInput, } from "@fluid-topics/ft-wc-utils";
+import { FtdsPeriodPickerDateInputsVisibility, FtdsPeriodPickerInSelectDisplayMode, } from "./ftds-period-picker.properties";
+import { i18n, withI18n, } from "@fluid-topics/ft-i18n";
+import { FtPeriodsBuiltin } from "./FtPeriodsBuiltin";
+import { query } from "lit/decorators/query.js";
+import { FtdsFloatingMenu, } from "@fluid-topics/ftds-floating-menu";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { FtdsBaseInput } from "@fluid-topics/ftds-base-input";
+export class FtdsPeriodPickerInSelect extends withI18n(toFtInput(FtdsBase)) {
+    get displayValue() {
+        var _a, _b, _c;
+        if (this.displayMode == FtdsPeriodPickerInSelectDisplayMode.labels) {
+            return ((_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.key) === "custom" ? this.formatCustomDateRange(this.currentSelection.selector()) : (_c = (_b = this.currentSelection) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "";
+        }
+        else {
+            return this.currentSelection ? this.formatCustomDateRange(this.currentSelection.selector()) : "";
+        }
+    }
+    constructor() {
+        super();
+        this.dateInputsVisibility = FtdsPeriodPickerDateInputsVisibility.dateInputsAlwaysVisible;
+        this.displayMode = FtdsPeriodPickerInSelectDisplayMode.labels;
+        this.label = "";
+        this.customPeriodLabel = "";
+        this.periods = [FtPeriodsBuiltin.anyTime()];
+        this.locale = "en-US";
+        this.applyIsDisabled = false;
+        this.isMenuOpen = false;
+        this.addI18nContext(ftPeriodI18nContext, periodPickerDefaultMessages);
+    }
+    closeOnEscape(event) {
+        var _a, _b;
+        if (event.key === "Escape") {
+            (_a = this.ftFloatingMenu) === null || _a === void 0 ? void 0 : _a.closeMenu();
+            (_b = this.periodPickerTriggerButton) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keydown", this.closeOnEscape);
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        this.removeEventListener("keydown", this.closeOnEscape);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    willUpdate() {
+        var _a, _b, _c, _d;
+        const defaultKey = (_b = (_a = this.defaultPeriod) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : this.defaultValueKey;
+        if (!this.currentSelection && defaultKey) {
+            if (defaultKey === "custom") {
+                this.value = { from: (_c = this.defaultPeriod) === null || _c === void 0 ? void 0 : _c.from, to: (_d = this.defaultPeriod) === null || _d === void 0 ? void 0 : _d.to };
+                this.currentSelection = {
+                    key: "custom",
+                    label: this.customPeriodLabel,
+                    selector: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : {}; },
+                };
+            }
+            else {
+                const initialValue = this.periods.find((period) => period.key === defaultKey);
+                if (initialValue) {
+                    this.value = initialValue.selector();
+                    this.currentSelection = {
+                        key: initialValue.key,
+                        label: typeof initialValue.label === "string" ? initialValue.label : initialValue.label(),
+                        selector: initialValue.selector,
+                    };
+                }
+            }
+        }
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this.ftdsBaseInput) {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.periodPickerMenu && this.ftdsBaseInput) {
+                    this.periodPickerMenu.style.width = this.ftdsBaseInput.clientWidth.toString() + "px";
+                }
+            });
+            this.resizeObserver.observe(this.ftdsBaseInput);
+        }
+    }
+    renderMenuTrigger() {
+        return html `
+            <ftds-base-input
+                slot="toggle"
+                class="period-picker--trigger"
+
+                .value=${this.displayValue}
+                .status=${this.status}
+                .size=${this.size}
+                ?disabled=${this.disabled}
+
+                .errorMessages=${this.errorMessages}
+                .warningMessages=${this.warningMessages}
+                .helperText=${this.helperText}
+
+                .label=${this.label}
+                ?hideLabel=${this.hideLabel}
+                ?raiseLabel=${this.focused || this.displayValue}
+
+                .prependIcon=${FtdsIcons.CALENDAR_RANGE}
+                .prependIconLabel=${ftPeriodI18nContext.messages.calendarIconLabel}
+
+                .appendIcon=${FtdsIcons.ANGLE_DOWN}
+                .appendIconLabel=${ftPeriodI18nContext.messages.expand}
+            >
+                <input name="${this.name}"
+                       type="button"
+                       class="period-picker--trigger-button"
+                       .value=${this.displayValue}
+                       readonly
+                       ?disabled=${this.disabled}
+                       aria-haspopup="dialog"
+                       aria-expanded="${this.isMenuOpen}"
+                       aria-controls="date-range-picker"
+                       aria-label="${ftPeriodI18nContext.messages.pickAPeriod()}"
+                       aria-describedby="${this.messagesForScreenReaderElementId}"
+                />
+
+                ${this.renderMessagesForScreenReader()}
+            </ftds-base-input>
+        `;
+    }
+    renderMenuContent() {
+        return html `
+            <div class="period-picker--menu"
+                 role="dialog"
+                 aria-modal="false"
+                 id="date-range-picker">
+                <ftds-period-picker .customPeriodLabel=${this.customPeriodLabel}
+                                    .periods=${this.periods}
+                                    .minDate=${this.minDate}
+                                    .maxDate=${this.maxDate}
+                                    .dateInputsVisibility=${this.dateInputsVisibility}
+                                    .defaultPeriod=${this.defaultPeriod}
+                                    .locale=${this.locale}
+                                    @change=${this.onPeriodValueChange}
+                                    @input-validated=${this.onPeriodPickerStatusChange}></ftds-period-picker>
+                <div class="period-picker--buttons-container">
+                    <ftds-button class="cancel-button"
+                                 tertiary
+                                 size="medium"
+                                 family="${DesignSystemFamily.neutral}"
+                                 icon="${FtdsIcons.XMARK}"
+                                 iconVariant="${FtdsIconVariants.regular}"
+                                 label="${ftPeriodI18nContext.messages.cancel()}"
+                                 @click=${this.onCancel}>
+                        ${ftPeriodI18nContext.messages.cancel()}
+                    </ftds-button>
+                    <ftds-button class="apply-button"
+                                 primary
+                                 size="medium" family="${DesignSystemFamily.brand}"
+                                 icon="${FtdsIcons.CHECK}"
+                                 iconVariant="${FtdsIconVariants.regular}"
+                                 label="${ftPeriodI18nContext.messages.apply()}"
+                                 @click=${this.onApply}
+                                 ?disabled=${this.applyIsDisabled}>
+                        ${ftPeriodI18nContext.messages.apply()}
+                    </ftds-button>
+                </div>
+            </div>
+        `;
+    }
+    render() {
+        return html `
+            <ftds-floating-menu class="period-picker--component"
+                                @open-status=${this.onFloatingMenuOpenStatus}>
+                ${this.renderMenuTrigger()}
+                ${this.renderMenuContent()}
+            </ftds-floating-menu>
+        `;
+    }
+    onFloatingMenuOpenStatus(e) {
+        e.stopPropagation();
+        if (e.detail.open) {
+            setTimeout(() => this.ftdsPeriodPicker.ftdsRadioGroup.focus(), 0);
+        }
+    }
+    onApply(e) {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        if (this.ftdsPeriodPicker) {
+            this.currentSelection = this.ftdsPeriodPicker.currentSelection;
+            this.value = deepCopy(this.ftdsPeriodPicker.value);
+            this.dispatchEvent(new FtPeriodChangeEvent({
+                key: (_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.key,
+                from: (_b = this.value) === null || _b === void 0 ? void 0 : _b.from,
+                to: (_c = this.value) === null || _c === void 0 ? void 0 : _c.to,
+            }));
+            this.triggerValidation();
+        }
+        (_d = this.ftFloatingMenu) === null || _d === void 0 ? void 0 : _d.closeMenu();
+        (_e = this.periodPickerTriggerButton) === null || _e === void 0 ? void 0 : _e.focus();
+    }
+    onCancel(e) {
+        var _a, _b;
+        e.stopPropagation();
+        (_a = this.ftFloatingMenu) === null || _a === void 0 ? void 0 : _a.closeMenu();
+        (_b = this.periodPickerTriggerButton) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    onPeriodValueChange(e) {
+        e.stopPropagation();
+    }
+    onPeriodPickerStatusChange(e) {
+        e.stopPropagation();
+        this.applyIsDisabled = e.detail.level === FtInput_Status.error;
+    }
+    formatCustomDateRange(datePeriod) {
+        const dateFromStr = datePeriod.from ? DateFormatter.format(datePeriod.from, this.locale, false, false, false) : "";
+        const dateToStr = datePeriod.to ? DateFormatter.format(datePeriod.to, this.locale, false, false, false) : "";
+        if (!datePeriod.from && !datePeriod.to) {
+            return ftPeriodI18nContext.messages.anyTime();
+        }
+        else if (datePeriod.from && !datePeriod.to) {
+            return ftPeriodI18nContext.messages.fromDate(dateFromStr);
+        }
+        else if (!datePeriod.from && datePeriod.to) {
+            return ftPeriodI18nContext.messages.toDate(dateToStr);
+        }
+        else {
+            return `${dateFromStr} - ${dateToStr}`;
+        }
+    }
+    triggerValidation() {
+        super.triggerValidation();
+    }
+}
+FtdsPeriodPickerInSelect.elementDefinitions = {
+    "ftds-floating-menu": FtdsFloatingMenu,
+    "ft-input-label": FtInputLabel,
+    "ftds-icon": FtdsIcon,
+    "ftds-button": FtdsButton,
+    "ftds-period-picker": FtdsPeriodPicker,
+    "ftds-base-input": FtdsBaseInput,
+};
+FtdsPeriodPickerInSelect.styles = [inSelectStyles];
+__decorate([
+    property()
+], FtdsPeriodPickerInSelect.prototype, "dateInputsVisibility", void 0);
+__decorate([
+    property()
+], FtdsPeriodPickerInSelect.prototype, "displayMode", void 0);
+__decorate([
+    i18n(ftPeriodI18nContext.properties.pickAPeriod())
+], FtdsPeriodPickerInSelect.prototype, "label", void 0);
+__decorate([
+    i18n(ftPeriodI18nContext.properties.custom())
+], FtdsPeriodPickerInSelect.prototype, "customPeriodLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], FtdsPeriodPickerInSelect.prototype, "defaultPeriod", void 0);
+__decorate([
+    property()
+], FtdsPeriodPickerInSelect.prototype, "defaultValueKey", void 0);
+__decorate([
+    property({ attribute: false })
+], FtdsPeriodPickerInSelect.prototype, "periods", void 0);
+__decorate([
+    dateProperty()
+], FtdsPeriodPickerInSelect.prototype, "minDate", void 0);
+__decorate([
+    dateProperty()
+], FtdsPeriodPickerInSelect.prototype, "maxDate", void 0);
+__decorate([
+    property()
+], FtdsPeriodPickerInSelect.prototype, "locale", void 0);
+__decorate([
+    query("ftds-floating-menu")
+], FtdsPeriodPickerInSelect.prototype, "ftFloatingMenu", void 0);
+__decorate([
+    query("ftds-base-input")
+], FtdsPeriodPickerInSelect.prototype, "ftdsBaseInput", void 0);
+__decorate([
+    query(".period-picker--menu")
+], FtdsPeriodPickerInSelect.prototype, "periodPickerMenu", void 0);
+__decorate([
+    query(".period-picker--trigger-button")
+], FtdsPeriodPickerInSelect.prototype, "periodPickerTriggerButton", void 0);
+__decorate([
+    query("ftds-period-picker")
+], FtdsPeriodPickerInSelect.prototype, "ftdsPeriodPicker", void 0);
+__decorate([
+    state()
+], FtdsPeriodPickerInSelect.prototype, "currentSelection", void 0);
+__decorate([
+    state()
+], FtdsPeriodPickerInSelect.prototype, "applyIsDisabled", void 0);
+__decorate([
+    state()
+], FtdsPeriodPickerInSelect.prototype, "isMenuOpen", void 0);

package/build/ftds-period-picker-in-select.properties.d.ts

@@ -0,0 +1,5 @@
+import { FtdsPeriodPickerInSelectDisplayMode, FtdsPeriodPickerProperties } from "./ftds-period-picker.properties";
+export interface FtdsPeriodPickerInSelectProperties extends FtdsPeriodPickerProperties {
+    displayMode: FtdsPeriodPickerInSelectDisplayMode;
+    defaultValueKey?: string;
+}

package/build/ftds-period-picker-in-select.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-period-picker-in-select.styles.d.ts

@@ -0,0 +1,3 @@
+import { dateRangePicker } from "@fluid-topics/design-system-variables";
+export { dateRangePicker as FtdsPeriodPickerCssVariables };
+export declare const inSelectStyles: import("lit").CSSResult;

package/build/ftds-period-picker-in-select.styles.js

@@ -0,0 +1,51 @@
+import { css } from "lit";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtdsFloatingMenuCssVariables } from "@fluid-topics/ftds-floating-menu";
+import { dateRangePicker } from "@fluid-topics/design-system-variables";
+export { dateRangePicker as FtdsPeriodPickerCssVariables };
+export const inSelectStyles = css `
+
+    .period-picker--component {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        ${setVariable(FtdsFloatingMenuCssVariables.maxWidth, "none")};
+        ${setVariable(FtdsFloatingMenuCssVariables.maxHeight, "none")};
+        ${setVariable(FtdsFloatingMenuCssVariables.zIndex, "11")};
+
+        .period-picker--trigger-button {
+            text-align: left;
+        }
+
+        .ftds-floating-menu--wrapper {
+            position: fixed;
+        }
+
+        .period-picker--menu {
+            padding-top: ${dateRangePicker.menuHorizontalPadding};
+            padding-bottom: ${dateRangePicker.menuHorizontalPadding};
+
+            padding-left: ${dateRangePicker.menuVerticalPadding};
+            padding-right: ${dateRangePicker.menuVerticalPadding};
+
+            box-sizing: border-box;
+
+            .period-picker--buttons-container {
+                display: flex;
+                margin-top: ${dateRangePicker.menuVerticalGap};
+
+                .cancel-button {
+                    margin-left: auto;
+                }
+
+                .apply-button {
+                    margin-left: ${dateRangePicker.menuButtonsVerticalGap};
+                }
+            }
+        }
+    }
+
+    input {
+        background-color: transparent;
+    }
+`;