iss-ctrl 0.0.9 → 0.0.11

package/fesm2022/{iss-ctrl-table.field-B42zKves.mjs → iss-ctrl-table.field-kPIwve-M.mjs}

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { viewChild, ViewContainerRef, inject, DestroyRef, effect, Component, signal, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { viewChild, ViewContainerRef, inject, DestroyRef, effect, Component, input, signal, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$1 from '@angular/forms';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { a as ViewerBase, L as Loader, C as ControlBase, b as FormEngine, I as IssField, O as Outlet, F as FieldBase, V as VIEW_PROVIDER, c as ValidationMessageComponent } from './iss-ctrl-iss-ctrl-hz0ibyPg.mjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -14,7 +15,6 @@ import * as i3 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { a as ViewerBase, L as Loader, F as FieldBase, b as FormEngine, I as IssField, V as VIEW_PROVIDER, O as Outlet } from './iss-ctrl-iss-ctrl-BN7L4PtW.mjs';
 import { take } from 'rxjs';
 
 class FieldViewer extends ViewerBase {
@@ -58,11 +58,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ["container", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
-class TableField extends FieldBase {
+class TableControl extends ControlBase {
+    // raw child field configs (the same json shape IssField takes), not IssField/host-field
+    // instances: this is what lets the control be dropped into a consumer's own wrapper
+    // without depending on the outlet/form-engine machinery a host IssField carries
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    withFilter = input(false, ...(ngDevMode ? [{ debugName: "withFilter" }] : /* istanbul ignore next */ []));
+    withSort = input(false, ...(ngDevMode ? [{ debugName: "withSort" }] : /* istanbul ignore next */ []));
+    withPagination = input(false, ...(ngDevMode ? [{ debugName: "withPagination" }] : /* istanbul ignore next */ []));
+    // the control value stays the "*"/null sentinel (see #emitRows); the row data itself is
+    // carried separately here so a wrapper can push a value in on top of a plain ctrl.setValue,
+    // e.g. `field.ctrl.setValue("*"); field.ctrlJsonValue.set(rows);`
+    jsonValue = input(null, ...(ngDevMode ? [{ debugName: "jsonValue" }] : /* istanbul ignore next */ []));
     loader = inject(Loader);
     drawer = viewChild("drawer", ...(ngDevMode ? [{ debugName: "drawer" }] : /* istanbul ignore next */ []));
     tableOutletForm = new FormGroup({});
-    fields = signal(this.constructFieldChildren(this.field.children), ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    fields = signal([], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     columnLabels = computed(() => {
         const labels = this.fields().map((f) => f.label());
         labels.push("");
@@ -80,31 +91,53 @@ class TableField extends FieldBase {
         });
         return m;
     }, ...(ngDevMode ? [{ debugName: "fieldsMap" }] : /* istanbul ignore next */ []));
-    dataSource = new MatTableDataSource([]);
+    dataSource = this.#newDataSource([]);
     clickedRows = new Set();
     paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
     sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
     #formEngine = inject(FormEngine);
+    #destroyRef = inject(DestroyRef);
     // view-mode cells are keyed by the row object itself, not by position: sorting and
     // paging reorder dataSource.data while keeping the row references, so an array indexed
     // by the rendered row index would show another row's values
     #rowViewFields = new WeakMap();
     // the values the row editor's fields were built with; viewRow overwrites them to show a
     // stored row, so they have to be put back before the editor is used to add a new one
-    #pristineFieldValues = new Map(this.fields().map((f) => [f.name, f.value]));
+    #pristineFieldValues = new Map();
     #fieldValuesOverridden = false;
+    // the last payload this control itself emitted; without this, feeding jsonValue() back
+    // into the wrapper's ctrlJsonValue would echo straight back in as a hydration and rebuild
+    // dataSource (and the WeakMap-cached view fields) on every single row edit
+    #lastEmitted = null;
+    #hydrateEffectRef = effect(() => {
+        const incoming = this.jsonValue();
+        if (incoming === null || incoming === undefined || incoming === this.#lastEmitted) {
+            return;
+        }
+        this.#hydrateRows(incoming);
+    }, ...(ngDevMode ? [{ debugName: "#hydrateEffectRef" }] : /* istanbul ignore next */ []));
+    // columns() is an input, so it is only guaranteed to be set once Angular runs ngOnInit,
+    // not while this class' field initializers run
+    ngOnInit() {
+        const built = this.constructFieldChildren(this.columns());
+        this.fields.set(built);
+        this.#pristineFieldValues = new Map(built.map((f) => [f.name, f.value]));
+    }
     // the drawer is a viewChild, so it only exists once the view is initialised
     ngAfterViewInit() {
         this.dataSource.paginator = this.paginator() ?? null;
         this.dataSource.sort = this.sort() ?? null;
         this.drawer()?.closedStart
-            .pipe(takeUntilDestroyed(this.destroyRef))
+            .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => {
             this.tableOutletForm.reset();
             this.tableOutletForm.enable();
             this.#restoreFieldValues();
         });
     }
+    ngOnDestroy() {
+        this.#hydrateEffectRef.destroy();
+    }
     applyFilter(event) {
         const filterValue = event.target.value;
         this.dataSource.filter = filterValue.trim().toLowerCase();
@@ -115,7 +148,7 @@ class TableField extends FieldBase {
     onRowClick(row) {
         this.clickedRows.add(row);
     }
-    // the cell of a row rendered in view mode; the row's cells are built once and cached
+    // the cell of a row rendered in view mode; the row's view fields are built once and cached
     // against the row itself, so they follow it through sorting, filtering and paging
     viewFieldOf(row, index) {
         let viewFields = this.#rowViewFields.get(row);
@@ -125,8 +158,8 @@ class TableField extends FieldBase {
         }
         return viewFields[index];
     }
-    // rows are the raw values of the row editor and carry no id, so they can only be
-    // identified by reference
+    // rows carry a stable id (see #buildRow) but sorting/filtering/paging only ever hand back
+    // the same row references, so lookup by reference is simplest
     removeRow(row) {
         if (!this.#canModify()) {
             return;
@@ -137,28 +170,25 @@ class TableField extends FieldBase {
         }
         const newData = this.dataSource.data.filter((_, i) => i !== index);
         this.renderRows(newData);
-        if (!newData.length) {
-            this.ctrl.setValue(null);
-        }
     }
-    addRow(rows) {
+    addRow(values, jsonValues) {
         if (!this.#canModify()) {
             return;
         }
-        this.#rowViewFields.set(rows, this.#fieldValuesMapper(rows));
-        this.renderRows([...this.dataSource.data, rows]);
-        this.ctrl.setValue("*");
+        const row = this.#buildRow(values, jsonValues);
+        this.#rowViewFields.set(row, this.#fieldValuesMapper(row));
+        this.renderRows([...this.dataSource.data, row]);
     }
     renderRows(rows) {
-        this.dataSource = new MatTableDataSource(rows);
+        this.dataSource = this.#newDataSource(rows);
         this.dataSource.paginator = this.paginator() ?? null;
         this.dataSource.sort = this.sort() ?? null;
-        this.field.ctrlJsonValue.set(this.dataSource.data);
+        this.#emitRows(rows);
     }
     viewRow(row) {
-        this.#applyFieldValues((field) => row[field.name]);
+        this.#applyFieldValues((field) => this.#cellValue(row, field.name), (field) => this.#cellJsonValue(row, field.name));
         this.#fieldValuesOverridden = true;
-        this.tableOutletForm.patchValue(row);
+        this.tableOutletForm.patchValue(this.#toFlatValue(row));
         this.tableOutletForm.disable();
         this.drawer()?.open();
     }
@@ -167,7 +197,7 @@ class TableField extends FieldBase {
             return;
         }
         this.tableOutletForm.enable();
-        this.tableOutletForm.patchValue(row);
+        this.tableOutletForm.patchValue(this.#toFlatValue(row));
         this.drawer()?.open();
     }
     openNewRow() {
@@ -180,7 +210,8 @@ class TableField extends FieldBase {
         if (!this.#canModify()) {
             return;
         }
-        this.addRow(this.tableOutletForm.getRawValue());
+        const jsonValues = new Map(this.fields().map((f) => [f.name, f.ctrlJsonValue()]));
+        this.addRow(this.tableOutletForm.getRawValue(), jsonValues);
         this.tableOutletForm.reset();
         if (closeDrawer) {
             this.drawer()?.close();
@@ -193,104 +224,165 @@ class TableField extends FieldBase {
         if (!this.#fieldValuesOverridden) {
             return;
         }
-        this.#applyFieldValues((field) => this.#pristineFieldValues.get(field.name));
+        this.#applyFieldValues((field) => this.#pristineFieldValues.get(field.name), () => null);
         this.#fieldValuesOverridden = false;
     }
-    #applyFieldValues(valueOf) {
+    #applyFieldValues(valueOf, jsonValueOf) {
         this.fields.update((fields) => fields.map((field) => {
             field.value = valueOf(field);
+            field.ctrlJsonValue.set(jsonValueOf(field));
             return field;
         }));
     }
-    #fieldValuesMapper(values) {
+    // builds the view-mode fields for a row directly from its stored cells, so the value and
+    // jsonValue shown always match what was captured when the row was saved
+    #fieldValuesMapper(row) {
         return this.fields().map((field) => {
-            // the row editor's fields are registered by the nested outlet against tableOutletForm,
-            // not against the host form this table lives in
             const fieldWithJsonValue = this.#formEngine.getField(this.tableOutletForm, field.name) ?? field;
             return {
                 name: fieldWithJsonValue.name,
                 type: fieldWithJsonValue.type,
-                ctrlValue: signal(values[field.name]),
-                ctrlJsonValue: signal(fieldWithJsonValue.ctrlJsonValue()),
+                ctrlValue: signal(this.#cellValue(row, field.name)),
+                ctrlJsonValue: signal(this.#cellJsonValue(row, field.name)),
                 config: fieldWithJsonValue.config,
             };
         });
     }
     #canModify() {
-        return !this.ctrl.disabled && !this.field.config.readonly();
+        return !this.ctrl.disabled && !this.readonly();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TableField, isStandalone: true, selector: "iss-field-table", viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <form [formGroup]="tableOutletForm">
-          <iss-form-outlet [fields]="fields()"/>
-        </form>
-        <ds-button (click)="saveRow(true)">save
-        </ds-button>
-        <ds-button (click)="saveRow(false)">save and add more</ds-button>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div>
-          <ds-button icon="true" (click)="openNewRow()">
-            <ds-icon icon="plus"></ds-icon>
-          </ds-button>
-          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
-        </div>
-        @if (field.config.tableWithFilter()) {
-          <mat-form-field>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
-          </mat-form-field>
-        }
-        <div class="mat-elevation-z8">
-          <table mat-table [dataSource]="dataSource" matSort>
-            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
-            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
-
-            @for (col of fieldNames(); track col) {
-              @if (col !== "actions") {
-                <ng-container [matColumnDef]="col">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
-                    {{ columnLabels()[$index] }}
-                  </th>
-                  <td mat-cell *matCellDef="let row">
-                    @if (viewFieldOf(row, $index); as viewField) {
-                      <iss-viewer-field [field]="viewField"/>
-                    }
-                  </td>
-                </ng-container>
-              }
-            }
-
-            <!-- Actions -->
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-              <td mat-cell *matCellDef="let row">
-                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
-                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
-                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
-              </td>
-            </ng-container>
-
-            <tr class="mat-row" *matNoDataRow>
-              <td class="mat-cell" colspan="4">
-                <ds-message type="emptyCard"></ds-message>
-              </td>
-            </tr>
-          </table>
-
-          @if (field.config.tableWithPagination()) {
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
-          }
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Outlet, selector: "iss-form-outlet", inputs: ["fields"], outputs: ["ready"] }, { kind: "component", type: FieldViewer, selector: "iss-viewer-field" }], viewProviders: [VIEW_PROVIDER] });
+    // sets the CVA-bound control value to the "*" sentinel (or null when the table is empty)
+    // and emits the full {rows} payload through the onChange output for a wrapper to consume
+    #emitRows(rows) {
+        const submission = this.#toSubmission(rows);
+        this.#lastEmitted = submission;
+        this.ctrl.setValue(rows.length ? "*" : null);
+        this.propagateValue();
+        this.emitOnChangeEvent(submission);
+    }
+    // rebuilds dataSource from a jsonValue payload pushed in from outside (see the `jsonValue`
+    // input); accepts either our own {rows: TableRow[]} shape or a plain array of flat
+    // {fieldName: value} row objects
+    #hydrateRows(payload) {
+        const incomingRows = Array.isArray(payload?.rows) ? payload.rows : Array.isArray(payload) ? payload : [];
+        const rows = incomingRows.map((row) => this.#normalizeRow(row));
+        rows.forEach((row) => this.#rowViewFields.set(row, this.#fieldValuesMapper(row)));
+        this.dataSource = this.#newDataSource(rows);
+        this.dataSource.paginator = this.paginator() ?? null;
+        this.dataSource.sort = this.sort() ?? null;
+        this.ctrl.setValue(rows.length ? "*" : null, { emitEvent: false });
+    }
+    #normalizeRow(row) {
+        if (Array.isArray(row?.cells)) {
+            return { id: row.id ?? crypto.randomUUID(), index: row.index ?? 0, cells: row.cells };
+        }
+        return this.#buildRow(row);
+    }
+    // the canonical row shape (see TableRow) is used for dataSource.data itself, so the
+    // submission is just that shape with the current, post-sort/filter position stamped in
+    #toSubmission(rows) {
+        return { rows: rows.map((row, index) => ({ ...row, index })) };
+    }
+    #buildRow(values, jsonValues) {
+        return {
+            id: crypto.randomUUID(),
+            index: this.dataSource.data.length,
+            cells: this.fields().map((field) => ({
+                fieldName: field.name,
+                value: values[field.name],
+                jsonValue: jsonValues?.get(field.name) ?? null,
+            })),
+        };
+    }
+    #cellValue(row, fieldName) {
+        return row.cells.find((cell) => cell.fieldName === fieldName)?.value;
+    }
+    #cellJsonValue(row, fieldName) {
+        return row.cells.find((cell) => cell.fieldName === fieldName)?.jsonValue ?? null;
+    }
+    #toFlatValue(row) {
+        return Object.fromEntries(row.cells.map((cell) => [cell.fieldName, cell.value]));
+    }
+    #newDataSource(rows) {
+        const dataSource = new MatTableDataSource(rows);
+        dataSource.filterPredicate = (row, filter) => row.cells.some((cell) => `${cell.value ?? ""}`.toLowerCase().includes(filter));
+        dataSource.sortingDataAccessor = (row, sortHeaderId) => this.#cellValue(row, sortHeaderId) ?? "";
+        return dataSource;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TableControl, isStandalone: true, selector: "iss-ctrl-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, withFilter: { classPropertyName: "withFilter", publicName: "withFilter", isSignal: true, isRequired: false, transformFunction: null }, withSort: { classPropertyName: "withSort", publicName: "withSort", isSignal: true, isRequired: false, transformFunction: null }, withPagination: { classPropertyName: "withPagination", publicName: "withPagination", isSignal: true, isRequired: false, transformFunction: null }, jsonValue: { classPropertyName: "jsonValue", publicName: "jsonValue", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: TableControl, multi: true },
+        ], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <form [formGroup]="tableOutletForm">
+          <iss-form-outlet [fields]="fields()"/>
+        </form>
+        <ds-button (click)="saveRow(true)">save
+        </ds-button>
+        <ds-button (click)="saveRow(false)">save and add more</ds-button>
+      </mat-sidenav>
+      <mat-sidenav-content>
+        <div>
+          <ds-button icon="true" (click)="openNewRow()">
+            <ds-icon icon="plus"></ds-icon>
+          </ds-button>
+          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
+        </div>
+        @if (withFilter()) {
+          <mat-form-field>
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
+          </mat-form-field>
+        }
+        <div class="mat-elevation-z8">
+          <table mat-table [dataSource]="dataSource" matSort>
+            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
+            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
+
+            @for (col of fieldNames(); track col) {
+              @if (col !== "actions") {
+                <ng-container [matColumnDef]="col">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
+                    {{ columnLabels()[$index] }}
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    @if (viewFieldOf(row, $index); as viewField) {
+                      <iss-viewer-field [field]="viewField"/>
+                    }
+                  </td>
+                </ng-container>
+              }
+            }
+
+            <!-- Actions -->
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+              <td mat-cell *matCellDef="let row">
+                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
+                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
+                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
+              </td>
+            </ng-container>
+
+            <tr class="mat-row" *matNoDataRow>
+              <td class="mat-cell" colspan="4">
+                <ds-message type="emptyCard"></ds-message>
+              </td>
+            </tr>
+          </table>
+
+          @if (withPagination()) {
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
+          }
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Outlet, selector: "iss-form-outlet", inputs: ["fields"], outputs: ["ready"] }, { kind: "component", type: FieldViewer, selector: "iss-viewer-field" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableControl, decorators: [{
             type: Component,
-            args: [{ selector: "iss-field-table", viewProviders: [VIEW_PROVIDER], imports: [
+            args: [{ selector: "iss-ctrl-table", imports: [
                         MatFormFieldModule,
                         MatInputModule,
                         MatTableModule,
@@ -300,74 +392,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         Outlet,
                         FieldViewer,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <form [formGroup]="tableOutletForm">
-          <iss-form-outlet [fields]="fields()"/>
-        </form>
-        <ds-button (click)="saveRow(true)">save
-        </ds-button>
-        <ds-button (click)="saveRow(false)">save and add more</ds-button>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div>
-          <ds-button icon="true" (click)="openNewRow()">
-            <ds-icon icon="plus"></ds-icon>
-          </ds-button>
-          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
-        </div>
-        @if (field.config.tableWithFilter()) {
-          <mat-form-field>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
-          </mat-form-field>
-        }
-        <div class="mat-elevation-z8">
-          <table mat-table [dataSource]="dataSource" matSort>
-            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
-            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
-
-            @for (col of fieldNames(); track col) {
-              @if (col !== "actions") {
-                <ng-container [matColumnDef]="col">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
-                    {{ columnLabels()[$index] }}
-                  </th>
-                  <td mat-cell *matCellDef="let row">
-                    @if (viewFieldOf(row, $index); as viewField) {
-                      <iss-viewer-field [field]="viewField"/>
-                    }
-                  </td>
-                </ng-container>
-              }
-            }
-
-            <!-- Actions -->
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-              <td mat-cell *matCellDef="let row">
-                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
-                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
-                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
-              </td>
-            </ng-container>
-
-            <tr class="mat-row" *matNoDataRow>
-              <td class="mat-cell" colspan="4">
-                <ds-message type="emptyCard"></ds-message>
-              </td>
-            </tr>
-          </table>
-
-          @if (field.config.tableWithPagination()) {
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
-          }
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: TableControl, multi: true },
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <form [formGroup]="tableOutletForm">
+          <iss-form-outlet [fields]="fields()"/>
+        </form>
+        <ds-button (click)="saveRow(true)">save
+        </ds-button>
+        <ds-button (click)="saveRow(false)">save and add more</ds-button>
+      </mat-sidenav>
+      <mat-sidenav-content>
+        <div>
+          <ds-button icon="true" (click)="openNewRow()">
+            <ds-icon icon="plus"></ds-icon>
+          </ds-button>
+          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
+        </div>
+        @if (withFilter()) {
+          <mat-form-field>
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
+          </mat-form-field>
+        }
+        <div class="mat-elevation-z8">
+          <table mat-table [dataSource]="dataSource" matSort>
+            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
+            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
+
+            @for (col of fieldNames(); track col) {
+              @if (col !== "actions") {
+                <ng-container [matColumnDef]="col">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
+                    {{ columnLabels()[$index] }}
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    @if (viewFieldOf(row, $index); as viewField) {
+                      <iss-viewer-field [field]="viewField"/>
+                    }
+                  </td>
+                </ng-container>
+              }
+            }
+
+            <!-- Actions -->
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+              <td mat-cell *matCellDef="let row">
+                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
+                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
+                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
+              </td>
+            </ng-container>
+
+            <tr class="mat-row" *matNoDataRow>
+              <td class="mat-cell" colspan="4">
+                <ds-message type="emptyCard"></ds-message>
+              </td>
+            </tr>
+          </table>
+
+          @if (withPagination()) {
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
+          }
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
   `, styles: [".mat-drawer{position:fixed;left:0}\n"] }]
-        }], propDecorators: { drawer: [{ type: i0.ViewChild, args: ["drawer", { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], withFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withFilter", required: false }] }], withSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSort", required: false }] }], withPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPagination", required: false }] }], jsonValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "jsonValue", required: false }] }], drawer: [{ type: i0.ViewChild, args: ["drawer", { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
+
+class TableField extends FieldBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TableField, isStandalone: true, selector: "iss-field-table", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-table
+          [formControlName]="field.name"
+          [columns]="field.children"
+          [withFilter]="field.config.tableWithFilter() ?? false"
+          [withSort]="field.config.tableWithSort() ?? false"
+          [withPagination]="field.config.tableWithPagination() ?? false"
+          [readonly]="field.config.readonly() ?? false"
+          [jsonValue]="field.ctrlJsonValue()"
+          (onChange)="field.ctrlJsonValue.set($event)"
+        />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TableControl, selector: "iss-ctrl-table", inputs: ["columns", "withFilter", "withSort", "withPagination", "jsonValue"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }], viewProviders: [VIEW_PROVIDER] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-field-table",
+                    viewProviders: [VIEW_PROVIDER],
+                    imports: [
+                        ReactiveFormsModule,
+                        TableControl,
+                        ValidationMessageComponent,
+                    ],
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-table
+          [formControlName]="field.name"
+          [columns]="field.children"
+          [withFilter]="field.config.tableWithFilter() ?? false"
+          [withSort]="field.config.tableWithSort() ?? false"
+          [withPagination]="field.config.tableWithPagination() ?? false"
+          [readonly]="field.config.readonly() ?? false"
+          [jsonValue]="field.ctrlJsonValue()"
+          (onChange)="field.ctrlJsonValue.set($event)"
+        />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      }
+    }
+  `
+                }]
+        }] });
 
 export { TableField };
-//# sourceMappingURL=iss-ctrl-table.field-B42zKves.mjs.map
+//# sourceMappingURL=iss-ctrl-table.field-kPIwve-M.mjs.map