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

package/dist/components/filterbuilder/filter-builder-custom-operation.d.ts

@@ -0,0 +1,35 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { FilterBuilderDataType } from './filter-builder-data-type';
+import type { FilterBuilderEditorContext } from './filter-builder-editor-context';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderValueInfo } from './filter-builder-value-info';
+/**
+ * An operation of your own. The builder's value holds what `calculateFilterExpression` makes of it,
+ * so it goes to any adapter as it is; the builder knows it again as this operation while it holds
+ * that value, and from any expression when `readFilterExpression` is given.
+ *
+ * @example
+ * { name: 'lastDays', caption: 'Is in the last days', dataTypes: ['date'],
+ *   calculateFilterExpression: (days, field) => data.where(field.dataField, '>=', daysAgo(days as number)) }
+ */
+export interface FilterBuilderCustomOperation {
+    /** Used in `filterOperations`. */
+    name: string;
+    caption: Bind<string>;
+    /** The data types whose fields offer it without naming it in `filterOperations`. */
+    dataTypes?: readonly FilterBuilderDataType[];
+    /** Whether the operation takes a value. Default `true`. */
+    hasValue?: boolean;
+    /** The editor of the value. Default: the field's editor. */
+    editor?: (ctx: FilterBuilderEditorContext) => ComponentBase;
+    /** The text of the value. */
+    customizeText?: (info: FilterBuilderValueInfo) => string;
+    /** The data layer's filter for a value; `null` filters nothing. */
+    calculateFilterExpression: (value: unknown, field: FilterBuilderField) => data.FilterExpression | null;
+    /** Knows an expression as this operation: its field and value, or `null`. */
+    readFilterExpression?: (expression: data.FilterExpression) => {
+        field: string;
+        value: unknown;
+    } | null;
+}

package/dist/components/filterbuilder/filter-builder-data-type.d.ts

@@ -0,0 +1,2 @@
+/** The kind of a field's values: it decides the operations, the editor and how a value reads. */
+export type FilterBuilderDataType = 'string' | 'number' | 'date' | 'datetime' | 'boolean' | 'object';

package/dist/components/filterbuilder/filter-builder-editor-context.d.ts

