@loadsmart/miranda-wc 3.24.3 → 4.0.0-alpha.10

package/dist/components/date-picker/date-formatter.d.ts

@@ -0,0 +1,55 @@
+import type { CalendarDate } from './date';
+export interface CalendarDateFormatter<T = string | number> {
+    format(date: CalendarDate): T;
+}
+/**
+ * Supported tokens:
+ *
+ *|                                | Token | Output                                    |
+ *| :----------------------------- | :---- | :---------------------------------------- |
+ *| Month                          | MM    | 01, 02, ..., 11, 12                       |
+ *|                                | MMM   | Jan, Feb, ..., Nov, Dec                   |
+ *|                                | MMMM  | January, February, ..., November,December |
+ *| Day of Month                   | D     | 1, 2, ..., 30, 31                         |
+ *| Day of Month with leading 0    | DD    | 01, 02, ..., 30, 31                       |
+ *| Day of week                    | ddd   | Sun, Mon, ... Fri, Sat                    |
+ *|                                | dddd  | Sunday, Monday, ..., Friday, Saturday     |
+ *| Year                           | YYYY  | 1970, 1971, ..., 2029, 2030               |
+ *| Hour                           | HH    | 00, 01, ..., 22, 23                       |
+ *|                                | hh    | 00, 01, ..., 11, 12                       |
+ *| Minute                         | mm    | 01, 02, ..., 58, 59                       |
+ *| Seconds                        | ss    | 01, 02, ..., 58, 59                       |
+ *| Post or ante meridiem          | a     | am, pm                                    |
+ *|                                | A     | AM, PM                                    |
+ *| Ordinal numbers                | o     | 1st, 2nd, 3rd, ..., 10th                  |
+ *
+ * Any character that is not a date token is treated as a separator.
+ * For example: "MM/DD/YYYY", "DD-MM-YYYY", "YYYY.MM.DD", "MM,DD|YYYY"
+ *
+ * @param format
+ * @returns
+ */
+export interface Token {
+    value: string;
+    type: 'token' | 'separator';
+}
+export declare function tokenizer(format: string): Token[];
+type FormatOptions = {
+    locale?: string;
+    timeZone?: string;
+};
+/**
+ * This helper provides a convenient layer on top of `Intl.DateTimeFormat`,
+ * using common tokens (based on `momentjs`) to format dates.
+ */
+export declare function createCalendarDateFormatter(format: 'timestamp', options?: FormatOptions): CalendarDateFormatter<number>;
+export declare function createCalendarDateFormatter(format: 'short-iso' | 'full-iso', options?: FormatOptions): CalendarDateFormatter<string>;
+export declare function createCalendarDateFormatter(format: string, options?: FormatOptions): CalendarDateFormatter<string>;
+export declare const DateIDFormatter: {
+    format(value: number | CalendarDate | null): string;
+};
+export declare const MMMDoYYYYFormatter: CalendarDateFormatter<string>;
+export declare const MMMMFormatter: CalendarDateFormatter<string>;
+export declare const ShortISOFormatter: CalendarDateFormatter<string>;
+export declare const MMDDYYYYFormatter: CalendarDateFormatter<string>;
+export {};

