@rxdi/forms 0.7.215 → 0.7.217

package/README.md

@@ -154,6 +154,8 @@ this.form.patchValue({
   }
 });
 // Only updates 'isActive', leaves other fields untouched.
+````
+
 ### Dynamic Array Inputs (FormArray)
 
 For lists of primitive values, use `FormArray` with an `itemFactory` and automatic model binding. This removes the need for manual population.

package/dist/form.array.js

@@ -88,15 +88,14 @@ class FormArray {
     unsubscribe() {
         this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions.clear();
-        this.controls.forEach((c) => c.unsubscribe && c.unsubscribe());
+        this.controls.forEach((c) => { var _a; return (_a = c.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
     updateValue() {
         this._valueChanges.next(this.value);
     }
     requestUpdate() {
-        if (this.parentElement) {
-            this.parentElement.requestUpdate();
-        }
+        var _a;
+        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.requestUpdate();
     }
     setParentElement(parent) {
         this.parentElement = parent;
@@ -118,9 +117,7 @@ class FormArray {
             return;
         }
         values.forEach((v, i) => {
-            if (this.controls[i]) {
-                this.controls[i].value = v;
-            }
+            this.controls[i] && (this.controls[i].value = v);
         });
         this.updateValue();
     }
@@ -129,13 +126,9 @@ class FormArray {
             return;
         }
         values.forEach((v, i) => {
-            if (this.controls[i]) {
-                if (this.controls[i]['patchValue']) {
-                    this.controls[i]['patchValue'](v);
-                }
-                else {
-                    this.controls[i].value = v;
-                }
+            const control = this.controls[i];
+            if (control) {
+                control.patchValue ? control.patchValue(v) : (control.value = v);
             }
             else if (this.options.itemFactory) {
                 this.push(this.options.itemFactory(v));

package/dist/form.group.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from '@rxdi/lit-html';
-import { AbstractControl, AbstractInput, ErrorObject, FormInputOptions, FormOptions, NestedKeyOf, UnwrapValue, ValidatorFn, DeepPropType } from './form.tokens';
+import { AbstractControl, AbstractInput, DeepPropType, ErrorObject, FormInputOptions, FormOptions, NestedKeyOf, UnwrapValue, ValidatorFn } from './form.tokens';
 export declare class FormGroup<T = FormInputOptions, E = {
     [key: string]: never;
 }> implements AbstractControl<UnwrapValue<T>> {

package/dist/form.group.js

@@ -11,6 +11,7 @@ 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 operators_1 = require("rxjs/operators");
 const form_tokens_1 = require("./form.tokens");
 class FormGroup {
     constructor(value, errors) {
@@ -44,12 +45,16 @@ class FormGroup {
                 }
             });
         }
+        this.prepareValues();
     }
     init() {
+        if (!this.parentElement) {
+            return;
+        }
         this.setFormElement(this.querySelectForm(this.parentElement.shadowRoot || this.parentElement)).setInputs(this.mapEventToInputs(this.querySelectorAllInputs()));
         this.controls.forEach((c) => {
-            if (c.init)
-                c.init();
+            var _a;
+            (_a = c.init) === null || _a === void 0 ? void 0 : _a.call(c);
         });
     }
     prepareValues() {
@@ -84,9 +89,8 @@ class FormGroup {
     setParentElement(parent) {
         this.parentElement = parent;
         this.controls.forEach((c) => {
-            if (c.setParentElement) {
-                c.setParentElement(parent);
-            }
+            var _a;
+            (_a = c.setParentElement) === null || _a === void 0 ? void 0 : _a.call(c, parent);
         });
         return this;
     }
@@ -96,9 +100,8 @@ 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 }));
-            }
+            var _a;
+            (_a = c.setOptions) === null || _a === void 0 ? void 0 : _a.call(c, Object.assign(Object.assign({}, options), { namespace: this.options.namespace ? `${this.options.namespace}.${c.name}` : c.name }));
         });
         return this;
     }
@@ -200,6 +203,9 @@ class FormGroup {
         if (this.options['form']) {
             return this.options['form'];
         }
+        if (!(shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector)) {
+            return null;
+        }
         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`);
@@ -335,11 +341,37 @@ class FormGroup {
             const names = String(name).split('.');
             const key = names.shift();
             const control = this.controls.get(key);
-            if (control && control.get) {
+            if (control === null || control === void 0 ? void 0 : control.get) {
                 return control.get(names.join('.'));
             }
         }
-        return this.inputs.get(name);
+        const input = this.inputs.get(name);
+        if (input) {
+            return input;
+        }
+        /*
+          If a user tries to subscribe on a constructor level or before the inputs are inside the DOM
+          We create a fake Virtual Input so later on when elements present on stage to get the same subscription
+        */
+        const key = name;
+        // Check if key exists in the model value even if not in inputs map
+        if (this._valueChanges.getValue() && key in this._valueChanges.getValue()) {
+            // Create a "Virtual" AbstractInput to prevent crashes and allow subscription even if no DOM element present
+            return {
+                valueChanges: this._valueChanges.pipe((0, operators_1.map)((value) => value === null || value === void 0 ? void 0 : value[key]), (0, operators_1.distinctUntilChanged)()),
+                value: this.getValue(key),
+                name: String(key),
+                valid: true,
+                invalid: false,
+                dirty: false,
+                touched: false,
+                // Mock HTMLInputElement properties to satisfy interface if needed
+                type: 'text',
+                checked: false,
+                disabled: false,
+            };
+        }
+        return undefined;
     }
     getError(inputName, errorKey) {
         return this.errors[inputName][errorKey];
@@ -390,8 +422,9 @@ class FormGroup {
             return;
         }
         Object.keys(value).forEach((key) => {
-            if (this.controls.has(key) && this.controls.get(key)['patchValue']) {
-                this.controls.get(key)['patchValue'](value[key]);
+            const control = this.controls.get(key);
+            if (control === null || control === void 0 ? void 0 : control['patchValue']) {
+                control['patchValue'](value[key]);
             }
             else {
                 this.setValue(key, value[key]);
@@ -417,8 +450,8 @@ class FormGroup {
     setFormElement(form) {
         this.form = form;
         this.controls.forEach((c) => {
-            if (c.setFormElement)
-                c.setFormElement(form);
+            var _a;
+            (_a = c.setFormElement) === null || _a === void 0 ? void 0 : _a.call(c, form);
         });
         return this;
     }
@@ -426,6 +459,7 @@ class FormGroup {
         this.inputs = new Map(inputs.map((e) => {
             const key = this.getModelKeyName(e.name);
             e.value = this.getValue(key);
+            e.valueChanges = this._valueChanges.pipe((0, operators_1.map)((value) => value === null || value === void 0 ? void 0 : value[key]), (0, operators_1.distinctUntilChanged)());
             return [key, e];
         }));
     }

package/dist/form.tokens.d.ts

@@ -6,10 +6,10 @@ export type UnwrapValue<T> = T extends AbstractControl<infer U> ? U : T extends
     [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 ? {
+export type NestedKeyOf<T, D extends number = 3> = [D] extends [0] ? never : T extends Array<any> ? 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 DeepPropType<T, P extends string> = P extends keyof T ? T[P] : P extends `${infer K}.${infer R}` ? K extends keyof T ? DeepPropType<T[K], R> : any : any;
+export type DeepPropType<T, P extends string> = P extends keyof T ? T[P] extends [infer V, ValidatorFn[]] ? AbstractInput<V> : T[P] extends (infer U)[] ? AbstractInput<U> : T[P] extends string | number | boolean ? AbstractInput<T[P]> : T[P] : P extends `${infer K}.${infer R}` ? K extends keyof T ? DeepPropType<T[K], R> : any : any;
 export type FormStrategies = keyof WindowEventMap;
 export interface FormOptions {
     /** Name of the form element */
@@ -19,7 +19,7 @@ export interface FormOptions {
     /** Multiple input elements like checkboxes with the same name will be binded together */
     multi?: boolean;
     /** When set to true `.valueChanges` will emit values only
-     * if current input validation passes, default behavior is to emit every change fro */
+     * if current input validation passes, default behavior is to emit every change on the form */
     strict?: boolean;
     /**
      * When set form will expand capabilities by selecting another custom element made as a form element
@@ -63,11 +63,12 @@ export interface ErrorObject {
     element: HTMLInputElement;
     errors: InputErrorMessage[];
 }
-export interface AbstractInput extends HTMLInputElement {
+export interface AbstractInput<T = any> extends HTMLInputElement {
     valid?: boolean;
     invalid?: boolean;
     dirty?: boolean;
     touched?: boolean;
+    valueChanges?: Observable<any>;
 }
 export declare const InputValidityState: {
     badInput: "badInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/forms",
-  "version": "0.7.215",
+  "version": "0.7.217",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@rxdi/lit-html": "^0.7.214",
+    "@rxdi/lit-html": "^0.7.216",
     "@types/node": "^25.0.3",
     "rxjs": "^7.8.2",
     "typescript": "^5.9.3"