@@ -0,0 +1,15 @@
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderCondition } from './filter-builder-condition';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+/** What an editor of your own gets: the condition, its value, and `setValue` to change it (kept when the editor closes). */
+export interface FilterBuilderEditorContext {
+    field: FilterBuilderField;
+    operation: FilterBuilderOperation;
+    value: unknown;
+    condition: FilterBuilderCondition;
+    setValue: (value: unknown) => void;
+    /** Keeps the value and closes the editor (Enter in it does the same); `false` gives the value up. */
+    close: (keep?: boolean) => void;
+    builder: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-editor-prepared-event-args.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentBase } from '@motifx/core';
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderCondition } from './filter-builder-condition';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+/** A value editor was made and placed. */
+export interface FilterBuilderEditorPreparedEventArgs {
+    field: FilterBuilderField;
+    operation: FilterBuilderOperation;
+    condition: FilterBuilderCondition;
+    part: 'value' | 'from' | 'to';
+    editor: ComponentBase;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-editor-preparing-event-args.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentBase, EventArgs } from '@motifx/core';
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderCondition } from './filter-builder-condition';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+/**
+ * A value editor is about to be made: change the props of the kit editor (`options`), give a
+ * component of your own (`editor`, which calls `setValue`), or `cancel` to open none.
+ */
+export interface FilterBuilderEditorPreparingEventArgs extends EventArgs {
+    field: FilterBuilderField;
+    operation: FilterBuilderOperation;
+    value: unknown;
+    condition: FilterBuilderCondition;
+    /** `'from'` and `'to'` for the two editors of `between`, else `'value'`. */
+    part: 'value' | 'from' | 'to';
+    options: Record<string, unknown>;
+    editor: ComponentBase | null;
+    setValue: (value: unknown) => void;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-field.d.ts

@@ -0,0 +1,39 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { FilterBuilderDataType } from './filter-builder-data-type';
+import type { FilterBuilderEditorContext } from './filter-builder-editor-context';
+import type { FilterBuilderLookup } from './filter-builder-lookup';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+import type { FilterBuilderValueInfo } from './filter-builder-value-info';
+/**
+ * A field the user can build conditions on. `caption`, `dataType`, `filterOperations`,
+ * `defaultOperation`, `trueText`, `falseText` and `editorOptions` are values or functions that are followed.
+ *
+ * @example
+ * { dataField: 'amount', caption: 'Amount', dataType: 'number', format: { style: 'currency', currency: 'EUR' } }
+ */
+export interface FilterBuilderField {
+    /** The field of the data the condition filters (a dotted path for a nested one). */
+    dataField: string;
+    /** Default: the data field in words (`orderDate` → "Order Date"). */
+    caption?: Bind<string>;
+    /** Default `'string'`. */
+    dataType?: Bind<FilterBuilderDataType>;
+    /** `Intl` options for a number or a date value (the editor takes them too), or a function that writes the text. */
+    format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | ((value: unknown) => string);
+    /** The values come from a list. */
+    lookup?: FilterBuilderLookup;
+    /** The operations offered, in order (custom operations by name). Default: by `dataType`, and the custom operations for that type. */
+    filterOperations?: Bind<readonly FilterBuilderOperation[]>;
+    /** The operation a new condition starts with. Default: the first of `filterOperations`. */
+    defaultOperation?: Bind<FilterBuilderOperation>;
+    /** An editor of your own for the value: a `Field` (its `value` is read) or any component that calls `ctx.setValue`. */
+    editor?: (ctx: FilterBuilderEditorContext) => ComponentBase;
+    /** Props given to the kit editor the builder makes. */
+    editorOptions?: Bind<Record<string, unknown>>;
+    /** The text of a value, in the builder and in a filter's text. */
+    customizeText?: (info: FilterBuilderValueInfo) => string;
+    /** A yes/no field: the text of `true`. Default: the `filterBuilderTrue` text. */
+    trueText?: Bind<string>;
+    /** A yes/no field: the text of `false`. Default: the `filterBuilderFalse` text. */
+    falseText?: Bind<string>;
+}

package/dist/components/filterbuilder/filter-builder-group-operation.d.ts

@@ -0,0 +1,2 @@
+/** How a group joins its items; `notAnd` and `notOr` turn the result over. */
+export type FilterBuilderGroupOperation = 'and' | 'or' | 'notAnd' | 'notOr';

package/dist/components/filterbuilder/filter-builder-group.d.ts

@@ -0,0 +1,10 @@
+import type { FilterBuilderGroupOperation } from './filter-builder-group-operation';
+import type { FilterBuilderItem } from './filter-builder-item';
+/** A group of the builder's tree: conditions and groups joined by one operation. Change it through the builder's methods. */
+export interface FilterBuilderGroup {
+    readonly kind: 'group';
+    operation: FilterBuilderGroupOperation;
+    readonly items: FilterBuilderItem[];
+    /** `null` for the root group. */
+    parent: FilterBuilderGroup | null;
+}

package/dist/components/filterbuilder/filter-builder-item-added-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderItem } from './filter-builder-item';
+/** A condition or a group was added to `group`. */
+export interface FilterBuilderItemAddedEventArgs {
+    item: FilterBuilderItem;
+    group: FilterBuilderGroup;
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-item-adding-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderItem } from './filter-builder-item';
+/** A condition or a group is about to be added to `group`; change `item` (its field, operation, value), or `cancel`. */
+export interface FilterBuilderItemAddingEventArgs extends EventArgs {
+    item: FilterBuilderItem;
+    group: FilterBuilderGroup;
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-item-change.d.ts

@@ -0,0 +1,2 @@
+/** What of an item changes: a condition's field, operation or value, or a group's operation. */
+export type FilterBuilderItemChange = 'field' | 'operation' | 'value' | 'groupOperation';

package/dist/components/filterbuilder/filter-builder-item-changed-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderItem } from './filter-builder-item';
+import type { FilterBuilderItemChange } from './filter-builder-item-change';
+export interface FilterBuilderItemChangedEventArgs {
+    item: FilterBuilderItem;
+    change: FilterBuilderItemChange;
+    value: unknown;
+    previousValue: unknown;
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-item-changing-event-args.d.ts

@@ -0,0 +1,13 @@
+import type { EventArgs } from '@motifx/core';
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderItem } from './filter-builder-item';
+import type { FilterBuilderItemChange } from './filter-builder-item-change';
+/** A condition's field, operation or value, or a group's operation, is about to change; change `value`, or `cancel`. */
+export interface FilterBuilderItemChangingEventArgs extends EventArgs {
+    item: FilterBuilderItem;
+    change: FilterBuilderItemChange;
+    value: unknown;
+    previousValue: unknown;
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-item-removed-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderItem } from './filter-builder-item';
+/** A condition or a group was taken out of `group`. */
+export interface FilterBuilderItemRemovedEventArgs {
+    item: FilterBuilderItem;
+    group: FilterBuilderGroup;
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-item-removing-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { FilterBuilder } from './FilterBuilder';
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderItem } from './filter-builder-item';
+/** A condition or a group (with what it holds) is about to be taken out of `group`; `cancel` keeps it. */
+export interface FilterBuilderItemRemovingEventArgs extends EventArgs {
+    item: FilterBuilderItem;
+    group: FilterBuilderGroup;
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-item.d.ts

@@ -0,0 +1,3 @@
+import type { FilterBuilderCondition } from './filter-builder-condition';
+import type { FilterBuilderGroup } from './filter-builder-group';
+export type FilterBuilderItem = FilterBuilderGroup | FilterBuilderCondition;

package/dist/components/filterbuilder/filter-builder-lookup.d.ts

@@ -0,0 +1,13 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+/** The values of a lookup field come from a list: a drop-down of its items, a tag box for "is any of". */
+export interface FilterBuilderLookup {
+    /** The items: a data source (searched on its service) or an array in memory. */
+    dataSource: Bind<data.DataSource<any, any> | readonly unknown[]>;
+    /** Field of an item that is the condition's value. Default: the data source's key; for plain values, the value itself. */
+    valueField?: string;
+    /** The text shown: a field of the item or a function of it. Default: the value. */
+    textField?: string | ((item: any) => string);
+    /** A clear button in the drop-down. Default `false`. */
+    allowClearing?: Bind<boolean>;
+}

package/dist/components/filterbuilder/filter-builder-model-options.d.ts

@@ -0,0 +1,14 @@
+import type { UiStrings } from '../../core/ui-strings';
+import type { FilterBuilderCustomOperation } from './filter-builder-custom-operation';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderGroupOperation } from './filter-builder-group-operation';
+/** What a `FilterBuilderModel` reads, each time it needs it. */
+export interface FilterBuilderModelOptions {
+    fields?: readonly FilterBuilderField[];
+    customOperations?: readonly FilterBuilderCustomOperation[];
+    groupOperations?: readonly FilterBuilderGroupOperation[];
+    maxGroupLevel?: number | null;
+    allowHierarchicalFields?: boolean;
+    texts?: Partial<UiStrings>;
+    locale?: string;
+}

