@3kles/kles-material-dynamicforms 22.1.0 → 22.1.1

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

@@ -2131,6 +2131,175 @@ class KlesFormArray extends KlesFormControl {
     }
 }
 
+class ArrayUiState extends AbstractUiState {
+    constructor(states) {
+        super();
+        this.states = [];
+        this.states = states ?? [];
+        this.states.forEach((state, index) => {
+            state.setParent(this, index);
+        });
+        this._value.set(this.states.map((state) => state.value()));
+    }
+    setValue(value) {
+        if (!Array.isArray(value)) {
+            return;
+        }
+        value.forEach((newValue, index) => {
+            this.at(index)?.setValue(newValue);
+        });
+        this._value.set(value);
+        this.notifyParent();
+    }
+    patchValue(value) {
+        if (value == null) {
+            return;
+        }
+        value.forEach((newValue, index) => {
+            const st = this.at(index);
+            if (st) {
+                st.patchValue(newValue);
+            }
+        });
+        const curr = this._value() ?? [];
+        const next = [...curr];
+        value.forEach((newValue, index) => {
+            next[index] = {
+                ...(next[index] ?? {}),
+                ...newValue,
+            };
+        });
+        this._value.set(next);
+        this.notifyParent();
+    }
+    childValueChanged(key, value) {
+        const index = typeof key === 'number' ? key : Number(key);
+        if (!Number.isInteger(index) || index < 0)
+            return;
+        const curr = this._value() ?? [];
+        const next = [...curr];
+        next[index] = value;
+        this._value.set(next);
+        this.notifyParent();
+    }
+    at(index) {
+        return this.states?.[index] ?? null;
+    }
+    _find(name) {
+        const idx = typeof name === 'number' ? name : Number(name);
+        return Number.isFinite(idx) ? this.at(idx) : null;
+    }
+    push(control) {
+        const items = Array.isArray(control) ? control : [control];
+        if (items.length === 0) {
+            return;
+        }
+        for (const item of items) {
+            const index = this.states.length;
+            this.states.push(item);
+            item.setParent(this, index);
+        }
+        this._value.set(this.states.map((s) => s.value()));
+        this.notifyParent();
+    }
+    insert(index, state) {
+        const items = Array.isArray(state) ? state : [state];
+        if (items.length === 0) {
+            return;
+        }
+        const safeIndex = Math.max(0, Math.min(index, this.states.length));
+        this.states.splice(safeIndex, 0, ...items);
+        for (let i = safeIndex; i < this.states.length; i++) {
+            this.states[i]?.setParent(this, i);
+        }
+        const curr = this._value();
+        const next = [...curr];
+        next.splice(safeIndex, 0, ...items.map((item) => item.value()));
+        this._value.set(next);
+        this.notifyParent();
+    }
+    removeAt(index) {
+        if (index < 0 || index >= this.states.length)
+            return;
+        this.states.splice(index, 1);
+        this.states.forEach((state, i) => {
+            state.setParent(this, i);
+        });
+        const curr = this._value() ?? [];
+        const next = [...curr];
+        next.splice(index, 1);
+        this._value.set(next);
+        this.notifyParent();
+    }
+    clear() {
+        this.states.length = 0;
+        this._value.set([]);
+        this.notifyParent();
+    }
+}
+
+class KlesFormUiArray extends KlesFormUiControl {
+    create() {
+        const array = new ArrayUiState();
+        if (this.field.value && Array.isArray(this.field.value)) {
+            if (this.field.collections && Array.isArray(this.field.collections)) {
+                this.field.value.forEach(() => {
+                    const group = new GroupUiState();
+                    this.field.collections?.forEach((subfield) => {
+                        let control;
+                        if (subfield.type) {
+                            control = componentMapper.find((c) => c.type === subfield.type)?.ui(subfield) || klesFieldUiFactory(subfield);
+                        }
+                        else {
+                            control = componentMapper.find((c) => c.component === subfield.component)?.ui(subfield) || klesFieldUiFactory(subfield);
+                        }
+                        group.addUiState(subfield.name, control);
+                    });
+                    array.push(group);
+                });
+            }
+        }
+        else {
+            const group = new GroupUiState();
+            this.field.collections?.forEach((subfield) => {
+                let control;
+                if (subfield.type) {
+                    control = componentMapper.find((c) => c.type === subfield.type)?.ui(subfield) || klesFieldUiFactory(subfield);
+                }
+                else {
+                    control = componentMapper.find((c) => c.component === subfield.component)?.ui(subfield) || klesFieldUiFactory(subfield);
+                }
+                group.addUiState(subfield.name, control);
+            });
+            array.push(group);
+        }
+        return array;
+    }
+}
+
+class KlesFormUiGroup extends KlesFormUiControl {
+    create() {
+        const subGroup = new GroupUiState();
+        if (this.field.collections && Array.isArray(this.field.collections)) {
+            this.field.collections.forEach((subfield) => {
+                let ui;
+                if (subfield.type) {
+                    ui =
+                        componentMapper.find((c) => c.type === subfield.type)?.ui({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] }) ||
+                            klesFieldUiFactory({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] });
+                }
+                else {
+                    ui =
+                        componentMapper.find((c) => c.component === subfield.component)?.ui({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] }) ||
+                            klesFieldUiFactory({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] });
+                }
+                subGroup.addUiState(subfield.name, ui);
+            });
+        }
+        return subGroup;
+    }
+}
+
 let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFieldAbstract {
     constructor() {
         super();
@@ -2143,8 +2312,12 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
         }));
     }
     ngOnInit() {
+        this.subUi = this.ui?.get(this.field.name);
         super.ngOnInit();
     }
