@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/parts/overlay/OverlayPanel.d.ts

@@ -0,0 +1,123 @@
+import { type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { FocusContainer } from '../../core/container';
+import type { Control } from '../../core/control';
+import type { FormHost } from '../../components/form/form-host';
+import type { OverlayClosedEventArgs } from './overlay-closed-event-args';
+import type { OverlayCloseReason } from './overlay-close-reason';
+import type { OverlayClosingEventArgs } from './overlay-closing-event-args';
+import type { OverlayContainer } from './overlay-container';
+import type { OverlayEventArgs } from './overlay-event-args';
+import type { OverlayOpeningEventArgs } from './overlay-opening-event-args';
+import type { OverlayPanelProps } from './overlay-panel-props';
+/**
+ * What a bottom sheet, a drawer and an action sheet share: a panel that slides in over the page or
+ * over a container, with a scrim under it, a title and a close button, a content area and a footer.
+ * Modal, nothing around it can be used (it is made inert) and Tab stays inside. Escape, a press on
+ * the scrim and the browser's back close it (each an option); focus moves in when it opens and goes
+ * back when it closes. Every opening and closing asks first (`onOpening`, `onClosing`) and reports
+ * after (`onOpened`, `onClosed`). A subclass names its parts (`static overlayClass`), places the
+ * panel and moves it with the finger.
+ */
+export declare class OverlayPanel<TProps extends OverlayPanelProps = OverlayPanelProps> extends FocusContainer<HTMLDivElement, TProps> {
+    static elementTag: string;
+    /** The class of the root; its parts are `<class>__panel`, `__scrim`, `__header`, `__title`, `__body`, `__footer`. */
+    static overlayClass: string;
+    constructor(props?: IBaseProp<TProps>);
+    get title(): string;
+    set title(value: Bind<string>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** Whether it is open. Reactive. Setting it opens or closes it. */
+    get value(): boolean;
+    set value(value: Bind<boolean>);
+    get modal(): boolean;
+    set modal(value: Bind<boolean>);
+    /** Whether a scrim shows: as set, else when modal. */
+    get scrim(): boolean;
+    set scrim(value: Bind<boolean>);
+    /** What it opens over; a function given is read each time it opens. */
+    get container(): OverlayContainer;
+    set container(value: Bind<OverlayContainer>);
+    get content(): ComponentBase | null;
+    set content(value: Bind<ComponentBase | null>);
+    get footer(): ComponentBase | null;
+    set footer(value: Bind<ComponentBase | null>);
+    get showClose(): boolean;
+    set showClose(value: Bind<boolean>);
+    get closeOnEscape(): boolean;
+    set closeOnEscape(value: Bind<boolean>);
+    get closeOnScrim(): boolean;
+    set closeOnScrim(value: Bind<boolean>);
+    get closeOnBack(): boolean;
+    set closeOnBack(value: Bind<boolean>);
+    /** Whether focus moves in when it opens: as set, else when modal. */
+    get focusOnOpen(): boolean;
+    set focusOnOpen(value: Bind<boolean>);
+    get returnFocus(): boolean;
+    set returnFocus(value: Bind<boolean>);
+    /** Whether it is disposed when it closes: as set, else when `show` added it to its host. */
+    get disposeOnClose(): boolean;
+    set disposeOnClose(value: Bind<boolean>);
+    /** Reactive. */
+    get isOpen(): boolean;
+    /** The surface that slides in: the element with `role="dialog"`. */
+    get panelElement(): HTMLDivElement;
+    /** The content area, for code that places elements itself. */
+    get contentElement(): HTMLDivElement;
+    get onOpening(): MotifEvent<OverlayOpeningEventArgs>;
+    get onOpened(): MotifEvent<OverlayEventArgs>;
+    get onClosing(): MotifEvent<OverlayClosingEventArgs>;
+    get onClosed(): MotifEvent<OverlayClosedEventArgs>;
+    /** Opens it; `false` when an `onOpening` listener said no. Made with `new` and placed nowhere, it opens from the end of the page or in its container. */
+    open(): boolean;
+    /** Closes it; `false` when an `onClosing` listener kept it open. */
+    close(reason?: OverlayCloseReason): boolean;
+    toggle(): boolean;
+    /** Adds it to `host` (a component or the application) unless it sits somewhere already, and opens it; it is disposed when it closes. */
+    show(host: FormHost, disposeRef?: ComponentBase): boolean;
+    /** A panel is a root: controls around it do not disable it, and it runs Tab itself while modal. */
+    get parentControl(): Control | null;
+    restoreFocus(): boolean;
+    onMounted(): void;
+    protected get cyclesTab(): boolean;
+    /** The panel's header (title and close button), for a subclass that adds to it. */
+    protected get headerElement(): HTMLDivElement;
+    /** The element it opens over now (its container, else the page's root element). */
+    protected get overElement(): HTMLElement;
+    /** Before it slides in: the subclass places and sizes its panel. */
+    protected placePanel(): void;
+    /** After it has slid out. */
+    protected panelClosed(): void;
+    /** Content that scrolls with nothing to focus in it takes focus itself, so the keys can scroll it. */
+    protected updateBodyFocus(): void;
+    /** Opens it as the user did (a swipe from the edge, a tap). */
+    protected openBy(): boolean;
+    /** Closes it as the user did, with the reason (`'swipe'`, `'scrim'`…). */
+    protected closeBy(reason: OverlayCloseReason): boolean;
+    /** Runs `done` once the panel has finished sliding (at once without motion). */
+    protected afterSlide(done: () => void): void;
+    protected applyProperty(name: string, value: unknown): void;
+    private get parts();
+    private createParts;
+    private listen;
+    /** The browser's back took its entry away: it closes, unless a listener keeps it open. */
+    private closeFromBack;
+    /** Puts it where it opens: in its container (positioned), or in the page's top layer. */
+    private host;
+    private renderMode;
+    private renderTitle;
+    private renderHeader;
+    private renderClose;
+    /** Children core put at the root (JSX children, `controls.add`) go into the content area. */
+    private placeStrays;
+    /** Adds a control of its own to one of its areas, where it stays. */
+    protected placeIn(control: ComponentBase, area: HTMLElement): void;
+    private unplace;
+    private placeContent;
+    private placeFooter;
+    /** Focus on open: `[autofocus]`, the first field, the first control, the panel itself. */
+    private focusFirst;
+    /** Back to where focus was when it opened, else to the window now on top. */
+    private giveFocusBack;
+    private syncProperty;
+}

package/dist/parts/overlay/css-length.d.ts

@@ -0,0 +1,2 @@
+/** A CSS length (`'20rem'`, `'50%'`, `'var(--x)'`) in pixels, as a block size inside `within`; a number is pixels already. */
+export declare function cssLength(within: HTMLElement, value: number | string, axis?: 'block' | 'inline'): number;

package/dist/parts/overlay/inert-around.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Makes everything around `el` inert, up to and inside `scope`: the siblings of `el` and of each of
+ * its ancestors below `scope`. What was inert already stays as it was. Returns the undo.
+ */
+export declare function inertAround(el: Element, scope: Element): () => void;

package/dist/parts/overlay/overlay-close-reason.d.ts

@@ -0,0 +1,2 @@
+/** Why an overlay closed: by code, Escape, a press on the scrim, a swipe, the browser's back, its close button, or its owner going away. */
+export type OverlayCloseReason = 'code' | 'escape' | 'scrim' | 'swipe' | 'back' | 'button' | 'owner';

package/dist/parts/overlay/overlay-closed-event-args.d.ts

@@ -0,0 +1,6 @@
+import type { OverlayCloseReason } from './overlay-close-reason';
+import type { OverlayPanel } from './OverlayPanel';
+export interface OverlayClosedEventArgs {
+    reason: OverlayCloseReason;
+    source: OverlayPanel;
+}

package/dist/parts/overlay/overlay-closing-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { OverlayCloseReason } from './overlay-close-reason';
+import type { OverlayPanel } from './OverlayPanel';
+/** An overlay is about to close; `cancel = true` keeps it open (not when its owner goes away). */
+export interface OverlayClosingEventArgs {
+    cancel: boolean;
+    reason: OverlayCloseReason;
+    source: OverlayPanel;
+}

package/dist/parts/overlay/overlay-container.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentBase } from '@motifx/core';
+/** What an overlay opens over: an element or a component's element; `null` for the whole page. */
+export type OverlayContainer = HTMLElement | ComponentBase | null;

package/dist/parts/overlay/overlay-event-args.d.ts

@@ -0,0 +1,5 @@
+import type { OverlayPanel } from './OverlayPanel';
+/** An event of an overlay with nothing more to say than which one it is. */
+export interface OverlayEventArgs {
+    source: OverlayPanel;
+}

package/dist/parts/overlay/overlay-opening-event-args.d.ts

@@ -0,0 +1,6 @@
+import type { OverlayPanel } from './OverlayPanel';
+/** An overlay is about to open; `cancel = true` keeps it closed. */
+export interface OverlayOpeningEventArgs {
+    cancel: boolean;
+    source: OverlayPanel;
+}

package/dist/parts/overlay/overlay-panel-props.d.ts

@@ -0,0 +1,48 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { OverlayClosedEventArgs } from './overlay-closed-event-args';
+import type { OverlayClosingEventArgs } from './overlay-closing-event-args';
+import type { OverlayContainer } from './overlay-container';
+import type { OverlayEventArgs } from './overlay-event-args';
+import type { OverlayOpeningEventArgs } from './overlay-opening-event-args';
+/** Props every overlay panel (a bottom sheet, a drawer, an action sheet) understands. Each one is also a settable, reactive property. */
+export interface OverlayPanelProps extends ControlProps {
+    /** A title at the top; it names the panel. The same property as `text`. */
+    title?: Bind<string>;
+    /** Names the panel for screen readers when it has no title. */
+    label?: Bind<string>;
+    /** Whether it is open. `x-model` binds it two-way: the user closing it writes `false`. */
+    value?: Bind<boolean>;
+    /** Nothing outside it can be used while it is open (inside its container, or on the whole page). Default `true`. */
+    modal?: Bind<boolean>;
+    /** A dimmed layer under it. Default: when modal. */
+    scrim?: Bind<boolean>;
+    /** Opens over this element (it must be a positioned box; a static one is made relative while open); `null` over the page. Default `null`. */
+    container?: Bind<OverlayContainer>;
+    /** What fills it (besides JSX children). */
+    content?: Bind<ComponentBase | null>;
+    /** A row under the content that does not scroll with it. */
+    footer?: Bind<ComponentBase | null>;
+    /** A close button beside the title. Default `false`. */
+    showClose?: Bind<boolean>;
+    /** Escape closes it. Default `true`. */
+    closeOnEscape?: Bind<boolean>;
+    /** A press on the scrim closes it. Default `true`. */
+    closeOnScrim?: Bind<boolean>;
+    /** The browser's back (Android's back button, the back gesture) closes it, through the session history, leaving no entry behind. Default `true`. */
+    closeOnBack?: Bind<boolean>;
+    /** Focus moves into it when it opens: the first field, else the first control, else the panel. Default: when modal. */
+    focusOnOpen?: Bind<boolean>;
+    /** Focus goes back where it was when it closes (if it was inside). Default `true`. */
+    returnFocus?: Bind<boolean>;
+    /** Disposed when it closes. Default: when `show` added it to its host. */
+    disposeOnClose?: Bind<boolean>;
+    /** It is about to open; cancelable. */
+    onOpening?: (e: OverlayOpeningEventArgs) => void;
+    /** It has opened (after it slid in). */
+    onOpened?: (e: OverlayEventArgs) => void;
+    /** It is about to close; cancelable but when its owner goes away. */
+    onClosing?: (e: OverlayClosingEventArgs) => void;
+    /** It has closed (after it slid out). */
+    onClosed?: (e: OverlayClosedEventArgs) => void;
+}

package/dist/parts/overlay/swipe-tracker.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Follows a finger or a pointer along a drag and tells how fast it was going when let go, from
+ * the last tenth of a second of movement.
+ */
+export declare class SwipeTracker {
+    private points;
+    start(x: number, y: number, t?: number): void;
+    move(x: number, y: number, t?: number): void;
+    /** Pixels per millisecond along `axis` (positive: right or down). */
+    velocity(axis: 'x' | 'y', t?: number): number;
+}

package/dist/parts/popup/Popup.d.ts

@@ -0,0 +1,41 @@
+import { Component, type Event as MotifEvent } from '@motifx/core';
+import type { PopupCloseReason } from './popup-close-reason';
+import type { PopupOpenOptions } from './popup-open-options';
+import type { PopupPlacement } from './popup-placement';
+/**
+ * A surface shown next to an anchor, above everything else (the browser's top layer): a menu, a
+ * drop-down list, a picker. It follows the anchor while the page scrolls or resizes, opens on the
+ * other side when there is no room, and closes on Escape, on a press outside it and its toggle,
+ * and when focus leaves both. Focus inside goes back to the toggle when it closes. Its content is
+ * whatever is added to its `controls`; presses inside do not reach the component that hosts it.
+ * Opened next to an anchor in another document (a window the app opened), it goes there.
+ */
+export declare class Popup extends Component<HTMLDivElement> {
+    static elementTag: string;
+    placement: PopupPlacement;
+    /** At least as wide as the anchor. */
+    matchWidth: boolean;
+    private anchor;
+    /** The document it follows its anchor in while it is open. */
+    private watched;
+    private toggle;
+    private returnFocus;
+    private frame;
+    private readonly closedEmitter;
+    readonly onClosed: MotifEvent<PopupCloseReason>;
+    onConfigured(): void;
+    get isOpen(): boolean;
+    /** Opens next to `anchor`, or moves there when it is open. */
+    open(anchor: HTMLElement, options?: PopupOpenOptions): void;
+    close(reason?: PopupCloseReason): void;
+    /** Lines the popup up with its anchor again, e.g. after its content changed size. */
+    place(): void;
+    private stopFollowing;
+    private hideSurface;
+    private stopListening;
+    private readonly schedule;
+    private readonly onScroll;
+    private readonly onPointerDown;
+    private onKeyDown;
+    private onFocusOut;
+}

package/dist/parts/popup/place-popup.d.ts

@@ -0,0 +1,7 @@
+import type { PopupPlacement } from './popup-placement';
+/**
+ * Puts a fixed `popup` next to `anchor`: on the side the placement asks for, or on the other one
+ * when that has more room; inside the viewport, scrolling inside when it is taller. The gap is the
+ * popup's CSS margin on the side it opens on (`data-side`).
+ */
+export declare function placePopup(popup: HTMLElement, anchor: Element, placement: PopupPlacement, matchWidth: boolean): void;

package/dist/parts/popup/popup-close-reason.d.ts

@@ -0,0 +1,2 @@
+/** Why a popup closed: Escape, a press outside it, focus moving away from it, or code (`close()`, a chosen item). */
+export type PopupCloseReason = 'escape' | 'outside' | 'focus' | 'code';

package/dist/parts/popup/popup-open-options.d.ts

@@ -0,0 +1,7 @@
+/** What `Popup.open` takes besides the anchor. */
+export interface PopupOpenOptions {
+    /** The element that opens and closes the popup (a press on it is not "outside"); the anchor by default. */
+    toggle?: Element;
+    /** Gets focus back when the popup closes with focus inside; the toggle by default. */
+    returnFocus?: HTMLElement;
+}

package/dist/parts/popup/popup-placement.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Where a popup opens from its anchor: the side (`bottom`, `top`, or `start` / `end` across the
+ * reading direction), then how it lines up along that side (`-start`, centered, `-end`). Start and
+ * end follow the reading direction. It opens on the other side when that has more room.
+ */
+export type PopupPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'start-start' | 'start' | 'start-end' | 'end-start' | 'end' | 'end-end';

package/dist/parts/recurrence/add-rule-date.d.ts

@@ -0,0 +1,6 @@
+import type { RuleDate } from './rule-date';
+/**
+ * An exception field with one more date, in the form it already has: a list gets a `Date` (or the
+ * text of a wall clock time), a text (or nothing yet) gets the date as RFC 5545 writes it after a comma.
+ */
+export declare function addRuleDate(value: unknown, date: RuleDate): unknown;

package/dist/parts/recurrence/describe-recurrence.d.ts

@@ -0,0 +1,16 @@
+import type { UiStrings } from '../../core/ui-strings';
+import type { RecurrenceRule } from './recurrence-rule';
+/** What `describeRecurrence` writes with. */
+export interface DescribeRecurrenceOptions {
+    locale: string;
+    strings: UiStrings;
+    /** The time zone a moment in the rule (an `UNTIL` in UTC) is written on. Default: the browser's. */
+    timeZone?: string;
+}
+/**
+ * How a rule repeats, in plain words of the locale: "Every 2 weeks on Monday and Wednesday, until
+ * 31 December 2026". `start` (a date of the browser's clock with the series' fields) gives what the
+ * rule leaves to it: the weekday, the day of the month. Parts the words do not cover are said to be
+ * a rule of its own.
+ */
+export declare function describeRecurrence(rule: RecurrenceRule | null, start: Date | null, options: DescribeRecurrenceOptions): string;

package/dist/parts/recurrence/filter-rule-dates.d.ts

@@ -0,0 +1,3 @@
+import type { RuleDate } from './rule-date';
+/** An exception field with only the dates `keep` says yes to, in the form it has (a list stays a list, a text a text). */
+export declare function filterRuleDates(value: unknown, keep: (date: RuleDate) => boolean): unknown;

package/dist/parts/recurrence/format-recurrence-rule.d.ts

@@ -0,0 +1,3 @@
+import type { RecurrenceRule } from './recurrence-rule';
+/** Writes a rule as RFC 5545 text (without the `RRULE:` name), leaving out what is the default. */
+export declare function formatRecurrenceRule(rule: RecurrenceRule): string;

package/dist/parts/recurrence/format-rule-date.d.ts

@@ -0,0 +1,3 @@
+import type { RuleDate } from './rule-date';
+/** A rule's date as RFC 5545 writes it: `20261031`, `20261031T090000` or `20261031T090000Z`. */
+export declare function formatRuleDate(date: RuleDate): string;

package/dist/parts/recurrence/parse-recurrence-rule.d.ts

@@ -0,0 +1,11 @@
+import type { RecurrenceRule } from './recurrence-rule';
+/**
+ * Reads a recurrence rule (RFC 5545 `RRULE`, with or without the `RRULE:` name): `FREQ` daily to
+ * yearly, `INTERVAL`, `COUNT`, `UNTIL`, `BYDAY` (`2MO`, `-1FR`), `BYMONTHDAY`, `BYMONTH`,
+ * `BYYEARDAY`, `BYWEEKNO`, `BYHOUR`, `BYMINUTE`, `BYSECOND`, `BYSETPOS`, `WKST`. `null` when the
+ * text is not a rule it can follow (a part it knows with a wrong value, or hourly and shorter).
+ *
+ * @example
+ * parseRecurrenceRule('FREQ=MONTHLY;BYDAY=-1FR;COUNT=6')
+ */
+export declare function parseRecurrenceRule(text: string | null | undefined): RecurrenceRule | null;

package/dist/parts/recurrence/parse-rule-date.d.ts

@@ -0,0 +1,3 @@
+import type { RuleDate } from './rule-date';
+/** A date as a rule writes it (`20261031`, `20261031T090000`, `20261031T090000Z`) or in ISO form; `null` when it is none. */
+export declare function parseRuleDate(text: string): RuleDate | null;

package/dist/parts/recurrence/read-rule-dates.d.ts

@@ -0,0 +1,7 @@
+import type { RuleDate } from './rule-date';
+/**
+ * The dates of an exception field (`EXDATE`): a text of dates apart by commas or semicolons
+ * (`20261104T090000Z,20261111T090000Z`), or a list of dates, texts or milliseconds. A `Date` and a
+ * text with a zone are moments; a text without one is a wall clock time of the series.
+ */
+export declare function readRuleDates(value: unknown): RuleDate[];

package/dist/parts/recurrence/recurrence-dates-options.d.ts

@@ -0,0 +1,7 @@
+/** What `recurrenceDates` may be told besides the rule. */
+export interface RecurrenceDatesOptions {
+    /** Turns a moment (an `UNTIL` written in UTC) into the series' wall clock. Default: it is taken as it is. */
+    wallOf?: (moment: number) => number;
+    /** The most dates it gives. Default 10 000. */
+    limit?: number;
+}

package/dist/parts/recurrence/recurrence-dates.d.ts

@@ -0,0 +1,14 @@
+import type { RecurrenceDatesOptions } from './recurrence-dates-options';
+import type { RecurrenceRule } from './recurrence-rule';
+/**
+ * The times a rule happens from `from` up to `to` (not included), in order. Every time is a wall
+ * clock time as milliseconds of UTC (`Date.UTC` of its fields), so a series keeps its hour over
+ * summer time; the caller turns them into moments in the series' time zone. `start` is the first
+ * time (`DTSTART`); it counts only when the rule has it. `COUNT` counts from `start`, whatever
+ * `from` is; with no count the steps before `from` are skipped.
+ *
+ * @example
+ * // Every last Friday of the month, at the start's time.
+ * recurrenceDates(parseRecurrenceRule('FREQ=MONTHLY;BYDAY=-1FR')!, Date.UTC(2026, 0, 30, 9), Date.UTC(2026, 0, 1), Date.UTC(2027, 0, 1))
+ */
+export declare function recurrenceDates(rule: RecurrenceRule, start: number, from: number, to: number, options?: RecurrenceDatesOptions): number[];

package/dist/parts/recurrence/recurrence-frequency.d.ts

@@ -0,0 +1,2 @@
+/** How often a rule repeats (`FREQ`): every day, week, month or year, times its interval. */
+export type RecurrenceFrequency = 'daily' | 'weekly' | 'monthly' | 'yearly';

package/dist/parts/recurrence/recurrence-rule.d.ts

@@ -0,0 +1,33 @@
+import type { RecurrenceFrequency } from './recurrence-frequency';
+import type { RuleDate } from './rule-date';
+import type { RuleWeekday } from './rule-weekday';
+/** A recurrence rule (RFC 5545 `RRULE`), read by `parseRecurrenceRule` and written by `formatRecurrenceRule`. An empty list leaves its part out. */
+export interface RecurrenceRule {
+    frequency: RecurrenceFrequency;
+    /** Every n-th day, week, month or year. Default 1. */
+    interval: number;
+    /** How many times in all (`COUNT`); `null` for no limit. */
+    count: number | null;
+    /** The last time it may happen (`UNTIL`, included); `null` for no limit. */
+    until: RuleDate | null;
+    /** `BYDAY`. */
+    weekdays: RuleWeekday[];
+    /** `BYMONTHDAY`: 1 … 31, or -1 the last day, -2 the one before… */
+    monthDays: number[];
+    /** `BYMONTH`: 1 January … 12 December. */
+    months: number[];
+    /** `BYYEARDAY`: 1 … 366, or from the end with -1 … */
+    yearDays: number[];
+    /** `BYWEEKNO`: weeks of the year (week 1 holds at least four of its days), or from the end. */
+    weeks: number[];
+    /** `BYHOUR`, `BYMINUTE`, `BYSECOND`: times of each day; the start's time when empty. */
+    hours: number[];
+    minutes: number[];
+    seconds: number[];
+    /** `BYSETPOS`: which of the times found in each day, week, month or year are kept (1 the first, -1 the last). */
+    positions: number[];
+    /** `WKST`: the day weeks start on, 0 Sunday … 6 Saturday. Default 1 (Monday). */
+    weekStart: number;
+    /** Parts the kit does not read, kept as they were written so the text comes back whole. */
+    other: string[];
+}

package/dist/parts/recurrence/rule-date.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A date of a rule (`UNTIL`, `EXDATE`). `time` holds the written fields as milliseconds of UTC
+ * (`Date.UTC`): with `utc` it is a moment, without it a time on the wall clock of the series.
+ */
+export interface RuleDate {
+    time: number;
+    utc: boolean;
+    /** Only a date (`20261031`), no time. */
+    dateOnly: boolean;
+}

package/dist/parts/recurrence/rule-weekday.d.ts

@@ -0,0 +1,7 @@
+/** A day of the week in a rule (`BYDAY`): `MO`, or with its place in the month or the year, `2MO`, `-1FR`. */
+export interface RuleWeekday {
+    /** 0 Sunday … 6 Saturday. */
+    day: number;
+    /** Its place: 2 the second, -1 the last; 0 every one. */
+    nth: number;
+}

package/dist/parts/recurrence/weekday-codes.d.ts

@@ -0,0 +1,2 @@
+/** The two letters a rule names each day by, from Sunday. */
+export declare const WEEKDAY_CODES: readonly string[];

package/dist/parts/validation/ValidationGroup.d.ts

@@ -0,0 +1,25 @@
+import type { ValidationResult } from './validation-result';
+import type { ValidationTarget } from './validation-target';
+/**
+ * Fields checked together, e.g. the fields of one form.
+ *
+ * @example
+ * const group = new ValidationGroup();
+ * <TextBox label="Name" required validationGroup={group} />
+ * <Button text="Save" onclick={async () => (await group.validate()).valid && this.save()} />
+ */
+export declare class ValidationGroup {
+    private readonly members;
+    private readonly version;
+    /** Returns the function that removes it again. */
+    add(target: ValidationTarget): () => void;
+    remove(target: ValidationTarget): void;
+    get targets(): readonly ValidationTarget[];
+    get isValid(): boolean;
+    /** Checks every member; the first one that failed gets focus unless `focus` is `false`. */
+    validate(options?: {
+        focus?: boolean;
+    }): Promise<ValidationResult>;
+    reset(): void;
+    private changed;
+}

package/dist/parts/validation/check-rules.d.ts

@@ -0,0 +1,4 @@
+import type { ValidationMessage } from './validation-message';
+import type { ValidationRule } from './validation-rule';
+/** The message of the first rule that fails, or `null`. */
+export declare function checkRules<T>(value: T, rules: readonly ValidationRule<T>[], empty: boolean): Promise<ValidationMessage | null>;

package/dist/parts/validation/validate-fields.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentBase } from '@motifx/core';
+import type { ValidationResult } from './validation-result';
+import type { ValidationTarget } from './validation-target';
+/** Put on the root element of every control that can be checked. */
+export declare const VALIDATES = "data-mx-validates";
+export declare function fieldsWithin(root: ComponentBase | Element): ValidationTarget[];
+/** Checks every field inside `root` (a panel, a dialog, a page) without a group. */
+export declare function validateFields(root: ComponentBase | Element, options?: {
+    focus?: boolean;
+}): Promise<ValidationResult>;

