@loadsmart/miranda-wc 4.0.0-alpha.2 → 4.0.0-alpha.20

package/dist/components/checkbox/checkbox.d.ts

@@ -13,23 +13,27 @@ export declare class Checkbox extends FormComponent implements CheckboxProps {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
     static styles: import("lit").CSSResult[];
     static get properties(): {
-        checked: {
+        initialChecked: {
             type: BooleanConstructor;
-            reflect: boolean;
+            attribute: string;
         };
-        initialChecked: {
+        providedChecked: {
             type: BooleanConstructor;
+            reflect: boolean;
             attribute: string;
         };
-        indeterminate: {
+        providedIndeterminate: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: string;
         };
         value: {
             type: StringConstructor;
@@ -43,10 +47,23 @@ export declare class Checkbox extends FormComponent implements CheckboxProps {
      * Should the checkbox be checked initialluy or when the form it is in is reset.
      */
     initialChecked: CheckboxProps['initialChecked'];
+    /**
+     * We use a different property name internally so the react wrapper can still
+     * keep track of the property while we can use custom getter/setter to
+     * set and reflect the `checked` attribute.
+     */
+    providedChecked: CheckboxProps['checked'];
+    /**
+     * We use a different property name internally so we can still
+     * keep track of the property while we can use custom getter/setter to
+     * set and reflect the `indeterminate` attribute.
+     */
+    providedIndeterminate: CheckboxProps['indeterminate'];
     static define(): void;
     createRenderRoot(): DocumentFragment | HTMLElement;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    update(changedProperties: PropertyValues<this>): void;
     updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     get input(): HTMLInputElement | null;

package/dist/components/close-button/close-button.d.ts

@@ -12,6 +12,8 @@ export declare class CloseButton extends Component implements CloseButtonProps {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;

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

@@ -0,0 +1,71 @@
+import type { CalendarDateConstraint, CalendarDate } from './date';
+import type { CalendarSelection } from './date-picker.types';
+/**
+ * Status information for a calendar day in the renderable month grid.
+ */
+export interface CalendarDayStatus {
+    /** Whether the date is blocked/disabled by constraints */
+    blocked: boolean;
+    /** Whether the date appears faded (not part of the current month) */
+    faded: boolean;
+    /** Whether the date is today */
+    today: boolean;
+    /** Whether this date is selected */
+    selected: boolean;
+    /** Whether this date is the start of a selection range */
+    'selection-start': boolean;
+    /** Whether this date is the end of a selection range */
+    'selection-end': boolean;
+    /** Whether this date is part of a selection range (between start and end) */
+    selection: boolean;
+}
+/**
+ * Structure representing a single day in the calendar grid.
+ */
+export interface CalendarDay {
+    /** The calendar date object */
+    date: CalendarDate;
+    /** Calculated status flags for this day */
+    status: CalendarDayStatus;
+}
+/**
+ * Structure representing a renderable month with its calendar grid.
+ */
+export interface RenderableMonth {
+    /** The month number (0-based) */
+    month: number;
+    /** The year number */
+    year: number;
+    /** Days organized by week (array of weekly arrays) */
+    weeks: CalendarDay[][];
+}
+export declare function createCalendar(year: number, month: number, options?: {
+    selection?: CalendarSelection;
+    constraints?: CalendarDateConstraint[];
+    weekStartDay?: number;
+    amountOfMonths?: number;
+    focusedDayIndex?: number | null;
+}): {
+    year: number;
+    month: number;
+    months: RenderableMonth[];
+    days: CalendarDay[];
+    getReferenceTimestamp(): number;
+    setMonth(newMonth: number): /*elided*/ any;
+    setYear(newYear: number): /*elided*/ any;
+    setSelection(newSelection?: CalendarSelection | null): /*elided*/ any;
+    setConstraints(newConstraints: CalendarDateConstraint[]): /*elided*/ any;
+    setWeekStartDay(newWeekStartDay: number): /*elided*/ any;
+    nextMonth(): /*elided*/ any;
+    previousMonth(): /*elided*/ any;
+    setFocusedDayIndex(newFocusedDayIndex: number): /*elided*/ any;
+    getFocusedDayIndex(): number | null;
+    moveFocusedDayIndexBy(amount: number): /*elided*/ any;
+    getFocusedDayTimestamp(): number | null;
+    /**
+     * Reset the calendar to the selection date.
+     */
+    reset(): /*elided*/ any;
+    isDayBlocked(day: number | CalendarDate): boolean;
+};
+export type Calendar = ReturnType<typeof createCalendar>;

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';