iss-ctrl 0.0.11 → 0.0.13

package/fesm2022/iss-ctrl-table.field-CDSVakji.mjs

@@ -0,0 +1,592 @@
+import * as i0 from '@angular/core';
+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, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { b as ViewerBase, L as Loader, C as ControlBase, c as FormEngine, I as IssField, O as Outlet, F as FieldBase, V as VIEW_PROVIDER, a as ValidationMessageComponent } from './iss-ctrl-iss-ctrl-DOmgkxUv.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';
+import * as i4 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i5 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+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 { take } from 'rxjs';
+
+class FieldViewer extends ViewerBase {
+    containerRef = viewChild("container", { ...(ngDevMode ? { debugName: "containerRef" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    #loader = inject(Loader);
+    #destroyRef = inject(DestroyRef);
+    #fieldEffectRef = effect(() => {
+        const container = this.containerRef();
+        const field = this.field();
+        if (!container || !field) {
+            return;
+        }
+        this.#loader.loadViewer(field.type)
+            .pipe(take(1), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((viewer) => {
+            // the effect re-runs whenever the field changes, so the previously rendered
+            // viewer has to go before a new one takes its place
+            container.clear();
+            if (!viewer) {
+                return;
+            }
+            const componentRef = container.createComponent(viewer);
+            componentRef.setInput("field", field);
+        });
+    }, ...(ngDevMode ? [{ debugName: "#fieldEffectRef" }] : /* istanbul ignore next */ []));
+    ngOnDestroy() {
+        this.#fieldEffectRef.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: FieldViewer, isStandalone: true, selector: "iss-viewer-field", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-container #container></ng-container>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-viewer-field",
+                    template: `
+    <ng-container #container></ng-container>
+  `,
+                }]
+        }], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ["container", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+/**
+ * `<iss-ctrl-table>` — repeatable rows, where each row is itself a small form.
+ *
+ * `columns` are field definitions: the control renders them as the row editor and as the
+ * table columns. The form value holds the raw row values, while `jsonValue` carries the
+ * resolved payload of each row in and out.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-table
+ *   formControlName="items"
+ *   [columns]="columns"
+ *   [withFilter]="true"
+ *   [withSort]="true"
+ *   [withPagination]="true"
+ * />
+ * ```
+ *
+ * ### Own inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `columns` | `any[]` | **required** | Field definitions rendered as columns and as the row editor. |
+ * | `jsonValue` | `any` | `null` | Resolved row payload pushed in from outside. |
+ * | `withFilter` | `boolean` | `false` | Shows the filter row. |
+ * | `withSort` | `boolean` | `false` | Enables column sorting. |
+ * | `withPagination` | `boolean` | `false` | Shows the paginator. |
+ *
+ * ### Inherited from {@link ControlBase}
+ * `formControlName` · `readonly` · `className` · `(onChange)`
+ *
+ * Does not project a label — the field label is rendered by the wrapping `iss-field-*`.
+ */
+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
+    /**
+     * Field definitions rendered both as table columns and as the row editor. Required.
+     */
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the filter row above the table.
+     */
+    withFilter = input(false, ...(ngDevMode ? [{ debugName: "withFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables sorting by clicking a column header.
+     */
+    withSort = input(false, ...(ngDevMode ? [{ debugName: "withSort" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the paginator under the table.
+     */
+    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);`
+    /**
+     * Resolved row payload pushed in from outside; the control ignores payloads it emitted itself.
+     */
+    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([], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    columnLabels = computed(() => {
+        const labels = this.fields().map((f) => f.label());
+        labels.push("");
+        return labels;
+    }, ...(ngDevMode ? [{ debugName: "columnLabels" }] : /* istanbul ignore next */ []));
+    fieldNames = computed(() => {
+        const names = this.fields().map((f) => f.name);
+        names.push("actions");
+        return names;
+    }, ...(ngDevMode ? [{ debugName: "fieldNames" }] : /* istanbul ignore next */ []));
+    fieldsMap = computed(() => {
+        const m = new Map();
+        this.fields().forEach((f) => {
+            m.set(f.name, f);
+        });
+        return m;
+    }, ...(ngDevMode ? [{ debugName: "fieldsMap" }] : /* istanbul ignore next */ []));
+    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();
+    #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))
+            .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();
+        if (this.dataSource.paginator) {
+            this.dataSource.paginator.firstPage();
+        }
+    }
+    onRowClick(row) {
+        this.clickedRows.add(row);
+    }
+    // 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);
+        if (!viewFields) {
+            viewFields = this.#fieldValuesMapper(row);
+            this.#rowViewFields.set(row, viewFields);
+        }
+        return viewFields[index];
+    }
+    // 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;
+        }
+        const index = this.dataSource.data.indexOf(row);
+        if (index === -1) {
+            return;
+        }
+        const newData = this.dataSource.data.filter((_, i) => i !== index);
+        this.renderRows(newData);
+    }
+    addRow(values, jsonValues) {
+        if (!this.#canModify()) {
+            return;
+        }
+        const row = this.#buildRow(values, jsonValues);
+        this.#rowViewFields.set(row, this.#fieldValuesMapper(row));
+        this.renderRows([...this.dataSource.data, row]);
+    }
+    renderRows(rows) {
+        this.dataSource = this.#newDataSource(rows);
+        this.dataSource.paginator = this.paginator() ?? null;
+        this.dataSource.sort = this.sort() ?? null;
+        this.#emitRows(rows);
+    }
+    viewRow(row) {
+        this.#applyFieldValues((field) => this.#cellValue(row, field.name), (field) => this.#cellJsonValue(row, field.name));
+        this.#fieldValuesOverridden = true;
+        this.tableOutletForm.patchValue(this.#toFlatValue(row));
+        this.tableOutletForm.disable();
+        this.drawer()?.open();
+    }
+    editRow(row) {
+        if (!this.#canModify()) {
+            return;
+        }
+        this.tableOutletForm.enable();
+        this.tableOutletForm.patchValue(this.#toFlatValue(row));
+        this.drawer()?.open();
+    }
+    openNewRow() {
+        if (!this.#canModify()) {
+            return;
+        }
+        this.drawer()?.toggle();
+    }
+    saveRow(closeDrawer) {
+        if (!this.#canModify()) {
+            return;
+        }
+        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();
+        }
+    }
+    constructFieldChildren(fields) {
+        return fields.map((f) => new IssField(f, this.loader));
+    }
+    #restoreFieldValues() {
+        if (!this.#fieldValuesOverridden) {
+            return;
+        }
+        this.#applyFieldValues((field) => this.#pristineFieldValues.get(field.name), () => null);
+        this.#fieldValuesOverridden = false;
+    }
+    #applyFieldValues(valueOf, jsonValueOf) {
+        this.fields.update((fields) => fields.map((field) => {
+            field.value = valueOf(field);
+            field.ctrlJsonValue.set(jsonValueOf(field));
+            return field;
+        }));
+    }
+    // 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) => {
+            const fieldWithJsonValue = this.#formEngine.getField(this.tableOutletForm, field.name) ?? field;
+            return {
+                name: fieldWithJsonValue.name,
+                type: fieldWithJsonValue.type,
+                ctrlValue: signal(this.#cellValue(row, field.name)),
+                ctrlJsonValue: signal(this.#cellJsonValue(row, field.name)),
+                config: fieldWithJsonValue.config,
+            };
+        });
+    }
+    #canModify() {
+        return !this.ctrl.disabled && !this.readonly();
+    }
+    // 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: TableControl, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-table", imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatPaginatorModule,
+                        MatSidenavModule,
+                        ReactiveFormsModule,
+                        Outlet,
+                        FieldViewer,
+                    ], 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: { 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 }] }] } });
+
+/**
+ * `<iss-field-table>` — repeatable rows, each row being a small form built from the child fields.
+ *
+ * Rendered by the outlet for fields of type `table`. It renders {@link TableControl} plus the
+ * validation message in `edit` mode; there is no `view` mode template, so the field renders
+ * nothing outside edit mode.
+ *
+ * ### Supported `config` keys
+ * | Key | Type | Description |
+ * | --- | --- | --- |
+ * | `tableWithFilter` | `boolean` | Shows the filter row. |
+ * | `tableWithSort` | `boolean` | Enables column sorting. |
+ * | `tableWithPagination` | `boolean` | Shows the paginator. |
+ * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ *
+ * ### Other field members used
+ * `children` · `ctrlJsonValue()`
+ *
+ * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and
+ * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.
+ *
+ * Columns come from `field.children`: every child is both a column and an editor input.
+ *
+ * @example
+ * ```json
+ * { "name": "items", "type": "table", "children": [{ "name": "qty", "type": "text_input", "label": "Qty" }] }
+ * ```
+ */
+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-CDSVakji.mjs.map