@tstdl/base 0.91.21 → 0.91.23

package/form/controls/radio-group.control.js

@@ -0,0 +1,28 @@
+import { tstdlCommonLocalizationKeys } from '../../text/common-localization.js';
+import { enumAsItems, reactiveOptionToSignal } from '../utils.js';
+import { ItemsFormControl } from './items.control.js';
+export class RadioGroupFormControl extends ItemsFormControl {
+    direction;
+    constructor(initialValue, options) {
+        super(initialValue, options);
+        this.direction = reactiveOptionToSignal(options.direction ?? 'column', { initialValue: 'column' });
+    }
+}
+export function radioGroupFormControl(options) {
+    return new RadioGroupFormControl(null, options);
+}
+export function booleanRadioGroupFormControl(options = {}) {
+    return radioGroupFormControl({
+        ...options,
+        items: [{ label: tstdlCommonLocalizationKeys.yes, value: true }, { label: tstdlCommonLocalizationKeys.no, value: false }]
+    });
+}
+export function enumRadioGroupFormControl(enumeration, options = {}) {
+    return radioGroupFormControl({
+        ...options,
+        items: enumAsItems(enumeration, options.allowedValues)
+    });
+}
+export function isRadioGroupFormControl(value) {
+    return (value instanceof RadioGroupFormControl);
+}

package/form/controls/select.control.d.ts

@@ -0,0 +1,17 @@
+import type { EnumerationObject, FilledReadonlyArray, TypedOmit } from '../../types.js';
+import type { InitialValue, InitialValueOption } from '../form-control.js';
+import { ItemsFormControl, type ItemsFormControlOptions } from './items.control.js';
+export type SelectFormControlOptions<T, I extends InitialValue<T>> = ItemsFormControlOptions<T, I>;
+export declare class SelectFormControl<T, I extends InitialValue<T> = T | null> extends ItemsFormControl<T, I> {
+    constructor(initialValue: I, options: SelectFormControlOptions<T, I>);
+}
+export declare function selectFormControl<T, I extends InitialValue<T>>(options: SelectFormControlOptions<T, I> & InitialValueOption<I>): SelectFormControl<T, I>;
+export declare function selectFormControl<T, I extends InitialValue<T>>(options: SelectFormControlOptions<T, I>): SelectFormControl<T, T | null>;
+export declare function booleanSelectFormControl<I extends InitialValue<boolean>>(options: TypedOmit<SelectFormControlOptions<boolean, I>, 'items'> & InitialValueOption<I>): SelectFormControl<boolean, I>;
+export declare function booleanSelectFormControl<I extends InitialValue<boolean>>(options?: TypedOmit<SelectFormControlOptions<boolean, I>, 'items'>): SelectFormControl<boolean>;
+export type EnumSelectFormControlOptions<T extends EnumerationObject, I extends InitialValue<T[keyof T]>> = TypedOmit<SelectFormControlOptions<T[keyof T], I>, 'items'> & {
+    allowedValues?: FilledReadonlyArray<T[keyof T]>;
+};
+export declare function enumSelectFormControl<T extends EnumerationObject, I extends InitialValue<T[keyof T]>>(enumeration: T, options: EnumSelectFormControlOptions<T, I> & InitialValueOption<I>): SelectFormControl<T[keyof T], I>;
+export declare function enumSelectFormControl<T extends EnumerationObject, I extends InitialValue<T[keyof T]>>(enumeration: T, options?: EnumSelectFormControlOptions<T, I>): SelectFormControl<T[keyof T]>;
+export declare function isSelectFormControl(value: any): value is SelectFormControl<any, any>;

package/form/controls/select.control.js

@@ -0,0 +1,26 @@
+import { tstdlCommonLocalizationKeys } from '../../text/common-localization.js';
+import { enumAsItems } from '../utils.js';
+import { ItemsFormControl } from './items.control.js';
+export class SelectFormControl extends ItemsFormControl {
+    constructor(initialValue, options) {
+        super(initialValue, options);
+    }
+}
+export function selectFormControl(options) {
+    return new SelectFormControl(null, options);
+}
+export function booleanSelectFormControl(options = {}) {
+    return selectFormControl({
+        ...options,
+        items: [{ label: tstdlCommonLocalizationKeys.yes, value: true }, { label: tstdlCommonLocalizationKeys.no, value: false }]
+    });
+}
+export function enumSelectFormControl(enumeration, options = {}) {
+    return selectFormControl({
+        ...options,
+        items: enumAsItems(enumeration, options.allowedValues)
+    });
+}
+export function isSelectFormControl(value) {
+    return (value instanceof SelectFormControl);
+}