package/dist/components/filterbuilder/filter-builder-operation.d.ts

@@ -0,0 +1,3 @@
+import type { data } from '@motifx-community/data';
+/** A condition's operation: one of the data layer's (`'in'` is "is any of", `'notin'` "is none of") or a custom operation's name. */
+export type FilterBuilderOperation = data.FilterOperator | (string & {});

package/dist/components/filterbuilder/filter-builder-props.d.ts

@@ -0,0 +1,57 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { UiStrings } from '../../core/ui-strings';
+import type { FilterBuilderCustomOperation } from './filter-builder-custom-operation';
+import type { FilterBuilderEditorPreparedEventArgs } from './filter-builder-editor-prepared-event-args';
+import type { FilterBuilderEditorPreparingEventArgs } from './filter-builder-editor-preparing-event-args';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderGroupOperation } from './filter-builder-group-operation';
+import type { FilterBuilderItemAddedEventArgs } from './filter-builder-item-added-event-args';
+import type { FilterBuilderItemAddingEventArgs } from './filter-builder-item-adding-event-args';
+import type { FilterBuilderItemChangedEventArgs } from './filter-builder-item-changed-event-args';
+import type { FilterBuilderItemChangingEventArgs } from './filter-builder-item-changing-event-args';
+import type { FilterBuilderItemRemovedEventArgs } from './filter-builder-item-removed-event-args';
+import type { FilterBuilderItemRemovingEventArgs } from './filter-builder-item-removing-event-args';
+import type { FilterBuilderValueChangedEventArgs } from './filter-builder-value-changed-event-args';
+/** Props of `FilterBuilder`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface FilterBuilderProps extends ControlProps {
+    /** The filter, as the data layer has it. `x-model` binds it two-way. */
+    value?: Bind<data.FilterExpression | null>;
+    /** The fields conditions are built on. */
+    fields?: Bind<readonly FilterBuilderField[]>;
+    /** Operations of your own, offered by name or by data type. */
+    customOperations?: Bind<readonly FilterBuilderCustomOperation[]>;
+    /** The operations a group can join with, in order; the first is a new group's. Default `['and', 'or', 'notAnd', 'notOr']`. */
+    groupOperations?: Bind<readonly FilterBuilderGroupOperation[]>;
+    /** How deep groups may go: `0` allows none, `1` groups in the root only… Default `null`, no limit. */
+    maxGroupLevel?: Bind<number | null>;
+    /** Fields with a dotted `dataField` (`customer.city`) show as submenus of their parts. Default `false`. */
+    allowHierarchicalFields?: Bind<boolean>;
+    /** The accessible name of the tree. Default: the `filterBuilderLabel` text. */
+    label?: Bind<string>;
+    /** Texts for this builder only, over `uiLocale.strings`. */
+    texts?: Bind<Partial<UiStrings>>;
+    /** Locale of numbers and dates. Default: the page's language. */
+    locale?: Bind<string>;
+    /** Default `'sm'`. */
+    size?: Bind<ControlSize>;
+    /** Keys that add a condition to the focused row's group. Default `['Insert']`. */
+    addKeys?: Bind<readonly string[]>;
+    /** Keys that take out the focused row's condition or group. Default `['Delete']`. */
+    removeKeys?: Bind<readonly string[]>;
+    onValueChanged?: (e: FilterBuilderValueChangedEventArgs) => void;
+    /** A condition or group is about to be added; cancelable. */
+    onItemAdding?: (e: FilterBuilderItemAddingEventArgs) => void;
+    onItemAdded?: (e: FilterBuilderItemAddedEventArgs) => void;
+    /** A condition or group is about to be taken out; cancelable. */
+    onItemRemoving?: (e: FilterBuilderItemRemovingEventArgs) => void;
+    onItemRemoved?: (e: FilterBuilderItemRemovedEventArgs) => void;
+    /** A field, operation, value or group operation is about to change; cancelable. */
+    onItemChanging?: (e: FilterBuilderItemChangingEventArgs) => void;
+    onItemChanged?: (e: FilterBuilderItemChangedEventArgs) => void;
+    /** A value editor is about to be made; change it, replace it, or cancel it. */
+    onEditorPreparing?: (e: FilterBuilderEditorPreparingEventArgs) => void;
+    onEditorPrepared?: (e: FilterBuilderEditorPreparedEventArgs) => void;
+}

