@3kles/kles-material-dynamicforms 19.4.2 → 19.4.4

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, computed, EventEmitter, Output, NgModule, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -136,7 +136,7 @@ class AbstractUiState {
         if (currPath == null)
             return null;
         if (!Array.isArray(currPath))
-            currPath = currPath.split('.');
+            currPath = currPath.split('.').filter(Boolean);
         if (currPath.length === 0)
             return null;
         return currPath.reduce((uiState, name) => uiState && uiState._find(name), this);
@@ -152,13 +152,23 @@ class AbstractUiState {
 class ControlUiState extends AbstractUiState {
     constructor(value) {
         super();
-        this._value.set(value);
+        if (value !== undefined) {
+            this._value.set(value);
+        }
     }
     setValue(value) {
         this._value.set(value);
     }
     patchValue(value) {
-        this.setValue(value);
+        if (value == null) {
+            return;
+        }
+        const curr = this._value();
+        if (curr == null) {
+            this._value.set(value);
+            return;
+        }
+        this._value.set({ ...curr, ...value });
     }
 }
 
@@ -507,12 +517,19 @@ class GroupUiState extends AbstractUiState {
     constructor(states) {
         super();
         this.states = {};
-        this.states = states;
+        this._computedValue = computed(() => {
+            return this._snapshot();
+        });
+        this.states = (states ?? {});
+        this._value.set(this._snapshot());
     }
     setValue(value) {
+        if (value == null)
+            return;
         Object.keys(value).forEach((name) => {
             this.states[name]?.setValue(value[name]);
         });
+        this._value.set(value);
     }
     patchValue(value) {
         if (value == null)
@@ -523,12 +540,28 @@ class GroupUiState extends AbstractUiState {
                 state.patchValue(value[name]);
             }
         });
+        const curr = this._value() ?? {};
+        this._value.set({ ...curr, ...value });
     }
     _find(name) {
-        return this.states.hasOwnProperty(name) ? this.states[name] : null;
+        const key = String(name);
+        const has = Object.prototype.hasOwnProperty.call(this.states, key);
+        return has ? this.states[key] : null;
     }
     addUiState(name, uiState) {
         this.states[name] = uiState;
+        const curr = this._value() ?? {};
+        this._value.set({ ...curr, [name]: uiState.value() });
+    }
+    get value() {
+        return this._computedValue;
+    }
+    _snapshot() {
+        const out = {};
+        for (const key of Object.keys(this.states)) {
+            out[key] = this.states[key]?.value();
+        }
+        return out;
     }
 }
 
@@ -1981,7 +2014,6 @@ let KlesFormCheckboxComponent = class KlesFormCheckboxComponent extends KlesFiel
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormCheckboxComponent, isStandalone: true, selector: "kles-form-checkbox", usesInheritance: true, ngImport: i0, template: `
-        {{ indeterminate() }}
         <div [formGroup]="group">
             <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
         </div>
@@ -1993,7 +2025,6 @@ KlesFormCheckboxComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-checkbox', template: `
-        {{ indeterminate() }}
         <div [formGroup]="group">
             <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
         </div>
@@ -4280,27 +4311,45 @@ class ArrayUiState extends AbstractUiState {
     constructor(states) {
         super();
         this.states = [];
-        this.states = states;
+        this._computedValue = computed(() => {
+            return this.states.map((s) => s.value());
+        });
+        this.states = states ?? [];
+        this._value.set(this.states.map((s) => s.value()));
+    }
+    get value() {
+        return this._computedValue;
     }
     setValue(value) {
+        if (!Array.isArray(value)) {
+            return;
+        }
         value.forEach((newValue, index) => {
-            this.at(index).setValue(newValue);
+            this.at(index)?.setValue(newValue);
         });
+        this._value.set(value);
     }
     patchValue(value) {
-        if (value == null)
+        if (value == null) {
             return;
+        }
         value.forEach((newValue, index) => {
-            if (this.at(index)) {
-                this.at(index).patchValue(newValue);
+            const st = this.at(index);
+            if (st) {
+                st.patchValue(newValue);
             }
         });
+        const curr = this._value() ?? [];
+        const next = [...curr];
+        value.forEach((v, i) => (next[i] = v));
+        this._value.set(next);
     }
     at(index) {
-        return this.states?.[index];
+        return this.states?.[index] ?? null;
     }
     _find(name) {
-        return this.at(name) ?? null;
+        const idx = typeof name === 'number' ? name : Number(name);
+        return Number.isFinite(idx) ? this.at(idx) : null;
     }
     push(control) {
         if (Array.isArray(control)) {
@@ -4311,6 +4360,7 @@ class ArrayUiState extends AbstractUiState {
         else {
             this.states.push(control);
         }
+        this._value.set(this.states.map((s) => s.value()));
     }
 }