package/form/controls/text.control.d.ts

@@ -0,0 +1,47 @@
+import { type Signal } from '../../signals/index.js';
+import type { ReactiveValue, TypedOmit } from '../../types.js';
+import type { InputAutocomplete } from '../../web-types.js';
+import { FormControl, type FormControlOptions, type InitialValue, type InitialValueOption } from '../form-control.js';
+import type { DynamicTextOption } from '../types.js';
+export type TextFormControlType = 'text' | 'password' | 'email';
+export type AutoFillSuggestionSelectHandler<T = any> = (suggestion: AutoFillSuggestion<T>) => any;
+export type AutoFillSuggestion<T = any> = {
+    display: ReactiveValue<string>;
+    selectValue?: string;
+    data?: T;
+    onSelect?: AutoFillSuggestionSelectHandler<T>;
+};
+export type NormalizedAutoFillSuggestion<T = any> = TypedOmit<AutoFillSuggestion<T>, 'display'> & {
+    display: Signal<string>;
+    searchText: Signal<string>;
+};
+export type TextFormControlOptions<I extends InitialValue<string> = InitialValue<string>> = FormControlOptions<string | I> & {
+    type?: ReactiveValue<TextFormControlType>;
+    autocomplete?: ReactiveValue<InputAutocomplete>;
+    placeholder?: ReactiveValue<DynamicTextOption>;
+    pattern?: ReactiveValue<RegExp | null>;
+    inputPattern?: ReactiveValue<RegExp | null>;
+    trim?: ReactiveValue<boolean>;
+    maxLength?: ReactiveValue<number>;
+    autoFillSuggestions?: ReactiveValue<(string | AutoFillSuggestion)[] | undefined>;
+    filterAutoFillSuggestions?: ReactiveValue<boolean>;
+};
+export declare class TextFormControl<I extends InitialValue<string> = string | null> extends FormControl<string | I, string> {
+    protected readonly internalValidators: Signal<readonly import("../validators/form.validator.js").FormValidator<any>[]>;
+    readonly type: Signal<TextFormControlType>;
+    readonly autocomplete: Signal<InputAutocomplete>;
+    readonly placeholder: Signal<DynamicTextOption>;
+    readonly pattern: Signal<RegExp | null>;
+    readonly inputPattern: Signal<RegExp | null>;
+    readonly trim: Signal<boolean>;
+    readonly maxLength: Signal<number | null>;
+    readonly autoFillSuggestions: Signal<readonly NormalizedAutoFillSuggestion[] | null>;
+    readonly filterAutoFillSuggestions: Signal<boolean>;
+    readonly filteredAutoFillSuggestions: Signal<readonly NormalizedAutoFillSuggestion[] | null>;
+    constructor(initialValue: I, options?: TextFormControlOptions<I>);
+    parseInputValue(value: string | null): string | I | null;
+    formatRawValue(value: string | null): string;
+}
+export declare function textFormControl<I extends InitialValue<string>>(options: TextFormControlOptions<I> & InitialValueOption<I>): TextFormControl<I>;
+export declare function textFormControl<I extends InitialValue<string>>(options?: TextFormControlOptions<I>): TextFormControl;
+export declare function isTextFormControl(value: any): value is TextFormControl<any>;

package/form/controls/text.control.js