package/dist/components/date-picker/date-parser.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarDate } from './date';
+export declare function parseDate(value: string, referenceDate?: CalendarDate | null): CalendarDate | null;
+export declare function parseDateRange(value: string): [CalendarDate | null, CalendarDate | null] | null;
+export declare function fromAttribute(value: number | string | [string | number | null, string | number | null] | null): [number | null, number | null];

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,354 @@
+import type { PropertyValues, TemplateResult } from 'lit';
+import { Popover } from '../popover';
+import type { Calendar } from './date-calendar';
+import type { CalendarDateConstraint } from './date';
+import type { CalendarDateFormatter } from './date-formatter';
+import type { DatePickerReturnFormat } from './date-picker.types';
+import type { FieldStatus } from '../field';
+import type { PopoverProps } from '../popover';
+import '../button';
+import '../close-button';
+import '../layout/group';
+import '../layout/stack';
+import '../select';
+import '../text';
+declare const WEEK_DAYS: {
+    readonly sunday: {
+        readonly abbr: "Su";
+        readonly label: "Sunday";
+    };
+    readonly monday: {
+        readonly abbr: "Mo";
+        readonly label: "Monday";
+    };
+    readonly tuesday: {
+        readonly abbr: "Tu";
+        readonly label: "Tuesday";
+    };
+    readonly wednesday: {
+        readonly abbr: "We";
+        readonly label: "Wednesday";
+    };
+    readonly thursday: {
+        readonly abbr: "Th";
+        readonly label: "Thursday";
+    };
+    readonly friday: {
+        readonly abbr: "Fr";
+        readonly label: "Friday";
+    };
+    readonly saturday: {
+        readonly abbr: "Sa";
+        readonly label: "Saturday";
+    };
+};
+export type WeekDay = keyof typeof WEEK_DAYS;
+declare const MONTHS: {
+    january: {
+        abbr: string;
+        label: string;
+    };
+    february: {
+        abbr: string;
+        label: string;
+    };
+    march: {
+        abbr: string;
+        label: string;
+    };
+    april: {
+        abbr: string;
+        label: string;
+    };
+    may: {
+        abbr: string;
+        label: string;
+    };
+    june: {
+        abbr: string;
+        label: string;
+    };
+    july: {
+        abbr: string;
+        label: string;
+    };
+    august: {
+        abbr: string;
+        label: string;
+    };
+    september: {
+        abbr: string;
+        label: string;
+    };
+    october: {
+        abbr: string;
+        label: string;
+    };
+    november: {
+        abbr: string;
+        label: string;
+    };
+    december: {
+        abbr: string;
+        label: string;
+    };
+};
+export type MonthDefinition = keyof typeof MONTHS;
+export interface DatePickerProps extends PopoverProps {
+    clearable?: boolean;
+    constraints?: CalendarDateConstraint[];
+    disabled?: boolean;
+    format?: string;
+    initialValue?: number | string | null;
+    label?: string;
+    months?: Record<MonthDefinition, {
+        abbr: string;
+        label: string;
+    }>;
+    name?: string;
+    placeholder?: string;
+    presets?: string[] | (string | {
+        label: string;
+        prompt: string;
+    })[];
+    returnFormat?: DatePickerReturnFormat;
+    status?: FieldStatus;
+    value?: number | string | [string | number | null, string | number | null] | null;
+    weekDays?: Record<WeekDay, {
+        abbr: string;
+        label: string;
+    }>;
+    weekStart?: WeekDay;
+    onchange?: GlobalEventHandlers['onchange'];
+    onclear?: () => void;
+}
+declare const DatePicker_base: import("../../utils/types").Constructor<import("../component/form-component.mixin").WithFormComponentMixinInterface> & typeof Popover;
+export declare class DatePicker extends DatePicker_base implements DatePickerProps {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[][];
+    static get properties(): {
+        clearable: {
+            type: BooleanConstructor;
+        };
+        constraints: {};
+        disabled: {
+            type: BooleanConstructor;
+        };
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        formatter: {};
+        initialValue: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        months: {
+            type: ObjectConstructor;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        onchange: {};
+        placeholder: {
+            type: StringConstructor;
+        };
+        presets: {
+            type: ArrayConstructor;
+        };
+        providedValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        returnFormat: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        status: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        weekDays: {
+            type: ObjectConstructor;
+            attribute: string;
+        };
+        weekStart: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        calendar: {
+            state: boolean;
+        };
+        selection: {
+            state: boolean;
+        };
+        position: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        asPopover: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+    };
+    /**
+     * Whether the date picker is clearable.
+     */
+    clearable: DatePickerProps['clearable'];
+    /**
+     * Constraints to apply to the date picker's calendar.
+     */
+    constraints: DatePickerProps['constraints'];
+    /**
+     * Should the picker be disabled.
+     */
+    disabled: DatePickerProps['disabled'];
+    /**
+     * Date format.
+     */
+    format: DatePickerProps['format'];
+    /**
+     * Value that will be selected by default on initialization and form reset.
+     */
+    initialValue: DatePickerProps['initialValue'];
+    /**
+     * Label for the date picker input field.
+     */
+    label: DatePickerProps['label'];
+    /**
+     * Array with the months to be used to render the calendar.
+     */
+    months: DatePickerProps['months'];
+    /**
+     * Name that will represent this control in the form.
+     */
+    name: DatePickerProps['name'];
+    /**
+     * Helper text to guide the user when there's no date selected.
+     */
+    placeholder: DatePickerProps['placeholder'];
+    /**
+     * Date selection presets (used to offer quick date selection options).
+     */
+    presets: DatePickerProps['presets'];
+    /**
+     * Current value.
+     */
+    providedValue: DatePickerProps['value'];
+    /**
+     * The format of the date to return when the date picker is used as a form control.
+     *
+     * - `full-iso`: Returns the date in the format `YYYY-MM-DDTHH:mm:ss.sss`.
+     * - `short-iso`: Returns the date in the format `YYYY-MM-DD`.
+     * - `timestamp`: Returns the date as a timestamp.
+     *
+     * @default 'full-iso'
+     */
+    returnFormat: DatePickerProps['returnFormat'];
+    /**
+     * Validation status type.
+     */
+    status: DatePickerProps['status'];
+    /**
+     * Array with the week days to be used to render the calendar.
+     */
+    weekDays: DatePickerProps['weekDays'];
+    /**
+     * The start day of the week used to render the calendar.
+     * @default 'sunday'
+     */
+    weekStart: DatePickerProps['weekStart'];
+    /**
+     * Current selection.
+     */
+    selection: [number | null, number | null];
+    calendar: Calendar;
+    private field;
+    /**
+     * Date formatter for the display value.
+     */
+    protected displayValueFormatter: CalendarDateFormatter<string>;
+    /**
+     * Date formatter for the form value.
+     */
+    protected formValueFormatter: CalendarDateFormatter;
+    static define(): void;
+    constructor();
+    createRenderRoot(): DocumentFragment | HTMLElement;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    update(changedProperties: PropertyValues<this>): void;
+    getReferenceElement(): HTMLInputElement | null;
+    getFloatingElement(): HTMLElement | null;
+    getArrowElement(): null;
+    getFloatingOffset(): {
+        crossAxis: number;
+        mainAxis: number;
+    };
+    protected renderPicker(): TemplateResult<1>;
+    renderCalendar(): TemplateResult<1>;
+    renderActions(): symbol | TemplateResult<1>;
+    protected renderPresets(): symbol | TemplateResult<1>;
+    protected renderFooter(): symbol | TemplateResult<1>;
+    render(): TemplateResult<1>;
+    get triggers(): HTMLInputElement[];
+    get dialogMessage(): HTMLDivElement | null;
+    get queried(): HTMLButtonElement[];
+    get value(): number | string | [string | number | null, string | number | null] | null;
+    set value(value: number | string | [string | number | null, string | number | null] | null);
+    /**
+     * Imperatively pick date/date range.
+     * This is here to be used especifically for testing purposes.
+     */
+    pick: (value: number | [number | null, number | null]) => void;
+    clear: () => Promise<void>;
+    expand: (args?: {
+        focusOnTrigger?: boolean;
+    }) => Promise<void>;
+    collapse(args?: {
+        focusOnTrigger?: boolean;
+    }): Promise<void>;
+    /**
+     * Toggle select menu.
+     */
+    toggle: (args?: {
+        focusOnTrigger?: boolean;
+    }) => Promise<void>;
+    protected initialize(value?: string | null): void;
+    protected getSelected: () => HTMLButtonElement | null;
+    protected handleDayClick: (timestamp: number) => void;
+    protected handleValueChange: (value: [number | null, number | null] | null) => boolean;
+    protected handleClear: () => void;
+    protected setDialogMessage: (message: string) => void;
+    protected clearDialogMessage: () => void;
+    protected formatDateValue: (value: number | null) => string;
+    protected updatePicker: () => void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Select date by value.
+     * This can also be used for testing purposes.
+     */
+    pickDate: (value?: number | null) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-date-picker': DatePicker;
+    }
+}
+export {};

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TRIGGER_SELECTOR = "[aria-haspopup=\"dialog\"]";
+export declare const MENU_SELECTOR = "[role=\"dialog\"]";
+export declare function datePickerStyles(): (import("lit").CSSResult | import("lit").CSSResult[])[];