+    getRowUi(index) {
+        return this.subUi.at(index);
+    }
     get hasLayout() {
         return (this.field.collections ?? []).some((subfield) => subfield.layout != null);
     }
@@ -2155,10 +2328,12 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
         return this.field.direction ?? 'row';
     }
     deleteField(index) {
+        this.subUi.removeAt(index);
         this.formArray.removeAt(index);
         this.collections.update((collections) => collections.filter((_, currentIndex) => currentIndex !== index));
     }
     addField() {
+        this.subUi.push(new KlesFormUiGroup({ ...this.field, value: undefined }).create());
         this.formArray.push(createKlesFormArrayGroup(this.field));
         this.collections.update((collections) => [...collections, cloneDeep(this.field.collections ?? [])]);
     }
@@ -2216,7 +2391,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
                         >
                             @for (subfield of collections()[idx]; track subfield.name) {
                                 <div class="list-field__field" [style.grid-column]="getGridColumn(subfield)" [style.grid-row]="getGridRow(subfield)">
-                                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [context]="context" />
+                                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [ui]="getRowUi(idx)" [context]="context" />
                                 </div>
                             }
                         </div>
@@ -2241,7 +2416,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
     `, isInline: true, styles: [":host{display:block;width:100%;min-width:0}.list-field{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.list-field__header{display:flex;align-items:center;gap:8px;min-height:36px}.list-field__label{min-width:0;font-weight:500}.list-field__add{margin-left:auto;flex-shrink:0}.list-field__content{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}.list-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;width:100%;min-width:0}.list-field__fields{width:100%;min-width:0}.list-field__fields--column{display:flex;flex-direction:column;gap:10px}.list-field__fields--column>.list-field__field{width:100%}.list-field__fields--row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px}.list-field__fields--row>.list-field__field{flex:1 1 0;width:auto;min-width:0}.list-field__fields--row.list-field__fields--nowrap{flex-wrap:nowrap}.list-field__fields--grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__fields--inline-grid{display:inline-grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__field{width:100%;min-width:0}.list-field__delete{align-self:start;margin-top:4px;flex-shrink:0}.list-field__empty{padding:16px;text-align:center;opacity:.7}.list-field__errors{display:flex;flex-direction:column;gap:4px;min-width:0}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }] }); }
 };
 KlesFormListFieldComponent = __decorate([
-    FieldMapper({ type: 'listfield', factory: (field) => new KlesFormArray(field).create() })
+    FieldMapper({ type: 'listfield', factory: (field) => new KlesFormArray(field).create(), ui: (field) => new KlesFormUiArray(field).create() })
 ], KlesFormListFieldComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
             type: Component,
@@ -2273,7 +2448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         >
                             @for (subfield of collections()[idx]; track subfield.name) {
                                 <div class="list-field__field" [style.grid-column]="getGridColumn(subfield)" [style.grid-row]="getGridRow(subfield)">
-                                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [context]="context" />
+                                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [ui]="getRowUi(idx)" [context]="context" />
                                 </div>
                             }
                         </div>
@@ -3133,29 +3308,6 @@ class KlesFormGroup extends KlesFormControl {
     }
 }
 
-class KlesFormUiGroup extends KlesFormUiControl {
-    create() {
-        const subGroup = new GroupUiState();
-        if (this.field.collections && Array.isArray(this.field.collections)) {
-            this.field.collections.forEach((subfield) => {
-                let ui;
-                if (subfield.type) {
-                    ui =
-                        componentMapper.find((c) => c.type === subfield.type)?.ui({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] }) ||
-                            klesFieldUiFactory({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] });
-                }
-                else {
-                    ui =
-                        componentMapper.find((c) => c.component === subfield.component)?.ui({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] }) ||
-                            klesFieldUiFactory({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] });
-                }
-                subGroup.addUiState(subfield.name, ui);
-            });
-        }
-        return subGroup;
-    }
-}
-
 let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
     constructor() {
         super(...arguments);
@@ -3969,152 +4121,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }], propDecorators: { buttonToggles: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatButtonToggle), { isSignal: true }] }] } });
 
-class ArrayUiState extends AbstractUiState {
-    constructor(states) {
-        super();
-        this.states = [];
-        this.states = states ?? [];
-        this.states.forEach((state, index) => {
-            state.setParent(this, index);
-        });
-        this._value.set(this.states.map((state) => state.value()));
-    }
-    setValue(value) {
-        if (!Array.isArray(value)) {
-            return;
-        }
-        value.forEach((newValue, index) => {
-            this.at(index)?.setValue(newValue);
-        });
-        this._value.set(value);
-        this.notifyParent();
-    }
-    patchValue(value) {
-        if (value == null) {
-            return;
-        }
-        value.forEach((newValue, index) => {
-            const st = this.at(index);
-            if (st) {
-                st.patchValue(newValue);
-            }
-        });
-        const curr = this._value() ?? [];
-        const next = [...curr];
-        value.forEach((newValue, index) => {
-            next[index] = {
-                ...(next[index] ?? {}),
-                ...newValue,
-            };
-        });
-        this._value.set(next);
-        this.notifyParent();
-    }
-    childValueChanged(key, value) {
-        const index = typeof key === 'number' ? key : Number(key);
-        if (!Number.isInteger(index) || index < 0)
-            return;
-        const curr = this._value() ?? [];
-        const next = [...curr];
-        next[index] = value;
-        this._value.set(next);
-        this.notifyParent();
-    }
-    at(index) {
-        return this.states?.[index] ?? null;
-    }
-    _find(name) {
-        const idx = typeof name === 'number' ? name : Number(name);
-        return Number.isFinite(idx) ? this.at(idx) : null;
-    }
-    push(control) {
-        const items = Array.isArray(control) ? control : [control];
-        if (items.length === 0) {
-            return;
-        }
-        for (const item of items) {
-            const index = this.states.length;
-            this.states.push(item);
-            item.setParent(this, index);
-        }
-        this._value.set(this.states.map((s) => s.value()));
-        this.notifyParent();
-    }
-    insert(index, state) {
-        const items = Array.isArray(state) ? state : [state];
-        if (items.length === 0) {
-            return;
-        }
-        const safeIndex = Math.max(0, Math.min(index, this.states.length));
-        this.states.splice(safeIndex, 0, ...items);
-        for (let i = safeIndex; i < this.states.length; i++) {
-            this.states[i]?.setParent(this, i);
-        }
-        const curr = this._value();
-        const next = [...curr];
-        next.splice(safeIndex, 0, ...items.map((item) => item.value()));
-        this._value.set(next);
-        this.notifyParent();
-    }
-    removeAt(index) {
-        if (index < 0 || index >= this.states.length)
-            return;
-        this.states.splice(index, 1);
-        this.states.forEach((state, i) => {
-            state.setParent(this, i);
-        });
-        const curr = this._value() ?? [];
-        const next = [...curr];
-        next.splice(index, 1);
-        this._value.set(next);
-        this.notifyParent();
-    }
-    clear() {
-        this.states.length = 0;
-        this._value.set([]);
-        this.notifyParent();
-    }
-}
-
-class KlesFormUiArray extends KlesFormUiControl {
-    create() {
-        const array = new ArrayUiState();
-        if (this.field.value && Array.isArray(this.field.value)) {
-            if (this.field.collections && Array.isArray(this.field.collections)) {
-                this.field.value.forEach(() => {
-                    const group = new GroupUiState();
-                    this.field.collections?.forEach((subfield) => {
-                        let control;
-                        if (subfield.type) {
-                            control = componentMapper.find((c) => c.type === subfield.type)?.ui(subfield) || klesFieldUiFactory(subfield);
-                        }
-                        else {
-                            control = componentMapper.find((c) => c.component === subfield.component)?.ui(subfield) || klesFieldUiFactory(subfield);
-                        }
-                        group.addUiState(subfield.name, control);
-                    });
-                    array.push(group);
-                });
-            }
-        }
-        else {
-            const group = new GroupUiState();
-            this.field.collections?.forEach((subfield) => {
-                let control;
-                if (subfield.type) {
-                    control = componentMapper.find((c) => c.type === subfield.type)?.ui(subfield) || klesFieldUiFactory(subfield);
-                }
-                else {
-                    control = componentMapper.find((c) => c.component === subfield.component)?.ui(subfield) || klesFieldUiFactory(subfield);
-                }
-                group.addUiState(subfield.name, control);
-            });
-            array.push(group);
-        }
-        return array;
-    }
-}
-
 let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstract {
     constructor() {
         super();