@@ -0,0 +1,94 @@
+import { computed, getCurrentSignalsInjector, runInSignalsInjectionContext } from '../../signals/index.js';
+import { normalizeText } from '../../utils/helpers.js';
+import { mailPattern } from '../../utils/patterns.js';
+import { isNotNull, isNull, isNumber, isString } from '../../utils/type-guards.js';
+import { computedInternalValidators } from '../abstract-control.js';
+import { FormControl } from '../form-control.js';
+import { reactiveOptionToSignal } from '../utils.js';
+import { maxLengthValidator, patternValidator } from '../validators/index.js';
+export class TextFormControl extends FormControl {
+    internalValidators = computedInternalValidators(() => {
+        const pattern = this.pattern();
+        const maxLength = this.maxLength();
+        const type = this.type();
+        return [
+            isNumber(maxLength) ? maxLengthValidator(maxLength) : null,
+            (type == 'email') ? patternValidator(mailPattern) : null,
+            isNotNull(pattern) ? patternValidator(pattern) : null
+        ];
+    });
+    type;
+    autocomplete;
+    placeholder;
+    pattern;
+    inputPattern;
+    trim;
+    maxLength;
+    autoFillSuggestions;
+    filterAutoFillSuggestions;
+    filteredAutoFillSuggestions;
+    constructor(initialValue, options = {}) {
+        super(initialValue, options);
+        this.type = reactiveOptionToSignal(options.type ?? 'text', { initialValue: 'text' });
+        this.autocomplete = reactiveOptionToSignal(options.autocomplete ?? 'off', { initialValue: 'off' });
+        this.placeholder = reactiveOptionToSignal(options.placeholder ?? null, { initialValue: null });
+        this.pattern = reactiveOptionToSignal(options.pattern ?? null, { initialValue: null });
+        this.inputPattern = reactiveOptionToSignal(options.inputPattern ?? null, { initialValue: null });
+        this.trim = reactiveOptionToSignal(options.trim ?? true, { initialValue: true });
+        this.maxLength = reactiveOptionToSignal(options.maxLength ?? null, { initialValue: null });
+        const rawAutoFillSuggestions = reactiveOptionToSignal(options.autoFillSuggestions);
+        const signalsInjector = getCurrentSignalsInjector();
+        this.autoFillSuggestions = computed(() => runInSignalsInjectionContext(signalsInjector, () => normalizeAutoFillSuggestions(rawAutoFillSuggestions() ?? null)));
+        this.filterAutoFillSuggestions = reactiveOptionToSignal(options.filterAutoFillSuggestions ?? true, { initialValue: true });
+        this.filteredAutoFillSuggestions = computed(() => {
+            const searchValue = normalizeText(this.value() ?? '');
+            const autoFillSuggestions = this.autoFillSuggestions();
+            if (isNull(autoFillSuggestions)) {
+                return null;
+            }
+            if (!this.filterAutoFillSuggestions() || (searchValue.length == 0)) {
+                return autoFillSuggestions;
+            }
+            return autoFillSuggestions.filter((suggestion) => suggestion.searchText().includes(searchValue));
+        });
+    }
+    parseInputValue(value) {
+        if (isNull(value)) {
+            return null;
+        }
+        const normalized = this.trim() ? value.trim() : value;
+        if (normalized.length == 0) {
+            return null;
+        }
+        return normalized;
+    }
+    formatRawValue(value) {
+        return value ?? '';
+    }
+}
+export function textFormControl(options) {
+    return new TextFormControl(null, options);
+}
+export function isTextFormControl(value) {
+    return (value instanceof TextFormControl);
+}
+function normalizeAutoFillSuggestions(suggestions) {
+    if (isNull(suggestions)) {
+        return null;
+    }
+    return suggestions.map((suggestion) => {
+        if (isString(suggestion)) {
+            return {
+                display: computed(() => suggestion),
+                searchText: computed(() => normalizeText(suggestion)),
+                data: suggestion
+            };
+        }
+        const displaySignal = reactiveOptionToSignal(suggestion.display, { requireSync: true });
+        return {
+            ...suggestion,
+            display: displaySignal,
+            searchText: computed(() => normalizeText(displaySignal()))
+        };
+    });
+}

package/form/controls/time.control.d.ts