package/dist/components/filterbuilder/filter-builder-value-changed-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { data } from '@motifx-community/data';
+import type { FilterBuilder } from './FilterBuilder';
+export interface FilterBuilderValueChangedEventArgs {
+    value: data.FilterExpression | null;
+    previousValue: data.FilterExpression | null;
+    /** `true` when the user changed it, `false` when code did. */
+    byUser: boolean;
+    source: FilterBuilder;
+}

package/dist/components/filterbuilder/filter-builder-value-info.d.ts

@@ -0,0 +1,7 @@
+import type { FilterBuilderField } from './filter-builder-field';
+/** What `customizeText` gets: the value, the text the builder would write, and the field. */
+export interface FilterBuilderValueInfo {
+    value: unknown;
+    valueText: string;
+    field: FilterBuilderField;
+}

package/dist/components/filterbuilder/filter-text.d.ts

@@ -0,0 +1,8 @@
+import type { data } from '@motifx-community/data';
+import type { FilterBuilderModelOptions } from './filter-builder-model-options';
+/**
+ * A filter of the data layer as one line of text, as the filter builder reads it:
+ * `[City] Equals 'Ankara' And [Amount] Is greater than '100'`. The fields give captions, formats and
+ * lookup texts; a field it does not know reads as its name in words.
+ */
+export declare function filterText(value: data.FilterExpression | null | undefined, options?: FilterBuilderModelOptions): string;

package/dist/components/filterbuilder/index.d.ts