package/dist/parts/validation/validate-targets.d.ts

@@ -0,0 +1,3 @@
+import type { ValidationResult } from './validation-result';
+import type { ValidationTarget } from './validation-target';
+export declare function validateTargets(targets: readonly ValidationTarget[], focus?: boolean): Promise<ValidationResult>;

package/dist/parts/validation/validation-message.d.ts

@@ -0,0 +1,2 @@
+/** Read when shown, so it follows `uiLocale`. */
+export type ValidationMessage = () => string;

package/dist/parts/validation/validation-result.d.ts

@@ -0,0 +1,6 @@
+import type { ValidationTarget } from './validation-target';
+export interface ValidationResult {
+    valid: boolean;
+    /** In page order. */
+    invalid: ValidationTarget[];
+}

package/dist/parts/validation/validation-rule.d.ts

@@ -0,0 +1,55 @@
+import type { Bind } from '@motifx/core';
+/**
+ * One check of a value. Without a `message` the text comes from `uiLocale`. Empty values pass
+ * every rule except `required` and `compare`.
+ */
+export type ValidationRule<T = unknown> = {
+    type: 'required';
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+} | {
+    type: 'email';
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+} | {
+    type: 'url';
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+}
+/** A string pattern must match the whole value, like the HTML `pattern` attribute. */
+ | {
+    type: 'pattern';
+    pattern: Bind<RegExp | string>;
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+} | {
+    type: 'length';
+    min?: Bind<number>;
+    max?: Bind<number>;
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+} | {
+    type: 'range';
+    min?: Bind<number | Date>;
+    max?: Bind<number | Date>;
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+}
+/** Equal to another value (a repeated password); with `not`, different from it. */
+ | {
+    type: 'compare';
+    with: () => unknown;
+    not?: Bind<boolean>;
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+}
+/** `true` or nothing passes, `false` fails, a string fails with that text. May be async. */
+ | {
+    type: 'custom';
+    check: (value: T) => CheckResult | Promise<CheckResult>;
+    ignoreEmpty?: Bind<boolean>;
+    message?: Bind<string>;
+    enabled?: Bind<boolean>;
+};
+type CheckResult = boolean | string | null | undefined | void;
+export {};