@@ -0,0 +1,24 @@
+import type { Signal } from '../../signals/api.js';
+import type { ReactiveValue } from '../../types.js';
+import type { InputAutocomplete } from '../../web-types.js';
+import { FormControl, type FormControlOptions, type InitialValue, type InitialValueOption } from '../form-control.js';
+import type { DynamicTextOption } from '../types.js';
+export type TimeFormControlOptions<I extends InitialValue<number> = InitialValue<number>> = FormControlOptions<number | I> & {
+    autocomplete?: InputAutocomplete;
+    placeholder?: ReactiveValue<DynamicTextOption>;
+    minimum?: ReactiveValue<number | null>;
+    maximum?: ReactiveValue<number | null>;
+};
+export declare class TimeFormControl<I extends InitialValue<number> = number | null> extends FormControl<number | I, string> {
+    protected readonly internalValidators: Signal<readonly import("../index.js").FormValidator<any>[]>;
+    readonly autocomplete: Signal<InputAutocomplete>;
+    readonly placeholder: Signal<DynamicTextOption>;
+    readonly minimum: Signal<number | null>;
+    readonly maximum: Signal<number | null>;
+    constructor(initialValue: I, options?: TimeFormControlOptions<I>);
+    parseInputValue(value: string | null): number | null;
+    formatRawValue(value: number | null): string;
+}
+export declare function timeFormControl<I extends InitialValue<number>>(options: TimeFormControlOptions<I> & InitialValueOption<I>): TimeFormControl<I>;
+export declare function timeFormControl<I extends InitialValue<number>>(options?: TimeFormControlOptions<I>): TimeFormControl;
+export declare function isTimeFormControl(value: any): value is TimeFormControl<any>;

package/form/controls/time.control.js

@@ -0,0 +1,44 @@
+import { Duration } from 'luxon';
+import { isDefined, isNull } from '../../utils/type-guards.js';
+import { millisecondsPerHour, millisecondsPerMinute, millisecondsPerSecond } from '../../utils/units.js';
+import { computedInternalValidators } from '../abstract-control.js';
+import { FormControl } from '../form-control.js';
+import { reactiveOptionToSignal } from '../utils.js';
+import { timeValidator } from '../validators/time.validator.js';
+export class TimeFormControl extends FormControl {
+    internalValidators = computedInternalValidators(() => {
+        const minimum = this.minimum();
+        const maximum = this.maximum();
+        return [(isDefined(minimum) || isDefined(maximum)) ? timeValidator(minimum, maximum) : undefined];
+    });
+    autocomplete;
+    placeholder;
+    minimum;
+    maximum;
+    constructor(initialValue, options = {}) {
+        super(initialValue, options);
+        this.autocomplete = reactiveOptionToSignal(options.autocomplete ?? 'off', { initialValue: 'off' });
+        this.placeholder = reactiveOptionToSignal(options.placeholder ?? null, { initialValue: null });
+        this.minimum = reactiveOptionToSignal(options.minimum ?? null, { initialValue: null });
+        this.maximum = reactiveOptionToSignal(options.maximum ?? null, { initialValue: null });
+    }
+    parseInputValue(value) {
+        if (isNull(value)) {
+            return null;
+        }
+        const [hours, minutes, seconds] = value.split(':').map((part) => Number(part));
+        return ((hours ?? 0) * millisecondsPerHour) + ((minutes ?? 0) * millisecondsPerMinute) + ((seconds ?? 0) * millisecondsPerSecond);
+    }
+    formatRawValue(value) {
+        if (isNull(value) || Number.isNaN(value)) {
+            return '';
+        }
+        return Duration.fromMillis(value).toFormat('hh:mm');
+    }
+}
+export function timeFormControl(options) {
+    return new TimeFormControl(null, options);
+}
+export function isTimeFormControl(value) {
+    return (value instanceof TimeFormControl);
+}

package/form/form-array.d.ts