@@ -0,0 +1,27 @@
+export { FilterBuilder } from './FilterBuilder';
+export { FilterBuilderModel } from './FilterBuilderModel';
+export { filterText } from './filter-text';
+export { defaultOperations } from './default-operations';
+export type { FilterBuilderProps } from './filter-builder-props';
+export type { FilterBuilderField } from './filter-builder-field';
+export type { FilterBuilderLookup } from './filter-builder-lookup';
+export type { FilterBuilderDataType } from './filter-builder-data-type';
+export type { FilterBuilderOperation } from './filter-builder-operation';
+export type { FilterBuilderGroupOperation } from './filter-builder-group-operation';
+export type { FilterBuilderCustomOperation } from './filter-builder-custom-operation';
+export type { FilterBuilderCondition } from './filter-builder-condition';
+export type { FilterBuilderGroup } from './filter-builder-group';
+export type { FilterBuilderItem } from './filter-builder-item';
+export type { FilterBuilderItemChange } from './filter-builder-item-change';
+export type { FilterBuilderEditorContext } from './filter-builder-editor-context';
+export type { FilterBuilderValueInfo } from './filter-builder-value-info';
+export type { FilterBuilderModelOptions } from './filter-builder-model-options';
+export type { FilterBuilderValueChangedEventArgs } from './filter-builder-value-changed-event-args';
+export type { FilterBuilderItemAddingEventArgs } from './filter-builder-item-adding-event-args';
+export type { FilterBuilderItemAddedEventArgs } from './filter-builder-item-added-event-args';
+export type { FilterBuilderItemRemovingEventArgs } from './filter-builder-item-removing-event-args';
+export type { FilterBuilderItemRemovedEventArgs } from './filter-builder-item-removed-event-args';
+export type { FilterBuilderItemChangingEventArgs } from './filter-builder-item-changing-event-args';
+export type { FilterBuilderItemChangedEventArgs } from './filter-builder-item-changed-event-args';
+export type { FilterBuilderEditorPreparingEventArgs } from './filter-builder-editor-preparing-event-args';
+export type { FilterBuilderEditorPreparedEventArgs } from './filter-builder-editor-prepared-event-args';

package/dist/components/form/MxForm.d.ts