package/dist/components/date-picker/date-picker.types.d.ts

@@ -0,0 +1,14 @@
+export type CalendarSelection = [
+    string | number | null,
+    string | number | null
+];
+/**
+ * The format of the date to return when the date picker is used as a form control.
+ *
+ * - `full-iso`: Returns the date in the format `YYYY-MM-DDTHH:mm:ss.sss`.
+ * - `short-iso`: Returns the date in the format `YYYY-MM-DD`.
+ * - `timestamp`: Returns the date as a timestamp.
+ *
+ * @default 'full-iso'
+ */
+export type DatePickerReturnFormat = 'full-iso' | 'short-iso' | 'timestamp';

package/dist/components/date-picker/date-range-picker.d.ts

@@ -0,0 +1,135 @@
+import { nothing } from 'lit';
+import { DatePicker } from './date-picker';
+import type { DatePickerProps } from './date-picker';
+import '../layout';
+import '../dropdown';
+export interface DateRangePickerProps extends DatePickerProps {
+    nameStart?: string;
+    nameEnd?: string;
+}
+export declare const PRESETS: string[];
+export declare class DateRangePicker extends DatePicker implements DateRangePickerProps {
+    #private;
+    static get properties(): {
+        nameEnd: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        nameStart: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        clearable: {
+            type: BooleanConstructor;
+        };
+        constraints: {};
+        disabled: {
+            type: BooleanConstructor;
+        };
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        formatter: {};
+        initialValue: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        months: {
+            type: ObjectConstructor;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        onchange: {};
+        placeholder: {
+            type: StringConstructor;
+        };
+        presets: {
+            type: ArrayConstructor;
+        };
+        providedValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        returnFormat: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        status: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        weekDays: {
+            type: ObjectConstructor;
+            attribute: string;
+        };
+        weekStart: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        calendar: {
+            state: boolean;
+        };
+        selection: {
+            state: boolean;
+        };
+        position: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        asPopover: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+    };
+    /**
+     * The name of the end date value when the date range picker is used as a form control.
+     */
+    nameEnd: DateRangePickerProps['nameEnd'];
+    /**
+     * The name of the start date value when the date range picker is used as a form control.
+     */
+    nameStart: DateRangePickerProps['nameStart'];
+    private picking;
+    static define(): void;
+    renderPicker(): import("lit-html").TemplateResult<1>;
+    renderPresets(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderActions(): import("lit-html").TemplateResult<1>;
+    renderFooter(): import("lit-html").TemplateResult<1> | typeof nothing;
+    get value(): number | string | [string | number | null, string | number | null] | null;
+    set value(value: number | string | [string | number | null, string | number | null] | null);
+    pickDateRange: (value: [number | null, number | null]) => void;
+    pickDate: () => never;
+    protected initialize(value?: string | null): void;
+    collapse(args?: {
+        focusOnTrigger?: boolean;
+    }): Promise<void>;
+    getSelected: () => HTMLButtonElement | null;
+    handleDayClick: (timestamp: number) => void;
+    handleDone: () => void;
+    handleValueChange: (value: [number | null, number | null] | null) => boolean;
+    updatePicker: () => void;
+    formDisabledCallback(disabled: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-date-range-picker': DateRangePicker;
+    }
+}

package/dist/components/date-picker/date.d.ts

@@ -0,0 +1,130 @@
+import type { CalendarDateFormatter } from './date-formatter';
+export declare function padded(value: number | string, maxLength?: number): string;
+export type DateHelperOptions = {
+    normalize?: boolean;
+};
+export type InputDate = string | number | Date;
+export type Unit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+export type Operator = '>=' | '>' | '=' | '<' | '<=';
+export type DateConstraint = InputDate | [InputDate, InputDate] | [null, InputDate] | [InputDate, null];
+export type FunctionConstraint = (day: CalendarDate) => boolean;
+export type CalendarDateConstraint = DateConstraint | FunctionConstraint;
+export interface CalendarDate {
+    /**
+     * Get `Date` object representing this date.
+     */
+    get(): Date;
+    /**
+     * Get the year using Universal Coordinated Time (UTC).
+     */
+    getYear(): number;
+    /**
+     * Gets the month using Universal Coordinated Time (UTC).
+     */
+    getMonth(): number;
+    /**
+     * Get the day-of-the-month, using Universal Coordinated Time (UTC).
+     */
+    getDate(): number;
+    /**
+     * Get the time value in milliseconds.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getTime(): number;
+    /**
+     * Get the day of the week.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getWeekday(): number;
+    /**
+     * Get the hours value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getHours(): number;
+    /**
+     * Get the minutes value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     */
+    getMinutes(): number;
+    /**
+     * Get the seconds value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getSeconds(): number;
+    /**
+     * Get the milliseconds value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getMilliseconds(): number;
+    /**
+     * Check if the current date matches **at least one** of the provided constraints.
+     *
+     * [!] Be aware that all dates in this comparison will be normalized to 12:00:00 (UTC).
+     */
+    matches(...constraints: CalendarDateConstraint[]): boolean;
+    /**
+     * Set the given `value` to the `unit` property of this instance.
+     */
+    set(units: Partial<{
+        [key in Unit]: number;
+    }>): CalendarDate;
+    /**
+     * Return a copy of this instance, adding the given `value` to the `unit` property.
+     */
+    add(unit: Unit, value: number): CalendarDate;
+    /**
+     * Return a copy of this instance, subtracting the given `value` from the `unit` property.
+     */
+    subtract(unit: Unit, value: number): CalendarDate;
+    /**
+     * Compare this date with the given `other`.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     */
+    is(operator: Operator, other: CalendarDate, precision?: string): boolean;
+    /**
+     * Format this date using the given formatter.
+     */
+    format<T>(formatter: CalendarDateFormatter<T>): T;
+    /**
+     * Return this date as a string value in ISO format.
+     */
+    toString(): string;
+    /**
+     * Return this date as a string value in ISO format.
+     */
+    toLocaleDateString(locales?: Intl.LocalesArgument, formatOptions?: Intl.DateTimeFormatOptions): string;
+    getOptions(): DateHelperOptions;
+}
+/**
+ * Get the comparable date for the given date and precision. It essentially
+ * zeroes out the given precision.
+ */
+export declare function getComparableDate(date: Date, precision?: Unit): number;
+export declare class InvalidDateConstraintError extends Error {
+}
+export declare class InvalidComparisonOperatorError extends Error {
+    constructor(operator: string);
+}
+export declare function createCalendarDate(dateArg?: InputDate | null): CalendarDate;
+export declare const TODAY: CalendarDate;
+export declare const MIN_SUPPORTED_DATE: CalendarDate;
+export declare const MAX_SUPPORTED_DATE: CalendarDate;