@@ -0,0 +1,71 @@
+import type { JsonPath } from '../json-path/json-path.js';
+import { type Signal } from '../signals/api.js';
+import type { ReactiveValue } from '../types.js';
+import { type AbstractControl, type AbstractControlParent, type AbstractControlRawValueType, type AbstractControlValueType, type MarkOptions } from './abstract-control.js';
+import { FormContainer, type FormContainerOptions } from './form-container.js';
+import type { FormControlRemoveHandler } from './types.js';
+import type { FormValidatorError } from './validators/form.validator.js';
+export type FormArrayDisplayType = 'simple' | 'tabs';
+export type FormArrayChildBuilder<T = unknown, TRaw = unknown, C extends AbstractControl<T, TRaw> = AbstractControl<T, TRaw>> = (value: T) => C;
+export type FormArrayOptions<T, TRaw, C extends AbstractControl<T, TRaw>> = FormContainerOptions<T[]> & {
+    children?: C[];
+    displayType?: FormArrayDisplayType;
+    allowRemove?: ReactiveValue<boolean>;
+    allowRemoveAll?: ReactiveValue<boolean>;
+    removeHandler?: FormControlRemoveHandler<C & {}>;
+    builder?: FormArrayChildBuilder<T, TRaw, C>;
+};
+export type FormArrayByControl<C extends AbstractControl = AbstractControl> = FormArray<AbstractControlValueType<C>, AbstractControlRawValueType<C>, C>;
+export type FormArrayChild<T extends FormArray> = ReturnType<T['children']>[number];
+export declare class FormArray<T = any, TRaw = any, C extends AbstractControl<T, TRaw> = AbstractControl<T, TRaw>> extends FormContainer<T[], TRaw[]> implements Iterable<C> {
+    #private;
+    protected readonly internalValidators: null;
+    readonly children: Signal<readonly C[]>;
+    readonly enabledChildren: Signal<readonly C[]>;
+    readonly size: Signal<number>;
+    readonly displayType: Signal<FormArrayDisplayType>;
+    readonly allowRemove: Signal<boolean>;
+    readonly allowRemoveAll: Signal<boolean>;
+    readonly removedChildren: Signal<C[]>;
+    readonly removeHandler: FormControlRemoveHandler<any>;
+    readonly builder: FormArrayChildBuilder<T, TRaw, C>;
+    /** Raw values of all children whether disabled or not */
+    readonly rawValue: Signal<TRaw[]>;
+    /** Values of all enabled children */
+    readonly value: Signal<T[]>;
+    readonly dirty: Signal<boolean>;
+    readonly touched: Signal<boolean>;
+    readonly localErrors: Signal<readonly FormValidatorError[]>;
+    readonly childrenErrors: Signal<FormValidatorError[]>;
+    readonly errors: Signal<FormValidatorError[]>;
+    readonly errorDebug: Signal<{
+        _self: readonly FormValidatorError[];
+    } | null>;
+    constructor(options?: FormArrayOptions<T, TRaw, C>);
+    get(index: number): C | undefined;
+    getValue(index: number): T | undefined;
+    getRawValue(index: number): TRaw | undefined;
+    reset(): void;
+    indexOf(child: C): number | null;
+    add(...children: C[]): void;
+    addValue(...values: T[]): void;
+    removeAll(): void;
+    remove(child: C): void;
+    removeAt(index: number, count?: number): void;
+    setValue(values: T[]): void;
+    markAsDirty({ onlySelf }?: MarkOptions): void;
+    markAsTouched({ onlySelf }?: MarkOptions): void;
+    setParent(parent: AbstractControlParent, force?: boolean): void;
+    setParent(parent: null): void;
+    [Symbol.iterator](): Iterator<C>;
+    getChildPath(child: C): Signal<JsonPath>;
+    private updateParents;
+}
+export declare function formArray<C extends AbstractControl>(options: FormArrayOptions<AbstractControlValueType<C>, AbstractControlRawValueType<C>, C> & {
+    builder: FormArrayChildBuilder<AbstractControlValueType<C>, AbstractControlRawValueType<C>, C>;
+}): FormArray<AbstractControlValueType<C>, AbstractControlRawValueType<C>, C>;
+export declare function formArray<C extends AbstractControl>(options: FormArrayOptions<AbstractControlValueType<C>, AbstractControlRawValueType<C>, C> & {
+    children: C[];
+}): FormArray<AbstractControlValueType<C>, AbstractControlRawValueType<C>, C>;
+export declare function formArray<T, TRaw, C extends AbstractControl>(options: FormArrayOptions<T, TRaw, C>): FormArray<T, TRaw, C>;
+export declare function isFormArray(value: any): value is FormArray;

package/form/form-array.js