@@ -0,0 +1,195 @@
+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 { IconSource } from '../../core/icon-source';
+import type { FormClosedEventArgs } from './form-closed-event-args';
+import type { FormClosingEventArgs } from './form-closing-event-args';
+import type { FormEventArgs } from './form-event-args';
+import type { FormHost } from './form-host';
+import type { FormProps } from './form-props';
+import type { FormResult } from './form-result';
+import type { FormStartPosition } from './form-start-position';
+import type { FormWindowState } from './form-window-state';
+/**
+ * A window: a title bar (icon, title, minimize, maximize and close buttons), a content area and a
+ * row for its buttons, on a native `<dialog>`. Whoever shows it decides how: `show(host)` opens it
+ * modeless (the page stays usable), `showDialog(host)` modal, and resolves with its result when it
+ * closes. Forms open forms; a modal opened from a modal blocks the one below. It moves by its title
+ * bar, resizes from its edges and corners, and can be minimized and maximized. Escape and Enter
+ * click its `cancelButton` and `acceptButton`. Written in JSX with `x-model`, it shows while the
+ * value is true.
+ *
+ * @example
+ * class Settings extends MxForm {
+ *   constructor() { super({ title: 'Settings', width: '28rem' }); }
+ *   view() { return <TextBox label="&Name" x-model={() => this.model.name} />; }
+ * }
+ * const result = await new Settings().showDialog(this);
+ *
+ * <MxForm title="Find" x-model={() => this.state.find}>…</MxForm>
+ */
+export declare class MxForm extends FocusContainer<HTMLDialogElement, FormProps> {
+    static elementTag: string;
+    constructor(props?: IBaseProp<FormProps>);
+    /** The title; the same property as `text`. */
+    get title(): string;
+    set title(value: Bind<string>);
+    /** Whether the form is open. Reactive. Setting it opens (modal with `modal`) or closes it. */
+    get value(): boolean;
+    set value(value: Bind<boolean>);
+    get modal(): boolean;
+    set modal(value: Bind<boolean>);
+    get content(): ComponentBase | null;
+    set content(value: Bind<ComponentBase | null>);
+    get footer(): ComponentBase | null;
+    set footer(value: Bind<ComponentBase | null>);
+    get icon(): IconSource | null;
+    set icon(value: Bind<IconSource | null>);
+    get showClose(): boolean;
+    set showClose(value: Bind<boolean>);
+    get showMinimize(): boolean;
+    set showMinimize(value: Bind<boolean>);
+    get showMaximize(): boolean;
+    set showMaximize(value: Bind<boolean>);
+    get resizable(): boolean;
+    set resizable(value: Bind<boolean>);
+    get movable(): boolean;
+    set movable(value: Bind<boolean>);
+    /** Whether Escape closes it now: as set, else on for a modal form and off for a modeless one. */
+    get closeOnEscape(): boolean;
+    set closeOnEscape(value: Bind<boolean>);
+    get acceptButton(): Control | null;
+    set acceptButton(value: Bind<Control | null>);
+    get cancelButton(): Control | null;
+    set cancelButton(value: Bind<Control | null>);
+    get minimizeTarget(): HTMLElement | ComponentBase | null;
+    set minimizeTarget(value: Bind<HTMLElement | ComponentBase | null>);
+    get windowState(): FormWindowState;
+    set windowState(value: Bind<FormWindowState>);
+    get startPosition(): FormStartPosition;
+    set startPosition(value: Bind<FormStartPosition>);
+    /** See the prop. After the user moves the form, its place (in pixels). */
+    get left(): number | string | null;
+    set left(value: Bind<number | string | null>);
+    /** See the prop. After the user moves the form, its place (in pixels). */
+    get top(): number | string | null;
+    set top(value: Bind<number | string | null>);
+    /** See the prop. After the user resizes the form, its size (in pixels). */
+    get width(): number | string | null;
+    set width(value: Bind<number | string | null>);
+    /** See the prop. After the user resizes the form, its size (in pixels). */
+    get height(): number | string | null;
+    set height(value: Bind<number | string | null>);
+    get alert(): boolean;
+    set alert(value: Bind<boolean>);
+    /** Whether it is disposed when it closes: as set, else when `show` or `showDialog` added it to its host. */
+    get disposeOnClose(): boolean;
+    set disposeOnClose(value: Bind<boolean>);
+    /** How it was closed, or will be: `close()` without an argument uses it. `'cancel'` when it opens. Reactive. */
+    get result(): FormResult;
+    set result(value: Bind<FormResult>);
+    /** Reactive. */
+    get isOpen(): boolean;
+    /** Shown modal. Reactive. */
+    get isModal(): boolean;
+    /** The active (front) window of the page. Reactive. */
+    get isActive(): boolean;
+    /** The content area, for code that places elements itself. */
+    get contentElement(): HTMLDivElement;
+    /** Before it is shown the first time: the place to fill it. */
+    get onLoaded(): MotifEvent<FormEventArgs>;
+    get onShown(): MotifEvent<FormEventArgs>;
+    /** It became the active window (shown, clicked, focused). */
+    get onActivate(): MotifEvent<FormEventArgs>;
+    get onDeactivate(): MotifEvent<FormEventArgs>;
+    /** It is about to close; `e.cancel = true` keeps it open (not when its owner is going away). */
+    get onClosing(): MotifEvent<FormClosingEventArgs>;
+    get onClosed(): MotifEvent<FormClosedEventArgs>;
+    /**
+     * Shows the form modeless: the page and other windows stay usable. It is added to `host`
+     * (a component or the application) unless it already sits somewhere, and dies with
+     * `disposeRef` (else the host) even while open. Shown already, it comes to the front.
+     */
+    show(host: FormHost, disposeRef?: ComponentBase): void;
+    /**
+     * Shows the form modal: nothing else on the page can be used until it closes. Resolves with
+     * its result (`'ok'`, `'cancel'` or your own word) when it closes.
+     */
+    showDialog(host: FormHost, disposeRef?: ComponentBase): Promise<FormResult>;
+    /**
+     * Closes the form with `result` (else its `result`). A form `show` or `showDialog` added to its
+     * host is disposed; one written in JSX is hidden. `false` when an `onClosing` listener kept it open.
+     */
+    close(result?: FormResult): boolean;
+    /** Brings the form to the front and gives focus back to its last active control. */
+    activate(): void;
+    minimize(): void;
+    maximize(): void;
+    /** Back from minimized (to the state before) or from maximized. */
+    restore(): void;
+    /** Puts it back in the middle of the viewport. */
+    center(): void;
+    restoreFocus(): boolean;
+    /** A window is a root: controls around it do not disable it, and it runs Tab itself. */
+    get parentControl(): Control | null;
+    protected get cyclesTab(): boolean;
+    onMounted(): void;
+    protected applyProperty(name: string, value: unknown): void;
+    private get parts();
+    private createParts;
+    private listen;
+    /** Children core put at the root (JSX children, `view()`, `controls.add`) go to their area. */
+    private placeStrays;
+    /** Adds a control of the form's own to an area. */
+    private placeIn;
+    private unplace;
+    private placeContent;
+    private placeFooter;
+    private renderTitle;
+    private renderIcon;
+    /** The title bar buttons: minimize (modeless only), maximize, close. */
+    private renderTools;
+    private tool;
+    private orderTools;
+    private labelTools;
+    private renderToolLook;
+    private renderFrame;
+    private renderMode;
+    private renderLength;
+    /** Draws `windowState`; `opening`: the form is just being shown and focuses itself. */
+    private renderState;
+    private toggleMinimized;
+    /** The chip a minimized form leaves in its `minimizeTarget`. */
+    private dock;
+    private removeChip;
+    private request;
+    private openWhenReady;
+    private openNow;
+    /** Focus on open: `[autofocus]`, the first field, the accept button, the first control, the form itself. */
+    private focusFirst;
+    private tryFocus;
+    private closeWith;
+    private finishClose;
+    /** Back to where focus was when the form opened, else to the window now on top. */
+    private returnFocus;
+    private valueChanged;
+    /** Stores what the form did into a property without treating it as a request. */
+    private syncProperty;
+    private setActive;
+    private focusIn;
+    private keyDown;
+    /** Escape: the cancel button, else close when `closeOnEscape`. Returns whether it did something. */
+    private escape;
+    private get rtl();
+    /** Where the form is, from the start edge of the viewport. */
+    private box;
+    private placeAt;
+    private placeAtProps;
+    private readonly keepInView;
+    private barPointerDown;
+    private resizePointerDown;
+    /** Follows the pointer from `e` until it is released, then keeps the new place and size. */
+    private drag;
+    /** After a move or a resize, the props say where the form is and how big. */
+    private keepGeometry;
+}