package/dist/parts/validation/validation-target.d.ts

@@ -0,0 +1,8 @@
+/** Anything a `ValidationGroup` can check. */
+export interface ValidationTarget {
+    validate(): Promise<boolean>;
+    resetValidation(): void;
+    readonly isValid: boolean;
+    focus(): boolean;
+    readonly element: Element;
+}

package/dist/parts/window/follow-pointer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Follows the pointer pressed in `e` on `on` until it is let go: `move` gets how far it went from
+ * the press, `end` runs once at the end.
+ */
+export declare function followPointer(on: HTMLElement, e: PointerEvent, move: (dx: number, dy: number) => void, end: () => void): void;

package/dist/parts/window/resize-box.d.ts

@@ -0,0 +1,13 @@
+import type { WindowBox } from './window-box';
+import type { WindowEdge } from './window-edge';
+/**
+ * The box a window resized from `edge` gets: the pointer moved `dx` along the reading direction and
+ * `dy` down since `start`. It stays at least `min` and inside `room` (from 0 to its width and height).
+ */
+export declare function resizeBox(edge: WindowEdge, start: WindowBox, dx: number, dy: number, min: {
+    w: number;
+    h: number;
+}, room: {
+    w: number;
+    h: number;
+}): WindowBox;

package/dist/parts/window/resize-frame.d.ts

@@ -0,0 +1,2 @@
+/** The frame of a window's resize handles: one handle per side and corner, each with its `data-edge`. */
+export declare function resizeFrame(doc: Document, frameClass: string, handleClass: string): HTMLDivElement;

package/dist/parts/window/window-box.d.ts

@@ -0,0 +1,7 @@
+/** Where a window is and how big, in pixels: `x` from the start edge of the room it moves in (the right edge right to left). */
+export interface WindowBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}

package/dist/parts/window/window-edge.d.ts

@@ -0,0 +1,2 @@
+/** A side or a corner of a window it is resized by; `start` and `end` follow the reading direction. */
+export type WindowEdge = 'top' | 'bottom' | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';