@@ -0,0 +1,188 @@
+import { computed, signal, untracked } from '../signals/api.js';
+import { switchAll } from '../signals/index.js';
+import { createArray } from '../utils/array/array.js';
+import { fromEntries } from '../utils/object/object.js';
+import { deferThrow } from '../utils/throw.js';
+import { isDefined, isNotNull } from '../utils/type-guards.js';
+import { ignoreFormValue } from './abstract-control.js';
+import { FormContainer } from './form-container.js';
+import { bindReactiveOption } from './utils.js';
+export class FormArray extends FormContainer {
+    #children = signal([]);
+    #selfTouched = signal(false);
+    #selfDirty = signal(false);
+    #displayType = signal('tabs');
+    #allowRemove = signal(true);
+    #allowRemoveAll = signal(true);
+    #removedChildren = signal(new Set());
+    internalValidators = null;
+    children = this.#children.asReadonly();
+    enabledChildren = computed(() => this.#children().filter((child) => child.enabled()));
+    size = computed(() => this.children().length);
+    displayType = this.#displayType.asReadonly();
+    allowRemove = this.#allowRemove.asReadonly();
+    allowRemoveAll = this.#allowRemoveAll.asReadonly();
+    removedChildren = computed(() => [...this.#removedChildren()]);
+    removeHandler;
+    builder;
+    /** Raw values of all children whether disabled or not */
+    rawValue = computed(() => this.#children().map((child) => child.rawValue()));
+    /** Values of all enabled children */
+    value = computed(() => this.enabledChildren().map((child) => child.value()));
+    dirty = computed(() => this.#selfDirty() || this.children().some((child) => child.dirty()));
+    touched = computed(() => this.#selfTouched() || this.children().some((child) => child.touched()));
+    localErrors = switchAll(() => {
+        const validations = this.validators().map((validator) => validator(this));
+        return computed(() => validations.map((validation) => validation()).filter(isNotNull));
+    });
+    childrenErrors = computed(() => this.children().flatMap((child) => child.errors()));
+    errors = computed(() => [
+        ...this.localErrors(),
+        ...this.childrenErrors()
+    ]);
+    errorDebug = computed(() => this.valid()
+        ? null
+        : ({
+            _self: this.localErrors(),
+            ...fromEntries(this.children().map((child, index) => [index, child.errorDebug()]).filter(([, errorDebug]) => isNotNull(errorDebug)))
+        }));
+    constructor(options = {}) {
+        super(options);
+        this.builder = options.builder ?? deferThrow(() => new Error('Builder required to add children by value'));
+        this.removeHandler = options.removeHandler ?? (() => true);
+        if (isDefined(options.children)) {
+            this.add(...options.children);
+        }
+        bindReactiveOption(options.displayType, this.#displayType);
+        bindReactiveOption(options.allowRemove, this.#allowRemove);
+        bindReactiveOption(options.allowRemoveAll, this.#allowRemoveAll);
+    }
+    get(index) {
+        return this.children()[index];
+    }
+    getValue(index) {
+        return this.get(index)?.value();
+    }
+    getRawValue(index) {
+        return this.get(index)?.rawValue();
+    }
+    reset() {
+        for (const child of untracked(this.#children)) {
+            child.reset();
+        }
+        this.#removedChildren.set(new Set());
+    }
+    indexOf(child) {
+        const index = untracked(this.children).indexOf(child);
+        return (index == -1) ? null : index;
+    }
+    add(...children) {
+        this.#children.set([...untracked(this.children), ...children]);
+        for (const child of children) {
+            child.setParent(this);
+        }
+    }
+    addValue(...values) {
+        const children = values.map((value) => this.builder(value));
+        this.add(...children);
+    }
+    removeAll() {
+        const newlyRemovedChildren = [];
+        for (const child of untracked(this.children)) {
+            if (untracked(child.parent) == this) {
+                child.setParent(null);
+            }
+            newlyRemovedChildren.push(child);
+        }
+        this.#removedChildren.update((removedChildren) => new Set([...removedChildren, ...newlyRemovedChildren]));
+        this.#children.set([]);
+    }
+    remove(child) {
+        const index = this.indexOf(child);
+        if (isNotNull(index)) {
+            this.removeAt(index);
+        }
+    }
+    removeAt(index, count = 1) {
+        const children = untracked(this.children);
+        const newlyRemovedChildren = [];
+        const end = Math.min(index + count, children.length);
+        if (end <= index) {
+            return;
+        }
+        for (let i = index; i < end; i++) {
+            const child = children[i];
+            child.setParent(null);
+            newlyRemovedChildren.push(child);
+        }
+        const spliced = children.toSpliced(index, 1);
+        this.#removedChildren.update((removedChildren) => new Set([...removedChildren, ...newlyRemovedChildren]));
+        this.#children.set(spliced);
+    }
+    setValue(values) {
+        if (values == ignoreFormValue) {
+            return;
+        }
+        let children = untracked(this.#children);
+        const newlyRemovedChildren = [];
+        if (values.length < children.length) {
+            for (let i = values.length; i < children.length - 1; i++) {
+                const child = children[i];
+                child.setParent(null);
+                newlyRemovedChildren.push(child);
+            }
+            children = children.slice(0, values.length);
+        }
+        else if (values.length > children.length) {
+            const newChildren = createArray(values.length - children.length, (index) => this.builder(values[children.length + index]));
+            children = [...children, ...newChildren];
+        }
+        for (let i = 0; i < values.length; i++) {
+            children[i].setValue(values[i]);
+        }
+        this.#removedChildren.update((removedChildren) => new Set([...removedChildren, ...newlyRemovedChildren]));
+        this.#children.set(children);
+    }
+    markAsDirty({ onlySelf = false } = {}) {
+        this.#selfDirty.set(true);
+        if (onlySelf) {
+            return;
+        }
+        for (const child of untracked(this.children)) {
+            child.markAsDirty();
+        }
+    }
+    markAsTouched({ onlySelf = false } = {}) {
+        this.#selfTouched.set(true);
+        if (onlySelf) {
+            return;
+        }
+        for (const child of untracked(this.children)) {
+            child.markAsTouched();
+        }
+    }
+    setParent(parent, force) {
+        super.setParent(parent, force);
+        this.updateParents(true);
+    }
+    *[Symbol.iterator]() {
+        yield* untracked(this.children);
+    }
+    getChildPath(child) {
+        return computed(() => {
+            const key = this.#children().indexOf(child);
+            return this.path().add((key >= 0) ? key : 'CHILD_NOT_FOUND');
+        });
+    }
+    updateParents(force) {
+        for (const child of untracked(this.#children)) {
+            child.setParent(this, force);
+        }
+    }
+}
+export function formArray(options) {
+    return new FormArray(options); // eslint-disable-line @typescript-eslint/no-unsafe-return
+}
+export function isFormArray(value) {
+    return (value instanceof FormArray);
+}

package/form/form-button.d.ts

@@ -0,0 +1,40 @@
+import type { PartialProperty, ReactiveValue, TypedOmit } from '../types.js';
+import type { FormDialog } from './form-dialog.js';
+import { FormHeaderFooterElement, type FormHeaderFooterElementOptions } from './form-header-footer-element.js';
+import type { DynamicTextOption } from './types.js';
+export type FormButtonType = 'button' | 'submit' | 'reset';
+export type FormButtonStyle = 'basic' | 'flat' | 'raised' | 'stroked' | 'icon' | 'fab';
+export type FormButtonColor = 'primary' | 'basic' | 'secondary' | 'warn';
+export type IconLocation = 'before' | 'after';
+export type IconSize = 'small' | 'normal';
+export type FormButtonHandler = () => any;
+export type FormButtonOptions = FormHeaderFooterElementOptions & {
+    handler: FormButtonHandler;
+    label?: ReactiveValue<DynamicTextOption>;
+    type?: ReactiveValue<FormButtonType | null>;
+    disabled?: ReactiveValue<boolean | null>;
+    style?: ReactiveValue<FormButtonStyle | null>;
+    color?: ReactiveValue<FormButtonColor | null>;
+    icon?: ReactiveValue<string | null>;
+    iconLocation?: ReactiveValue<IconLocation | null>;
+    iconSize?: ReactiveValue<IconSize | null>;
+};
+export declare class FormButton extends FormHeaderFooterElement {
+    #private;
+    readonly handler: FormButtonHandler;
+    readonly label: import("../signals/api.js").Signal<DynamicTextOption>;
+    readonly type: import("../signals/api.js").Signal<FormButtonType>;
+    readonly disabled: import("../signals/api.js").Signal<boolean>;
+    readonly style: import("../signals/api.js").Signal<FormButtonStyle>;
+    readonly color: import("../signals/api.js").Signal<FormButtonColor>;
+    readonly icon: import("../signals/api.js").Signal<string | null>;
+    readonly iconLocation: import("../signals/api.js").Signal<IconLocation>;
+    readonly iconSize: import("../signals/api.js").Signal<IconSize>;
+    constructor(options: FormButtonOptions);
+}
+export declare function formButton(options: FormButtonOptions): FormButton;
+export declare function dialogFormButton(options: {
+    dialog: FormDialog;
+    showErrors?: boolean;
+} & TypedOmit<PartialProperty<FormButtonOptions, 'handler'>, 'icon' | 'color'>): FormButton;
+export declare function isFormButton(value: any): value is FormButton;

package/form/form-button.js

@@ -0,0 +1,49 @@
+import { computed, signal } from '../signals/api.js';
+import { FormHeaderFooterElement } from './form-header-footer-element.js';
+import { bindReactiveOption } from './utils.js';
+export class FormButton extends FormHeaderFooterElement {
+    #label = signal(null);
+    #type = signal('button');
+    #disabled = signal(false);
+    #style = signal('flat');
+    #color = signal('primary');
+    #icon = signal(null);
+    #iconLocation = signal('before');
+    #iconSize = signal('normal');
+    handler;
+    label = this.#label.asReadonly();
+    type = this.#type.asReadonly();
+    disabled = this.#disabled.asReadonly();
+    style = this.#style.asReadonly();
+    color = this.#color.asReadonly();
+    icon = this.#icon.asReadonly();
+    iconLocation = this.#iconLocation.asReadonly();
+    iconSize = this.#iconSize.asReadonly();
+    constructor(options) {
+        super(options);
+        this.handler = options.handler;
+        bindReactiveOption(options.label, this.#label, { defaultValue: null });
+        bindReactiveOption(options.type, this.#type, { defaultValue: 'button' });
+        bindReactiveOption(options.disabled, this.#disabled, { defaultValue: false });
+        bindReactiveOption(options.style, this.#style, { defaultValue: 'flat' });
+        bindReactiveOption(options.color, this.#color, { defaultValue: 'primary' });
+        bindReactiveOption(options.icon, this.#icon, { defaultValue: null });
+        bindReactiveOption(options.iconLocation, this.#iconLocation, { defaultValue: 'before' });
+        bindReactiveOption(options.iconSize, this.#iconSize, { defaultValue: 'normal' });
+    }
+}
+export function formButton(options) {
+    return new FormButton(options);
+}
+export function dialogFormButton(options) {
+    const showError = computed(() => ((options.showErrors ?? true) ? options.dialog.touched() ? options.dialog.invalid() : false : false));
+    return formButton({
+        handler: () => options.dialog.openDialog(),
+        ...options,
+        icon: computed(() => (showError() ? 'warning' : null)),
+        color: computed(() => (showError() ? 'warn' : null))
+    });
+}
+export function isFormButton(value) {
+    return (value instanceof FormButton);
+}

package/form/form-container.d.ts

@@ -0,0 +1,24 @@
+import type { OneOrMany, ReactiveValue } from '../types.js';
+import { AbstractControl, type AbstractControlOptions } from './abstract-control.js';
+import type { FormHeaderFooterElement } from './form-header-footer-element.js';
+import type { ClassesOption, ClassesOptions } from './types.js';
+export type FormContainerOptions<T> = AbstractControlOptions<T> & ClassesOptions & {
+    displayLabel?: ReactiveValue<boolean>;
+    displayLine?: ReactiveValue<boolean>;
+    headerContainerClasses?: ReactiveValue<ClassesOption>;
+    footerContainerClasses?: ReactiveValue<ClassesOption>;
+    headerElements?: ReactiveValue<OneOrMany<FormHeaderFooterElement>>;
+    footerElements?: ReactiveValue<OneOrMany<FormHeaderFooterElement>>;
+};
+export declare abstract class FormContainer<T, TRaw> extends AbstractControl<T, TRaw> {
+    #private;
+    readonly displayLabel: import("../signals/api.js").Signal<boolean>;
+    readonly displayLine: import("../signals/api.js").Signal<boolean>;
+    readonly headerElements: import("../signals/api.js").Signal<readonly FormHeaderFooterElement[]>;
+    readonly footerElements: import("../signals/api.js").Signal<readonly FormHeaderFooterElement[]>;
+    readonly headerContainerClasses: import("../signals/api.js").Signal<readonly string[]>;
+    readonly footerContainerClasses: import("../signals/api.js").Signal<readonly string[]>;
+    readonly classes: import("../signals/api.js").Signal<readonly string[]>;
+    constructor(options: FormContainerOptions<T>);
+}
+export declare function isFormContainer(value: any): value is FormContainer<any, any>;