@rxdi/forms 0.7.212 → 0.7.214

package/dist/form.decorator.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = Form;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const rxjs_1 = require("rxjs");
 const form_group_1 = require("./form.group");
-const rx_fake_1 = require("./rx-fake");
 function Form(options = {
     strategy: 'none',
 }) {
@@ -10,14 +11,17 @@ function Form(options = {
         if (!options.name) {
             throw new Error('Missing form name');
         }
-        const Destroy = clazz.constructor.prototype.disconnectedCallback || rx_fake_1.noop;
-        const UpdateFirst = clazz.constructor.prototype.firstUpdated || rx_fake_1.noop;
-        const Connect = clazz.constructor.prototype.connectedCallback || rx_fake_1.noop;
+        const Destroy = clazz.constructor.prototype.disconnectedCallback || rxjs_1.noop;
+        const UpdateFirst = clazz.constructor.prototype.firstUpdated || rxjs_1.noop;
+        const Connect = clazz.constructor.prototype.connectedCallback || rxjs_1.noop;
         clazz.constructor.prototype.connectedCallback = function () {
             if (!(this[name] instanceof form_group_1.FormGroup)) {
                 throw new Error('Value provided is not an instance of FormGroup!');
             }
             this[name].setParentElement(this).setOptions(options).prepareValues();
+            if (options.model && this[options.model]) {
+                this[name].patchValue(this[options.model]);
+            }
             return Connect.call(this);
         };
         clazz.constructor.prototype.firstUpdated = function () {

package/dist/form.group.d.ts

@@ -1,18 +1,20 @@
-import { FormInputOptions, FormOptions, ErrorObject, AbstractInput } from './form.tokens';
 import { LitElement } from '@rxdi/lit-html';
+import { AbstractControl, AbstractInput, ErrorObject, FormInputOptions, FormOptions, NestedKeyOf, UnwrapValue, ValidatorFn } from './form.tokens';
 export declare class FormGroup<T = FormInputOptions, E = {
     [key: string]: never;
-}> {
-    validators: Map<string, Function[]>;
+}> implements AbstractControl<UnwrapValue<T>> {
+    validators: Map<string, ValidatorFn[]>;
     valid: boolean;
     invalid: boolean;
-    errors: T;
+    errors: UnwrapValue<T>;
+    private controls;
     private readonly _valueChanges;
     private form;
     private errorMap;
     private inputs;
     private options;
     private parentElement;
+    private subscriptions;
     constructor(value?: T, errors?: E);
     init(): void;
     prepareValues(): this;
@@ -20,8 +22,10 @@ export declare class FormGroup<T = FormInputOptions, E = {
     getParentElement(): LitElement;
     setOptions(options: FormOptions): this;
     getOptions(): FormOptions;
-    get valueChanges(): import("rxjs").Observable<T>;
-    updateValueAndValidity(): Promise<ErrorObject[]>;
+    get valueChanges(): import("rxjs").Observable<UnwrapValue<T>>;
+    updateValueAndValidity(): Promise<(ErrorObject | {
+        message: string;
+    })[]>;
     private updateValueAndValidityOnEvent;
     applyValidationContext({ errors, element }: ErrorObject): boolean;
     querySelectForm(shadowRoot: HTMLElement | ShadowRoot): HTMLFormElement;
@@ -31,20 +35,22 @@ export declare class FormGroup<T = FormInputOptions, E = {
     setElementValidity(el: AbstractInput, validity?: boolean): Promise<void>;
     setElementDirty(input: AbstractInput): void;
     isInputPresentOnStage(input: AbstractInput): number;
+    private getModelKeyName;
     validate(element: AbstractInput): Promise<ErrorObject>;
     private mapInputErrors;
-    get(name: keyof T): AbstractInput;
-    getError(inputName: keyof T, errorKey: keyof E): never;
-    hasError(inputName: keyof T, errorKey: keyof E): boolean;
+    get<K extends NestedKeyOf<T>>(name: K): AbstractControl | AbstractInput;
+    getError(inputName: keyof T, errorKey: string): never;
+    hasError(inputName: keyof T, errorKey: string): boolean;
     reset(): void;
     setFormValidity(validity?: boolean): void;
     resetErrors(): void;
-    get value(): T;
-    set value(value: T);
+    get value(): UnwrapValue<T>;
+    set value(value: UnwrapValue<T>);
     unsubscribe(): void;
     getValue(name: keyof T): T[keyof T];
-    setValue(name: keyof T, value: any): void;
-    setFormValue(value: T): void;
+    patchValue(value: Partial<UnwrapValue<T>>): void;
+    setValue(name: keyof T, value: unknown): void;
+    setFormValue(value: UnwrapValue<T>): void;
     setFormElement(form: HTMLFormElement): this;
     setInputs(inputs: AbstractInput[]): void;
     getFormElement(): HTMLFormElement;

package/dist/form.group.js

@@ -10,34 +10,66 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGroup = void 0;
+const rxjs_1 = require("rxjs");
 const form_tokens_1 = require("./form.tokens");
-const rx_fake_1 = require("./rx-fake");
 class FormGroup {
     constructor(value, errors) {
         this.validators = new Map();
         this.valid = true;
         this.invalid = false;
         this.errors = {};
+        this.controls = new Map();
         this.errorMap = new Map();
         this.inputs = new Map();
         this.options = {};
-        this._valueChanges = new rx_fake_1.BehaviorSubject(value);
+        this.subscriptions = new Map();
+        this._valueChanges = new rxjs_1.BehaviorSubject(value);
+        if (value) {
+            Object.keys(value).forEach((key) => {
+                if (typeof value[key] === 'object' &&
+                    value[key] !== null &&
+                    (value[key]['controls'] || value[key]['push']) &&
+                    value[key]['valueChanges']) {
+                    // It's likely a FormGroup or FormArray
+                    const control = value[key];
+                    if (control.name === '' || control.name === undefined) {
+                        control.name = key;
+                    }
+                    this.controls.set(key, control);
+                    if (control.valueChanges) {
+                        this.subscriptions.set(key, control.valueChanges.subscribe(() => {
+                            this._valueChanges.next(this.value);
+                        }));
+                    }
+                }
+            });
+        }
     }
     init() {
         this.setFormElement(this.querySelectForm(this.parentElement.shadowRoot || this.parentElement)).setInputs(this.mapEventToInputs(this.querySelectorAllInputs()));
+        this.controls.forEach((c) => {
+            if (c.init)
+                c.init();
+        });
     }
     prepareValues() {
         Object.keys(this.value).forEach((v) => {
+            // Skip nested controls
+            if (this.controls.has(v))
+                return;
             const value = this.value[v];
             this.errors[v] = this.errors[v] || {};
-            if (value.constructor === Array) {
+            if (value && value.constructor === Array) {
                 if (value[1] && value[1].constructor === Array) {
                     value[1].forEach((val) => {
                         const oldValidators = this.validators.get(v) || [];
                         this.validators.set(v, [...oldValidators, val]);
                     });
                 }
-                if (value[0].constructor === String ||
+                if (value[0] === undefined || value[0] === null) {
+                    this.value[v] = '';
+                }
+                else if (value[0].constructor === String ||
                     value[0].constructor === Number ||
                     value[0].constructor === Boolean) {
                     this.value[v] = value[0];
@@ -51,6 +83,11 @@ class FormGroup {
     }
     setParentElement(parent) {
         this.parentElement = parent;
+        this.controls.forEach((c) => {
+            if (c.setParentElement) {
+                c.setParentElement(parent);
+            }
+        });
         return this;
     }
     getParentElement() {
@@ -58,6 +95,11 @@ class FormGroup {
     }
     setOptions(options) {
         this.options = options;
+        this.controls.forEach((c) => {
+            if (c.setOptions) {
+                c.setOptions(Object.assign(Object.assign({}, options), { namespace: this.options.namespace ? `${this.options.namespace}.${c.name}` : c.name }));
+            }
+        });
         return this;
     }
     getOptions() {
@@ -66,6 +108,7 @@ class FormGroup {
     get valueChanges() {
         return this._valueChanges.asObservable();
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     updateValueAndValidity() {
         return __awaiter(this, void 0, void 0, function* () {
             this.resetErrors();
@@ -75,11 +118,21 @@ class FormGroup {
                 this.setElementDirty(i);
                 return yield this.validate(i);
             })));
+            for (const [key, control] of this.controls.entries()) {
+                if (control.updateValueAndValidity) {
+                    yield control.updateValueAndValidity();
+                    if (control.invalid) {
+                        this.invalid = true;
+                        this.valid = false;
+                    }
+                }
+            }
             this.getParentElement().requestUpdate();
-            return inputs.filter((e) => e.errors.length);
+            return inputs.filter((e) => e.errors.length) || (this.invalid ? [{ message: 'Invalid Form' }] : []);
         });
     }
     updateValueAndValidityOnEvent(method) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const self = this;
         return function (event) {
             return __awaiter(this, void 0, void 0, function* () {
@@ -101,7 +154,7 @@ class FormGroup {
                     value = Number(value);
                 }
                 const inputsWithBindings = [
-                    ...(self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`)).values(),
+                    ...self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`).values(),
                 ];
                 if (hasMultipleBindings > 1) {
                     if (!self.options.multi && this.type === 'checkbox') {
@@ -117,13 +170,13 @@ class FormGroup {
                 if (self.options.strict) {
                     if (isValid) {
                         yield self.setElementValidity(this, isValid);
-                        self.setValue(this.name, value);
+                        self.setValue(self.getModelKeyName(this.name), value);
                     }
                     self.parentElement.requestUpdate();
                     return method.call(self.parentElement, event);
                 }
                 yield self.setElementValidity(this, isValid);
-                self.setValue(this.name, value);
+                self.setValue(self.getModelKeyName(this.name), value);
                 self.parentElement.requestUpdate();
                 return method.call(self.parentElement, event);
             });
@@ -132,18 +185,21 @@ class FormGroup {
     applyValidationContext({ errors, element }) {
         const form = this.getFormElement();
         if (errors.length) {
-            this.invalid = form.invalid = true;
-            this.valid = form.valid = false;
+            this.invalid = form['invalid'] = true;
+            this.valid = form['valid'] = false;
             return false;
         }
         else {
-            this.errors[element.name] = {};
-            this.invalid = form.invalid = false;
-            this.valid = form.valid = true;
+            this.errors[this.getModelKeyName(element.name)] = {};
+            this.invalid = form['invalid'] = !form.checkValidity();
+            this.valid = form['valid'] = form.checkValidity();
             return true;
         }
     }
     querySelectForm(shadowRoot) {
+        if (this.options['form']) {
+            return this.options['form'];
+        }
         const form = shadowRoot.querySelector(`form[name="${this.options.name}"]`);
         if (!form) {
             throw new Error(`Form element with name "${this.options.name}" not present inside ${this.getParentElement().outerHTML} component`);
@@ -155,10 +211,9 @@ class FormGroup {
         return form;
     }
     querySelectAll(name) {
-        return [
-            ...this.form.querySelectorAll(name).values(),
-        ];
+        return [...this.form.querySelectorAll(name).values()];
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     querySelectorAllInputs() {
         var _a;
         return [...((_a = this.options.customElements) !== null && _a !== void 0 ? _a : []), 'input', 'select', 'textarea']
@@ -167,11 +222,14 @@ class FormGroup {
             .filter((el) => this.isInputPresentOnStage(el))
             .filter((el) => !!el.name);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mapEventToInputs(inputs = []) {
         return inputs.map((el) => {
             const strategy = `on${this.options.strategy}`;
             if (!el[strategy]) {
-                el[strategy] = function () { };
+                el[strategy] = function () {
+                    //
+                };
             }
             const customAttributes = Object.keys(el.attributes)
                 .map((k) => (el.attributes[k].name.startsWith('#') ? el.attributes[k] : null))
@@ -202,20 +260,39 @@ class FormGroup {
     }
     isInputPresentOnStage(input) {
         if (input.outerHTML === '<input type="submit" style="display: none;">') {
-            return;
+            return 0;
         }
-        const isInputPresent = Object.keys(this.value).filter((v) => v === input.name);
+        const keyIndex = this.getModelKeyName(input.name);
+        const isInputPresent = Object.keys(this.value).filter((v) => v === keyIndex);
         return isInputPresent.length;
     }
+    getModelKeyName(domName) {
+        if (this.options['namespace']) {
+            // pattern: namespace[key] or namespace.key
+            // Example: allowedIps[0].ip -> namespace=allowedIps[0] -> key=ip
+            if (domName.startsWith(this.options['namespace'])) {
+                const suffix = domName.replace(this.options['namespace'], '');
+                // Handle .key or [key]
+                if (suffix.startsWith('.')) {
+                    return suffix.substring(1);
+                }
+                if (suffix.startsWith('[')) {
+                    return suffix.substring(1, suffix.length - 1); // Not dealing with that yet
+                }
+            }
+            return domName;
+        }
+        return domName;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     validate(element) {
         return __awaiter(this, void 0, void 0, function* () {
             let errors = [];
             element.setCustomValidity('');
-            this.setFormValidity(true);
             if (!element.checkValidity()) {
                 return {
                     errors: errors.concat(Object.keys(form_tokens_1.InputValidityState)
-                        .map((key) => element.validity[key] ? { key, message: element.validationMessage } : null)
+                        .map((key) => (element.validity[key] ? { key, message: element.validationMessage } : null))
                         .filter((i) => !!i)),
                     element,
                 };
@@ -224,32 +301,44 @@ class FormGroup {
             if (!errors.length) {
                 return { errors: [], element };
             }
-            this.setFormValidity(false);
             element.setCustomValidity(errors[0].message);
             return { element, errors };
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mapInputErrors(element) {
         return __awaiter(this, void 0, void 0, function* () {
-            const res = yield Promise.all((this.validators.get(element.name) || []).map((v) => __awaiter(this, void 0, void 0, function* () {
-                this.errors[element.name] = this.errors[element.name] || {};
+            const modelKey = this.getModelKeyName(element.name);
+            const res = yield Promise.all((this.validators.get(modelKey) || []).map((v) => __awaiter(this, void 0, void 0, function* () {
+                this.errors[modelKey] = this.errors[modelKey] || {};
                 const error = yield v.bind(this.getParentElement())(element);
                 // if (error) {
                 //   element.focus();
                 // }
                 if (error && error.key) {
-                    this.errors[element.name][error.key] = error.message;
+                    this.errors[modelKey][error.key] = error.message;
                     this.errorMap.set(v, error.key);
                     return { key: error.key, message: error.message };
                 }
                 else if (this.errorMap.has(v)) {
-                    delete this.errors[element.name][this.errorMap.get(v)];
+                    delete this.errors[modelKey][this.errorMap.get(v)];
                 }
             })));
             return res.filter((i) => !!i);
         });
     }
     get(name) {
+        if (this.controls.has(name)) {
+            return this.controls.get(name);
+        }
+        if (String(name).includes('.')) {
+            const names = String(name).split('.');
+            const key = names.shift();
+            const control = this.controls.get(key);
+            if (control && control.get) {
+                return control.get(names.join('.'));
+            }
+        }
         return this.inputs.get(name);
     }
     getError(inputName, errorKey) {
@@ -277,7 +366,11 @@ class FormGroup {
         this.errorMap.clear();
     }
     get value() {
-        return this._valueChanges.getValue();
+        const values = this._valueChanges.getValue();
+        this.controls.forEach((control, key) => {
+            values[key] = control.value;
+        });
+        return values;
     }
     set value(value) {
         this._valueChanges.next(value);
@@ -285,16 +378,35 @@ class FormGroup {
     unsubscribe() {
         this.reset();
         this._valueChanges.unsubscribe();
+        this.subscriptions.forEach((s) => s.unsubscribe());
+        this.subscriptions.clear();
+        this.controls.forEach((c) => { var _a; return (_a = c.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
     getValue(name) {
         return this.value[name];
     }
+    patchValue(value) {
+        if (!value) {
+            return;
+        }
+        Object.keys(value).forEach((key) => {
+            if (this.controls.has(key) && this.controls.get(key)['patchValue']) {
+                this.controls.get(key)['patchValue'](value[key]);
+            }
+            else {
+                this.setValue(key, value[key]);
+            }
+        });
+    }
     setValue(name, value) {
         const input = this.get(name);
         if (!input) {
-            return;
+            // If no input, maybe just set the value in model?
+            // User code had return; but we might want to update model even if no input?
+            //  return;
         }
-        input.value = value;
+        if (input && input.value !== undefined)
+            input.value = value;
         const values = this.value;
         values[name] = value;
         this.value = values;
@@ -304,12 +416,17 @@ class FormGroup {
     }
     setFormElement(form) {
         this.form = form;
+        this.controls.forEach((c) => {
+            if (c.setFormElement)
+                c.setFormElement(form);
+        });
         return this;
     }
     setInputs(inputs) {
         this.inputs = new Map(inputs.map((e) => {
-            e.value = this.getValue(e.name);
-            return [e.name, e];
+            const key = this.getModelKeyName(e.name);
+            e.value = this.getValue(key);
+            return [key, e];
         }));
     }
     getFormElement() {

package/dist/form.tokens.d.ts

@@ -1,3 +1,14 @@
+import { LitElement } from '@rxdi/lit-html';
+import { Observable } from 'rxjs';
+export type UnwrapValue<T> = T extends AbstractControl<infer U> ? U : T extends {
+    [key: string]: any;
+} ? {
+    [K in keyof T]: UnwrapValue<T[K]>;
+} : T;
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...0[]];
+export type NestedKeyOf<T, D extends number = 3> = [D] extends [0] ? never : T extends object ? {
+    [K in keyof T & (string | number)]: T[K] extends AbstractControl<infer U> ? U extends object ? `${K}` | `${K}.${NestedKeyOf<U, Prev[D]>}` : `${K}` : T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K], Prev[D]>}` : `${K}`;
+}[keyof T & (string | number)] : never;
 export type FormStrategies = keyof WindowEventMap;
 export interface FormOptions {
     /** Name of the form element */
@@ -14,9 +25,34 @@ export interface FormOptions {
      * Example can be found here https://gist.github.com/Stradivario/57acf0fa19900867a7f55b0f01251d6e
      * */
     customElements?: string[];
+    /**
+     * Internal property for handling nested forms.
+     */
+    namespace?: string;
+    /**
+     * Property name of the model to bind to the form
+     */
+    model?: string;
+}
+export interface AbstractControl<T = any> {
+    setOptions(options: FormOptions): this | void;
+    getOptions(): FormOptions;
+    init(): void;
+    setParentElement(parent: LitElement): this | void;
+    setFormElement(form: HTMLFormElement): this | void;
+    unsubscribe(): void;
+    valueChanges: Observable<T>;
+    value: T;
+    valid: boolean;
+    invalid: boolean;
+    updateValueAndValidity?(): Promise<any>;
+    name?: string;
+    push?(control: AbstractControl): void;
+    getFormElement?(): HTMLFormElement;
 }
+export type ValidatorFn = (element: AbstractInput | HTMLInputElement) => Promise<InputErrorMessage | void> | InputErrorMessage | void;
 export interface FormInputOptions {
-    [key: string]: [string, Function[]];
+    [key: string]: [string | number | boolean | Date, ValidatorFn[]];
 }
 export interface InputErrorMessage<T = any> {
     key: T;
@@ -46,3 +82,4 @@ export declare const InputValidityState: {
     valueMissing: "valueMissing";
 };
 export type InputValidityState = keyof typeof InputValidityState;
+export {};

package/dist/form.tokens.js

@@ -18,5 +18,5 @@ exports.InputValidityState = strEnum([
     'tooShort',
     'typeMismatch',
     'valid',
-    'valueMissing'
+    'valueMissing',
 ]);

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './form.decorator';
 export * from './form.group';
 export * from './form.tokens';
+export * from './form.array';

package/dist/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./form.decorator"), exports);
 __exportStar(require("./form.group"), exports);
 __exportStar(require("./form.tokens"), exports);
+__exportStar(require("./form.array"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/forms",
-  "version": "0.7.212",
+  "version": "0.7.214",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",
@@ -12,11 +12,15 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@rxdi/lit-html": "^0.7.211",
+    "@rxdi/lit-html": "^0.7.213",
     "@types/node": "^25.0.3",
     "rxjs": "^7.8.2",
     "typescript": "^5.9.3"
   },
+  "peerDependencies": {
+    "rxjs": "^7.8.2",
+    "@rxdi/lit-html": "*"
+  },
   "types": "./dist/index.d.ts",
   "module": "./dist/index.js",
   "typings": "./dist/index.d.ts"

package/dist/rx-fake.d.ts

@@ -1,34 +0,0 @@
-import { BehaviorSubject as BS, Observable as O, Subscription as S } from 'rxjs';
-type OBS<T> = (o: $Observable<T>) => void | Function;
-type FN<T> = (a: T) => void;
-export declare class $Subscription<T> {
-    o: Map<Function, FN<T>>;
-    unsubscribe(): void;
-}
-export declare class $Observable<T> extends $Subscription<T> {
-    fn: OBS<T>;
-    init: boolean;
-    constructor(fn?: OBS<T>);
-    subscribe(c: FN<T>): $Subscription<T>;
-    complete(): void;
-    next(s: T): void;
-}
-export declare class $BehaviorSubject<T> extends $Observable<T> {
-    v: T;
-    constructor(v: T);
-    private setValue;
-    next(s: T): void;
-    getValue(): T;
-    asObservable(): this;
-}
-export declare function noop(): void;
-export declare function BehaviorSubject<T>(init: T): void;
-export declare function Observable<T>(fn?: OBS<T>): void;
-export declare function Subscription<T>(): void;
-export interface BehaviorSubject<T> extends BS<T> {
-}
-export interface Observable<T> extends O<T> {
-}
-export interface Subscription extends S {
-}
-export {};