package/dist/components/form/confirm.d.ts

@@ -0,0 +1,10 @@
+import type { Bind } from '@motifx/core';
+import type { MessageBoxOptions } from './message-box-options';
+/**
+ * Asks a question with OK and Cancel; resolves `true` for OK (or Yes). The other options of
+ * `messageBox` can be given too: `title`, `tone`, other `buttons`.
+ *
+ * @example
+ * if (await confirm('Delete the file?', { tone: 'danger' })) this.remove();
+ */
+export declare function confirm(text: Bind<string>, options?: Omit<MessageBoxOptions, 'text'>): Promise<boolean>;

package/dist/components/form/form-close-reason.d.ts

@@ -0,0 +1,2 @@
+/** Who closed the form: the user (close button, Escape), code (`close()`), or the owner going away. */
+export type FormCloseReason = 'user' | 'code' | 'owner';

package/dist/components/form/form-closed-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { FormCloseReason } from './form-close-reason';
+import type { FormResult } from './form-result';
+import type { MxForm } from './MxForm';
+export interface FormClosedEventArgs {
+    result: FormResult;
+    reason: FormCloseReason;
+    source: MxForm;
+}

package/dist/components/form/form-closing-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { EventArgs } from '@motifx/core';
+import type { FormCloseReason } from './form-close-reason';
+import type { FormResult } from './form-result';
+import type { MxForm } from './MxForm';
+/** The form is about to close; `cancel = true` keeps it open (not when its owner is going away). */
+export interface FormClosingEventArgs extends EventArgs {
+    result: FormResult;
+    reason: FormCloseReason;
+    source: MxForm;
+}

package/dist/components/form/form-event-args.d.ts

@@ -0,0 +1,5 @@
+import type { MxForm } from './MxForm';
+/** An event of the form with nothing more to say than which form it is. */
+export interface FormEventArgs {
+    source: MxForm;
+}

package/dist/components/form/form-host.d.ts

@@ -0,0 +1,3 @@
+import type { Application, ComponentBase } from '@motifx/core';
+/** What a form is shown in: any component, or the application (its shell). */
+export type FormHost = ComponentBase | Application;