ngx-t-forms 2.0.29 → 2.0.31

package/fesm2022/ngx-t-forms-multiple-input-input-element.component-C7y1OGPx.mjs

@@ -0,0 +1,905 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, DestroyRef, ElementRef } from '@angular/core';
+import * as i1$4 from '@angular/forms';
+import { NgControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { b as TDynamicDataViewComponent, r as TFormInputComponent, v as calculateListOveralFunctions, B as BaseCustomInput, _ as _isEqual, m as getInputErrorMessage, n as TFormInputStatusComponent } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i5 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { DocumentLitsLabelConfigInterfaceValueType, InputDataTypes, MultipleInputAvailableOperations, CalculationFunctions } from 'ngx-t-forms-types';
+import * as i1$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i6 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i3$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i10 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i3$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i1$3 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { Subject, timer, tap, takeUntil } from 'rxjs';
+import { v4 } from 'uuid';
+import * as i4 from '@angular/material/list';
+
+class ColorScale {
+    constructor(min, max, colorStops, alpha = 1) {
+        validateMinMaxValues(min, max);
+        validateColorStops(colorStops);
+        validateAlphaValue(alpha);
+        this.min = min;
+        this.max = max;
+        this.alpha = alpha;
+        this.colorStops = colorStops.map((colorStop) => hexToColor(colorStop, alpha));
+    }
+    getColor(value) {
+        const numOfColorStops = this.colorStops.length;
+        if (value < this.min)
+            return this.colorStops[0];
+        if (value > this.max)
+            return this.colorStops[numOfColorStops - 1];
+        const range = this.max - this.min;
+        let weight = (value - this.min) / range;
+        const colorStopIndex = Math.max(Math.ceil(weight * (numOfColorStops - 1)), 1);
+        const minColor = this.colorStops[colorStopIndex - 1];
+        const maxColor = this.colorStops[colorStopIndex];
+        if (maxColor === undefined)
+            return minColor;
+        if (minColor === undefined)
+            return maxColor;
+        weight = weight * (numOfColorStops - 1) - (colorStopIndex - 1);
+        const r = Math.floor(weight * maxColor.r + (1 - weight) * minColor.r);
+        const g = Math.floor(weight * maxColor.g + (1 - weight) * minColor.g);
+        const b = Math.floor(weight * maxColor.b + (1 - weight) * minColor.b);
+        return new Color(r, g, b, this.alpha);
+    }
+}
+function validateMinMaxValues(min, max) {
+    if (min > max) {
+        throw new Error('The minimum value must be less than the maximum value.');
+    }
+}
+function validateColorStops(colorStops) {
+    if (colorStops.length < 2) {
+        throw new Error('At least two colors must be provided.');
+    }
+    colorStops.forEach((str) => {
+        if (!isValidHexColor(str)) {
+            throw new Error(`${str} is not a valid hex color.`);
+        }
+    });
+}
+function validateAlphaValue(alpha) {
+    if (alpha < 0 || alpha > 1) {
+        throw new Error('The alpha value must be between 0 and 1.');
+    }
+}
+function hexToColor(hex, alpha) {
+    if (isValid3DigitHexColor(hex)) {
+        hex = convertTo6DigitHexColor(hex);
+    }
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!!result?.[1] && !!result?.[2] && !!result?.[3]) {
+        return new Color(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), alpha);
+    }
+    else {
+        throw new Error(`${hex} is not a valid hex color.`);
+    }
+}
+function isValidHexColor(colorString) {
+    return (isValid3DigitHexColor(colorString) || isValid6DigitHexColor(colorString));
+}
+function isValid3DigitHexColor(colorString) {
+    const hexColorRegex = /^#(?:[0-9a-fA-F]{3})$/;
+    return colorString.match(hexColorRegex);
+}
+function isValid6DigitHexColor(colorString) {
+    const hexColorRegex = /^#(?:[0-9a-fA-F]{6})$/;
+    return colorString.match(hexColorRegex);
+}
+function convertTo6DigitHexColor(threeDigitHex) {
+    return threeDigitHex
+        .substring(1)
+        .split('')
+        .map((char) => {
+        return char + char;
+    })
+        .join('');
+}
+function componentToHex(c) {
+    const hex = c.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+}
+function rgbaToHex(color) {
+    const r = Math.floor(color.r * color.a);
+    const g = Math.floor(color.g * color.a);
+    const b = Math.floor(color.b * color.a);
+    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+class Color {
+    constructor(r, g, b, a = 1) {
+        validateAlphaValue(a);
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+    toRGBString() {
+        return `rgb(${Math.floor(this.r * this.a)},${Math.floor(this.g * this.a)},${Math.floor(this.b * this.a)})`;
+    }
+    toRGBAString() {
+        return `rgba(${this.r},${this.g},${this.b},${this.a})`;
+    }
+    toHexString() {
+        return rgbaToHex(this);
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function configureCols(inputConfig, tempLabels) {
+    try {
+        const labelInputs = (inputConfig?.formInputs || []).filter(input => input.showAsLabel || tempLabels.includes(input.formControlName));
+        const cols = [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const colConfigs = {};
+        for (let index = 0; index < (labelInputs).length; index++) {
+            const c = labelInputs[index];
+            const col = { ...c };
+            cols.push(`${inputConfig.id}.${col.id}`);
+            if (!col.id) {
+                continue;
+            }
+            colConfigs[`${inputConfig.id}.${col.id}`] = {
+                property: `${inputConfig.id}.${col.id}`,
+                formControlName: col.formControlName,
+                label: col.label,
+                dataType: getDataType(col)
+            };
+        }
+        //add remove section config
+        cols.push('itemRemovalButton');
+        colConfigs['itemRemovalButton'] = {
+            property: 'itemRemovalButton',
+            label: '',
+            type: 'removal',
+        };
+        // end
+        return {
+            displayedColumnsInOrder: cols.filter((c) => !!c),
+            columnsConfig: colConfigs
+        };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to configure columns';
+        throw new Error(message);
+    }
+}
+function getDataType(input) {
+    try {
+        if (input.pipe?.pipeType) {
+            return input.pipe.pipeType;
+        }
+        const inputDataType = input.dataType;
+        switch (inputDataType) {
+            case InputDataTypes.Number:
+                return DocumentLitsLabelConfigInterfaceValueType.number;
+            case InputDataTypes.Date:
+                return DocumentLitsLabelConfigInterfaceValueType.date;
+            case InputDataTypes.Array:
+                return InputDataTypes.Array;
+            case InputDataTypes.Boolean:
+                return InputDataTypes.Boolean;
+            case InputDataTypes.Object:
+                return InputDataTypes.Object;
+            default:
+                return DocumentLitsLabelConfigInterfaceValueType.string;
+        }
+    }
+    catch (error) {
+        const msg = error instanceof Error ? error.message : 'Failed to get data type';
+        throw new Error(msg);
+    }
+}
+
+class MultipleInputTableViewComponent {
+    constructor() {
+        this.inputConfig = input(undefined, ...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.dataSource = input(new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.applyOptionsTo = input(undefined, ...(ngDevMode ? [{ debugName: "applyOptionsTo" }] : /* istanbul ignore next */ []));
+        this.formGroup = input(null, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.onEditItem = output();
+        this.onDeleteItem = output();
+        this.onCopy = output();
+        this.onApplyOptionsTo = output();
+        this.showItemAsLabel = output();
+        this.colConfig = computed(() => {
+            const cfg = this.inputConfig();
+            if (!cfg) {
+                return {
+                    columnsConfig: {},
+                    displayedColumnsInOrder: [],
+                };
+            }
+            return configureCols(cfg, this.tempLabels);
+        }, ...(ngDevMode ? [{ debugName: "colConfig" }] : /* istanbul ignore next */ []));
+        this.displayedColumnsInOrderSig = computed(() => this.colConfig().displayedColumnsInOrder, ...(ngDevMode ? [{ debugName: "displayedColumnsInOrderSig" }] : /* istanbul ignore next */ []));
+        this.allPossibleLabels = computed(() => {
+            const cfg = this.inputConfig();
+            const displayed = this.displayedColumnsInOrderSig();
+            return (cfg?.formInputs?.map((inp) => ({
+                label: inp.label,
+                selected: displayed.includes(`${cfg?.id}.${inp.id}`),
+                formControlName: inp.formControlName,
+            })) || []);
+        }, ...(ngDevMode ? [{ debugName: "allPossibleLabels" }] : /* istanbul ignore next */ []));
+        this.userCanEdit = computed(() => {
+            const cfg = this.inputConfig();
+            if (!cfg)
+                return false;
+            if (!cfg.multipleInputAvailableOperations)
+                return true;
+            return cfg.multipleInputAvailableOperations.includes(MultipleInputAvailableOperations.Update);
+        }, ...(ngDevMode ? [{ debugName: "userCanEdit" }] : /* istanbul ignore next */ []));
+        this.userCanRemove = computed(() => {
+            const cfg = this.inputConfig();
+            if (!cfg)
+                return false;
+            if (!cfg.multipleInputAvailableOperations)
+                return true;
+            return cfg.multipleInputAvailableOperations.includes(MultipleInputAvailableOperations.Remove);
+        }, ...(ngDevMode ? [{ debugName: "userCanRemove" }] : /* istanbul ignore next */ []));
+        this.userCanAdd = computed(() => {
+            const cfg = this.inputConfig();
+            if (!cfg)
+                return false;
+            if (!cfg.multipleInputAvailableOperations)
+                return true;
+            return cfg.multipleInputAvailableOperations.includes(MultipleInputAvailableOperations.Add);
+        }, ...(ngDevMode ? [{ debugName: "userCanAdd" }] : /* istanbul ignore next */ []));
+        this.userCanApplyOptionsTo = computed(() => {
+            return this.userCanEdit() || this.userCanRemove() || this.userCanAdd();
+        }, ...(ngDevMode ? [{ debugName: "userCanApplyOptionsTo" }] : /* istanbul ignore next */ []));
+        this.areYouSureYouWantToDeleteRow = {};
+        this.countDownDate = new Date();
+        this.deletionTimers = {};
+        this.tempLabels = [];
+        this.SYSTEM_KEY_IN_EDIT = null;
+        this.overlayOpen = false;
+        this.overlayData = null;
+        this.overlayPosition = { top: 0, left: 0 };
+        this.fullView = false;
+    }
+    applyOptionsToFn(item) {
+        this.onApplyOptionsTo.emit(item);
+    }
+    editItem(row) {
+        const rowId = row[`${this.inputConfig()?.id}.id`];
+        this.onEditItem.emit(rowId);
+    }
+    copy(row) {
+        const rowId = row[`${this.inputConfig()?.id}.id`];
+        this.onCopy.emit(rowId);
+    }
+    isAboutToDeleteRow(row) {
+        return !!this.areYouSureYouWantToDeleteRow[row[`${this.inputConfig()?.id}.id`]];
+    }
+    getCountdownSeconds() {
+        const now = new Date();
+        const timeElapsed = (now.getTime() - this.countDownDate.getTime()) / 1000;
+        const percentage = Math.min(Math.round((timeElapsed / 3) * 100), 100);
+        return percentage;
+    }
+    secondsCountDown() {
+        return (3 - ((this.getCountdownSeconds() / 100) * 3)).toFixed(1);
+    }
+    multipleInputRemoveItem(event, row) {
+        const rowId = row[`${this.inputConfig()?.id}.id`];
+        if (this.areYouSureYouWantToDeleteRow[rowId]) {
+            if (this.deletionTimers[rowId]) {
+                clearTimeout(this.deletionTimers[rowId]);
+                delete this.deletionTimers[rowId];
+            }
+            delete this.areYouSureYouWantToDeleteRow[rowId];
+        }
+        else {
+            this.areYouSureYouWantToDeleteRow[rowId] = true;
+            this.countDownDate = new Date();
+            this.deletionTimers[rowId] = setTimeout(() => {
+                if (this.areYouSureYouWantToDeleteRow[rowId]) {
+                    this.onDeleteItem.emit(row);
+                    delete this.areYouSureYouWantToDeleteRow[rowId];
+                    delete this.deletionTimers[rowId];
+                }
+            }, 3000);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    returnBackground(row, columnsConfig) {
+        let background = '';
+        const ds = this.dataSource();
+        if (ds
+            ? ds.data.length > 1
+                ? columnsConfig?.['colorScale']
+                : false
+            : false) {
+            const inputCfg = this.inputConfig();
+            const colKey = columnsConfig?.['key'] ?? '';
+            const point = Number(row[colKey]);
+            const inputIsGrouped = inputCfg.groupBy;
+            const groupKey = inputCfg.groupBy?.[0] || '';
+            const dataSet = inputIsGrouped
+                ? ds.data.filter((s) => s[groupKey] === row[groupKey])
+                : new Array(ds.data);
+            const arrayValues = dataSet.map((vr) => Number(vr[colKey]));
+            const max = Math.max(...arrayValues);
+            const min = Math.min(...arrayValues);
+            const hasNun = isNaN(max) || isNaN(min);
+            if (!hasNun && Number(max) !== Number(min)) {
+                const colorScale = new ColorScale(min, max, ['#2fdf75', '#FFA500', '#ff4961'], 0.8);
+                const color = colorScale.getColor(point)?.toRGBAString();
+                background = color ?? '';
+            }
+        }
+        return background;
+    }
+    hasTopBorder(row) {
+        const inputCfg = this.inputConfig();
+        const inputIsGrouped = inputCfg?.groupBy;
+        const ds = this.dataSource();
+        if (inputIsGrouped) {
+            const indexOfRow = ds.data.indexOf(row);
+            const rowIsFirstInTable = indexOfRow === 0;
+            if (!inputCfg.groupBy) {
+                return false;
+            }
+            const groupKey = inputCfg.groupBy?.[0] ?? '';
+            const isFirstInGroup = rowIsFirstInTable
+                ? true
+                : ds.data[indexOfRow - 1][groupKey] !==
+                    row[groupKey];
+            return isFirstInGroup;
+        }
+        else {
+            return false;
+        }
+    }
+    getCalculationFunction(row) {
+        const func = row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'];
+        switch (func) {
+            case CalculationFunctions.Sum:
+                return 'TOTAL';
+            case CalculationFunctions.Avg:
+                return 'AVERAGE';
+            case CalculationFunctions.Max:
+                return 'MAX';
+            case CalculationFunctions.Min:
+                return 'MIN';
+            default:
+                return func;
+        }
+    }
+    toggleTepLabel(event, label) {
+        if (this.tempLabels.includes(label)) {
+            this.tempLabels = this.tempLabels.filter((l) => l !== label);
+        }
+        else {
+            this.tempLabels.push(label);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    get getColConfig() {
+        return this.colConfig();
+    }
+    get displayedColumnsInOrder() {
+        return this.displayedColumnsInOrderSig();
+    }
+    rowIsInEdit(row) {
+        const cfg = this.inputConfig();
+        const fg = this.formGroup();
+        return (!!cfg?.formIsOpen &&
+            fg?.controls[`${cfg?.id}.id`]?.value === row[`${cfg?.id}.id`]);
+    }
+    openDataOverlay(event, data) {
+        event.stopPropagation();
+        const rect = event.currentTarget.getBoundingClientRect();
+        this.overlayData = data;
+        this.overlayPosition = { top: rect.bottom + 4, left: rect.left };
+        this.overlayOpen = true;
+    }
+    closeDataOverlay() {
+        this.overlayOpen = false;
+        this.overlayData = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, applyOptionsTo: { classPropertyName: "applyOptionsTo", publicName: "applyOptionsTo", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo", showItemAsLabel: "showItemAsLabel" }, ngImport: i0, template: "@defer (on viewport) {\n\n  @if (getColConfig.displayedColumnsInOrder.length === 0) {\n    <div class=\"mit-state mit-state--inline\">No columns</div>\n  }\n\n  <div class=\"table-container\">\n\n    <table mat-table [dataSource]=\"(dataSource() || [])\" class=\"mit-table\" matSort matSortActive=\"created\"\n      matSortDisableClear matSortDirection=\"desc\">\n      @for (col of (displayedColumnsInOrder || []); track col) {\n        <ng-container [matColumnDef]=\"col\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span class=\"mit-th-label\">\n              {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\n            </span>\n            @if ($last) {\n              <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\n                class=\"mit-th-action\" mat-icon-button>\n                <mat-icon>label</mat-icon>\n              </button>\n            }\n          </th>\n          <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\n            [style.background]=\"returnBackground(row, getColConfig.columnsConfig?.[col])\"\n            mat-cell *matCellDef=\"let row\">\n            @if (getColConfig.columnsConfig?.[col]?.['type'] === 'removal') {\n              <div class=\"cellClass\">\n\n                @if (!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && !row['id'] && !inputConfig()?.multipleInputInEditId ||\n                !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && inputConfig()?.multipleInputInEditId &&\n                inputConfig()?.multipleInputInEditId !== row['id']) {\n                  <div class=\"mit-fn-label\">\n                    <strong>{{ getCalculationFunction(row) }}</strong>\n                  </div>\n                }\n                @if (\n                  userCanApplyOptionsTo() &&\n                  !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\n                  row[''] !== 'true' && !inputConfig()?.readonly\n                ) {\n                  <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\n                    (click)=\"applyOptionsToFn(row)\"\n                    class=\"mit-row-trigger\">\n                    @if (rowIsInEdit(row)) {\n                      <mat-icon color=\"primary\">edit</mat-icon>\n                    } @else {\n                      <mat-icon>{{ t.menuOpen ? 'close' : 'more_horiz' }}</mat-icon>\n                    }\n                  </button>\n                }\n\n                @if (row['SYSTEM_KEY_IN_EDIT']) {\n                  <mat-chip>In {{ inputConfig()?.readonly ? 'View' : 'Edit' }}</mat-chip>\n                }\n\n              </div>\n            }\n            @if (getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal') {\n              <div class=\"cellClass\">\n                <span>\n                  @if (getColConfig.columnsConfig?.[col].dataType === 'array' || getColConfig.columnsConfig?.[col].dataType === 'object') {\n                    <button mat-icon-button class=\"mit-data-button\"\n                      matTooltip=\"View data\"\n                      (click)=\"openDataOverlay($event, row[col])\">\n                      <mat-icon class=\"mit-data-icon\">data_object</mat-icon>\n                    </button>\n                  } @else {\n                    {{ row[col] | formatData: getColConfig.columnsConfig?.[col].dataType }}\n                  }\n                </span>\n              </div>\n            }\n          </td>\n        </ng-container>\n      }\n\n\n      <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder\"></tr>\n      <tr [class.mit-group-start]=\"hasTopBorder(row)\" mat-row\n        *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\n    </table>\n\n    @if (!(dataSource().data) || (dataSource().data).length === 0) {\n      <div class=\"mit-empty\">\n        <mat-icon class=\"mit-empty-icon\">list</mat-icon>\n        <strong class=\"mit-empty-title\">No items yet</strong>\n        <p class=\"mit-empty-text\">\n          <strong>Click the add button</strong> to create a new row. You'll fill in details using a form, and each\n          saved entry appears as a row here.\n        </p>\n      </div>\n    }\n  </div>\n} @placeholder {\n  <div class=\"mit-placeholder\">\n    <mat-spinner diameter=\"32\" />\n  </div>\n}\n\n@if (overlayOpen) {\n  <div class=\"data-overlay-backdrop\" (click)=\"closeDataOverlay()\"></div>\n  <div class=\"data-overlay-panel\"\n    [style.top.px]=\"overlayPosition.top\"\n    [style.left.px]=\"overlayPosition.left\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"data-overlay-header\">\n      <span class=\"data-overlay-title\">\n        <mat-icon class=\"data-overlay-title-icon\">data_object</mat-icon>\n        Data\n      </span>\n      <button mat-icon-button class=\"mit-data-button\" (click)=\"closeDataOverlay()\">\n        <mat-icon class=\"mit-data-icon\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"data-overlay-body\">\n      <lib-t-dynamic-data-view [data]=\"overlayData\" />\n    </div>\n  </div>\n}\n\n<mat-menu #colOptions=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (label of allPossibleLabels(); track label.label) {\n      <button mat-menu-item (click)=\"toggleTepLabel($event, label.formControlName);\">\n        <mat-icon>{{ label.selected ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        {{ label.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #rowOptions=\"matMenu\">\n  <ng-template matMenuContent let-row=\"row\">\n    @if (!inputConfig()?.readonly) {\n      @if (userCanEdit()) {\n        <button mat-menu-item (click)=\"editItem(row)\">\n          <mat-icon>edit</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Edit</div>\n            <div class=\"option-sub-text\">\n              {{ inputConfig()?.readonly ? 'View item properties' : 'Modify item properties' }}\n            </div>\n          </div>\n        </button>\n      }\n      @if (userCanAdd()) {\n        <button mat-menu-item (click)=\"copy(row)\">\n          <mat-icon>content_copy</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Duplicate</div>\n            <div class=\"option-sub-text\">Create a copy with same values</div>\n          </div>\n        </button>\n      }\n\n      @if (userCanRemove()) {\n        @if (isAboutToDeleteRow(row)) {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"accent\">cancel</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text option-main-text--cancel\">Cancel Deletion</div>\n              <div class=\"option-sub-text\">Auto-deleting in {{ secondsCountDown() }} seconds...</div>\n            </div>\n          </button>\n          <div class=\"deletion-progress-container\">\n            <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\n            @if (getCountdownSeconds() > 75) {\n              <div class=\"deletion-message\">Deleting soon...</div>\n            }\n          </div>\n        } @else {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"warn\">delete_outline</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text\">Delete</div>\n              <div class=\"option-sub-text\">Will delete after 3 seconds (click to cancel)</div>\n            </div>\n          </button>\n        }\n      }\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".table-container{max-width:100%!important;overflow:auto!important;border-radius:8px}.mit-table{width:100%;background:transparent}.mit-table .mat-mdc-header-cell,.mit-table .mat-mdc-cell{padding:0 .625rem;font-size:.8125rem}.mit-table .mat-mdc-header-row{min-height:2.25rem}.mit-table .mat-mdc-row{min-height:2.5rem;transition:background .2s cubic-bezier(.16,1,.3,1)}.mit-table .mat-mdc-row:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 5%,transparent)}.mit-th-label{text-align:start;line-height:normal;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-th-action{width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.55;transition:opacity .2s cubic-bezier(.16,1,.3,1)}.mit-th-action:hover{opacity:1}.cellClass{display:flex;align-items:center;min-height:2.5rem}.mit-group-start .mat-mdc-cell{border-top:2px solid var(--mat-sys-outline-variant, #cac4d0)}.functionClass{background:var(--mat-sys-surface-container, #f3edf7);font-weight:500}.mit-fn-label{width:100%;text-align:right;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}.mit-row-trigger{margin-left:auto;margin-right:0;display:block}.mit-data-button{width:1.75rem;height:1.75rem;line-height:1.75rem}.mit-data-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.mit-state{display:flex;justify-content:center;padding:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.mit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.5rem 1.25rem;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-empty-icon{font-size:1.75rem;width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.5}.mit-empty-title{font-size:.875rem;color:var(--mat-sys-on-surface, #1c1b1f)}.mit-empty-text{margin:0;max-width:22rem;font-size:.75rem;line-height:1.45;opacity:.85}.mit-placeholder{display:flex;justify-content:center;align-items:center;padding:2rem}.option-text{display:flex;flex-direction:column;margin-left:.5rem}.option-main-text{font-size:.875rem;font-weight:500;margin-bottom:2px;line-height:normal}.option-main-text--cancel{color:var(--mat-sys-primary, #6750a4)}.option-sub-text{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 1rem .5rem}.deletion-message{position:absolute;right:1rem;top:2px;font-size:.6875rem;color:var(--mat-sys-error, #b3261e);font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.data-overlay-backdrop{position:fixed;inset:0;z-index:999;background:transparent}.data-overlay-panel{position:fixed;z-index:1000;background:var(--mat-sys-surface, #fef7ff);border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:12px;box-shadow:0 16px 56px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent);min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden}.data-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .25rem .25rem .75rem;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 12%,transparent);flex-shrink:0}.data-overlay-title{font-size:.8125rem;font-weight:500;display:flex;align-items:center;color:var(--mat-sys-on-surface, #1c1b1f)}.data-overlay-title-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;margin-right:.25rem}.data-overlay-body{overflow:auto;padding:.25rem .5rem .5rem;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.MatIconButton, i1$1.MatChip, i3.MatIcon, i6.MatMenuTrigger, i10.MatSort, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i5$1.MatTooltip, import('./ngx-t-forms-ngx-t-forms-u_kigDid.mjs').then(function (n) { return n.an; }).then(m => m.FormatDataPipe)]] }); }
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-ngx-t-forms-u_kigDid.mjs').then(function (n) { return n.an; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'lib-multiple-input-table-view', imports: [
+                            MatButtonModule,
+                            MatChipsModule,
+                            MatIconModule,
+                            MatMenuModule,
+                            MatProgressBarModule,
+                            MatProgressSpinnerModule,
+                            MatSortModule,
+                            MatTableModule,
+                            MatTooltipModule,
+                            FormatDataPipe,
+                            TDynamicDataViewComponent,
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "@defer (on viewport) {\n\n  @if (getColConfig.displayedColumnsInOrder.length === 0) {\n    <div class=\"mit-state mit-state--inline\">No columns</div>\n  }\n\n  <div class=\"table-container\">\n\n    <table mat-table [dataSource]=\"(dataSource() || [])\" class=\"mit-table\" matSort matSortActive=\"created\"\n      matSortDisableClear matSortDirection=\"desc\">\n      @for (col of (displayedColumnsInOrder || []); track col) {\n        <ng-container [matColumnDef]=\"col\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span class=\"mit-th-label\">\n              {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\n            </span>\n            @if ($last) {\n              <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\n                class=\"mit-th-action\" mat-icon-button>\n                <mat-icon>label</mat-icon>\n              </button>\n            }\n          </th>\n          <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\n            [style.background]=\"returnBackground(row, getColConfig.columnsConfig?.[col])\"\n            mat-cell *matCellDef=\"let row\">\n            @if (getColConfig.columnsConfig?.[col]?.['type'] === 'removal') {\n              <div class=\"cellClass\">\n\n                @if (!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && !row['id'] && !inputConfig()?.multipleInputInEditId ||\n                !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && inputConfig()?.multipleInputInEditId &&\n                inputConfig()?.multipleInputInEditId !== row['id']) {\n                  <div class=\"mit-fn-label\">\n                    <strong>{{ getCalculationFunction(row) }}</strong>\n                  </div>\n                }\n                @if (\n                  userCanApplyOptionsTo() &&\n                  !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\n                  row[''] !== 'true' && !inputConfig()?.readonly\n                ) {\n                  <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\n                    (click)=\"applyOptionsToFn(row)\"\n                    class=\"mit-row-trigger\">\n                    @if (rowIsInEdit(row)) {\n                      <mat-icon color=\"primary\">edit</mat-icon>\n                    } @else {\n                      <mat-icon>{{ t.menuOpen ? 'close' : 'more_horiz' }}</mat-icon>\n                    }\n                  </button>\n                }\n\n                @if (row['SYSTEM_KEY_IN_EDIT']) {\n                  <mat-chip>In {{ inputConfig()?.readonly ? 'View' : 'Edit' }}</mat-chip>\n                }\n\n              </div>\n            }\n            @if (getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal') {\n              <div class=\"cellClass\">\n                <span>\n                  @if (getColConfig.columnsConfig?.[col].dataType === 'array' || getColConfig.columnsConfig?.[col].dataType === 'object') {\n                    <button mat-icon-button class=\"mit-data-button\"\n                      matTooltip=\"View data\"\n                      (click)=\"openDataOverlay($event, row[col])\">\n                      <mat-icon class=\"mit-data-icon\">data_object</mat-icon>\n                    </button>\n                  } @else {\n                    {{ row[col] | formatData: getColConfig.columnsConfig?.[col].dataType }}\n                  }\n                </span>\n              </div>\n            }\n          </td>\n        </ng-container>\n      }\n\n\n      <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder\"></tr>\n      <tr [class.mit-group-start]=\"hasTopBorder(row)\" mat-row\n        *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\n    </table>\n\n    @if (!(dataSource().data) || (dataSource().data).length === 0) {\n      <div class=\"mit-empty\">\n        <mat-icon class=\"mit-empty-icon\">list</mat-icon>\n        <strong class=\"mit-empty-title\">No items yet</strong>\n        <p class=\"mit-empty-text\">\n          <strong>Click the add button</strong> to create a new row. You'll fill in details using a form, and each\n          saved entry appears as a row here.\n        </p>\n      </div>\n    }\n  </div>\n} @placeholder {\n  <div class=\"mit-placeholder\">\n    <mat-spinner diameter=\"32\" />\n  </div>\n}\n\n@if (overlayOpen) {\n  <div class=\"data-overlay-backdrop\" (click)=\"closeDataOverlay()\"></div>\n  <div class=\"data-overlay-panel\"\n    [style.top.px]=\"overlayPosition.top\"\n    [style.left.px]=\"overlayPosition.left\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"data-overlay-header\">\n      <span class=\"data-overlay-title\">\n        <mat-icon class=\"data-overlay-title-icon\">data_object</mat-icon>\n        Data\n      </span>\n      <button mat-icon-button class=\"mit-data-button\" (click)=\"closeDataOverlay()\">\n        <mat-icon class=\"mit-data-icon\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"data-overlay-body\">\n      <lib-t-dynamic-data-view [data]=\"overlayData\" />\n    </div>\n  </div>\n}\n\n<mat-menu #colOptions=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (label of allPossibleLabels(); track label.label) {\n      <button mat-menu-item (click)=\"toggleTepLabel($event, label.formControlName);\">\n        <mat-icon>{{ label.selected ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        {{ label.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #rowOptions=\"matMenu\">\n  <ng-template matMenuContent let-row=\"row\">\n    @if (!inputConfig()?.readonly) {\n      @if (userCanEdit()) {\n        <button mat-menu-item (click)=\"editItem(row)\">\n          <mat-icon>edit</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Edit</div>\n            <div class=\"option-sub-text\">\n              {{ inputConfig()?.readonly ? 'View item properties' : 'Modify item properties' }}\n            </div>\n          </div>\n        </button>\n      }\n      @if (userCanAdd()) {\n        <button mat-menu-item (click)=\"copy(row)\">\n          <mat-icon>content_copy</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Duplicate</div>\n            <div class=\"option-sub-text\">Create a copy with same values</div>\n          </div>\n        </button>\n      }\n\n      @if (userCanRemove()) {\n        @if (isAboutToDeleteRow(row)) {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"accent\">cancel</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text option-main-text--cancel\">Cancel Deletion</div>\n              <div class=\"option-sub-text\">Auto-deleting in {{ secondsCountDown() }} seconds...</div>\n            </div>\n          </button>\n          <div class=\"deletion-progress-container\">\n            <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\n            @if (getCountdownSeconds() > 75) {\n              <div class=\"deletion-message\">Deleting soon...</div>\n            }\n          </div>\n        } @else {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"warn\">delete_outline</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text\">Delete</div>\n              <div class=\"option-sub-text\">Will delete after 3 seconds (click to cancel)</div>\n            </div>\n          </button>\n        }\n      }\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".table-container{max-width:100%!important;overflow:auto!important;border-radius:8px}.mit-table{width:100%;background:transparent}.mit-table .mat-mdc-header-cell,.mit-table .mat-mdc-cell{padding:0 .625rem;font-size:.8125rem}.mit-table .mat-mdc-header-row{min-height:2.25rem}.mit-table .mat-mdc-row{min-height:2.5rem;transition:background .2s cubic-bezier(.16,1,.3,1)}.mit-table .mat-mdc-row:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 5%,transparent)}.mit-th-label{text-align:start;line-height:normal;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-th-action{width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.55;transition:opacity .2s cubic-bezier(.16,1,.3,1)}.mit-th-action:hover{opacity:1}.cellClass{display:flex;align-items:center;min-height:2.5rem}.mit-group-start .mat-mdc-cell{border-top:2px solid var(--mat-sys-outline-variant, #cac4d0)}.functionClass{background:var(--mat-sys-surface-container, #f3edf7);font-weight:500}.mit-fn-label{width:100%;text-align:right;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}.mit-row-trigger{margin-left:auto;margin-right:0;display:block}.mit-data-button{width:1.75rem;height:1.75rem;line-height:1.75rem}.mit-data-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.mit-state{display:flex;justify-content:center;padding:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.mit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.5rem 1.25rem;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-empty-icon{font-size:1.75rem;width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.5}.mit-empty-title{font-size:.875rem;color:var(--mat-sys-on-surface, #1c1b1f)}.mit-empty-text{margin:0;max-width:22rem;font-size:.75rem;line-height:1.45;opacity:.85}.mit-placeholder{display:flex;justify-content:center;align-items:center;padding:2rem}.option-text{display:flex;flex-direction:column;margin-left:.5rem}.option-main-text{font-size:.875rem;font-weight:500;margin-bottom:2px;line-height:normal}.option-main-text--cancel{color:var(--mat-sys-primary, #6750a4)}.option-sub-text{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 1rem .5rem}.deletion-message{position:absolute;right:1rem;top:2px;font-size:.6875rem;color:var(--mat-sys-error, #b3261e);font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.data-overlay-backdrop{position:fixed;inset:0;z-index:999;background:transparent}.data-overlay-panel{position:fixed;z-index:1000;background:var(--mat-sys-surface, #fef7ff);border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:12px;box-shadow:0 16px 56px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent);min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden}.data-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .25rem .25rem .75rem;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 12%,transparent);flex-shrink:0}.data-overlay-title{font-size:.8125rem;font-weight:500;display:flex;align-items:center;color:var(--mat-sys-on-surface, #1c1b1f)}.data-overlay-title-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;margin-right:.25rem}.data-overlay-body{overflow:auto;padding:.25rem .5rem .5rem;flex:1}\n"] }]
+            }], ctorParameters: null, propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], applyOptionsTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyOptionsTo", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], onEditItem: [{ type: i0.Output, args: ["onEditItem"] }], onDeleteItem: [{ type: i0.Output, args: ["onDeleteItem"] }], onCopy: [{ type: i0.Output, args: ["onCopy"] }], onApplyOptionsTo: [{ type: i0.Output, args: ["onApplyOptionsTo"] }], showItemAsLabel: [{ type: i0.Output, args: ["showItemAsLabel"] }] } }) });
+
+class MultipleInputTableEditComponent {
+    constructor() {
+        this.InputComponent = TFormInputComponent;
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.editorMode = input(false, ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
+        this.formGroup = input(null, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.formBuilderFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "formBuilderFunctions" }] : /* istanbul ignore next */ []));
+        this.onSaveMultipleInputForm = output();
+        this.editMultipleInput = output();
+        this.deleteInput = output();
+        this.showItemAsLabel = output();
+        this.addFunction = output();
+        this.reorderItems = output();
+        this.calculationFunctions = Object.values(CalculationFunctions);
+        this.activeInput = '';
+        this.dragging = false;
+        this.overId = null;
+        this.areYouSure = false;
+        this.countdownSeconds = {};
+        this.innerInputs = computed(() => {
+            const cfg = this.inputConfig();
+            return (cfg?.formInputs?.map((input) => ({
+                ...input,
+                originalId: input.id,
+                id: `${cfg?.id}.${input.id}`,
+            })) || []);
+        }, ...(ngDevMode ? [{ debugName: "innerInputs" }] : /* istanbul ignore next */ []));
+        this.rowInUpdate = computed(() => {
+            const cfg = this.inputConfig();
+            const fg = this.formGroup();
+            return !!cfg?.formIsOpen && !!fg?.controls[`${cfg?.id}.id`]?.value;
+        }, ...(ngDevMode ? [{ debugName: "rowInUpdate" }] : /* istanbul ignore next */ []));
+        this.formInvalid = computed(() => {
+            const cfg = this.inputConfig();
+            const fg = this.formGroup();
+            const allControls = [];
+            cfg?.formInputs?.forEach((input) => {
+                const control = fg?.controls[`${cfg?.id}.${input.id}`];
+                if (control) {
+                    allControls.push(control);
+                }
+            });
+            return allControls.some((control) => control?.invalid || !control);
+        }, ...(ngDevMode ? [{ debugName: "formInvalid" }] : /* istanbul ignore next */ []));
+        this.#destroyRef = inject(DestroyRef);
+    }
+    #destroyRef;
+    ngOnDestroy() {
+        Object.values(this.countdownSeconds).forEach(({ stop$ }) => stop$.complete());
+    }
+    saveMultipleInputForm() {
+        this.onSaveMultipleInputForm.emit();
+    }
+    inputWillBeRemovedIn(id) {
+        return this.countdownSeconds[id]?.count;
+    }
+    removeInput(item) {
+        if (this.countdownSeconds[item.id]) {
+            this.stopDeletion(item.id);
+            return;
+        }
+        this.countdownSeconds[item.id] = {
+            count: 5,
+            stop$: new Subject(),
+        };
+        const countdown$ = timer(0, 1000).pipe(tap((secondsElapsed) => {
+            const data = this.countdownSeconds[item.id];
+            if (!data) {
+                return;
+            }
+            const remainingTime = 5 - secondsElapsed;
+            if (remainingTime <= 0) {
+                this.formDeleteInput(item);
+                this.stopDeletion(item.id);
+            }
+            else {
+                data.count = remainingTime;
+            }
+        }), takeUntil(this.countdownSeconds[item.id].stop$), takeUntilDestroyed(this.#destroyRef));
+        countdown$.subscribe({
+            complete: () => { },
+        });
+    }
+    stopDeletion(id) {
+        if (this.countdownSeconds[id]) {
+            this.countdownSeconds[id]?.stop$.next();
+            delete this.countdownSeconds[id];
+        }
+    }
+    formDeleteInput(item) {
+        this.deleteInput.emit(item);
+    }
+    dropItems(event) {
+        this.reorderItems.emit(event);
+    }
+    editInput(input) {
+        this.editMultipleInput.emit(input);
+    }
+    toggleLabel(item) {
+        this.showItemAsLabel.emit(item);
+    }
+    toggleFunction(func, _inputId) {
+        const addFunction = {
+            id: v4(),
+            inputId: this.activeInput,
+            func,
+        };
+        this.addFunction.emit(addFunction);
+    }
+    selectedFunction(func) {
+        return this.inputConfig()?.calculateListFunctions?.find((f) => f.inputId === this.activeInput && f.func === func);
+    }
+    closeMultipleInput() {
+        if (this.areYouSure) {
+            this.formBuilderFunctions()?.multipleInputToggleForm(this.inputConfig().id, false);
+            this.areYouSure = false;
+            return;
+        }
+        this.areYouSure = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "<mat-card appearance=\"outlined\" class=\"edit-card mat-elevation-z4\">\n  <mat-card-content>\n    <div class=\"list row\" (cdkDropListDropped)=\"dropItems($event)\"\n      [cdkDropListData]=\"innerInputs()\" cdkDropList #InputList=\"cdkDropList\">\n      @for (innerInput of innerInputs(); track innerInput.id) {\n        <ng-container>\n          @if (editorMode()) {\n            @if (!!formGroup()) {\n              <mat-card (mouseover)=\"activeInput = innerInput.id\" cdkDrag\n                (cdkDragStarted)=\"dragging = true\" (cdkDragReleased)=\"dragging = false\"\n                [class.inputCardElevated]=\"activeInput === innerInput.id\"\n                [class.inputCard]=\"activeInput !== innerInput.id\"\n                [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n                <ng-container *ngComponentOutlet=\"InputComponent;\n                  inputs: {\n                    inputConfig: innerInput,\n                    formGroup: formGroup(),\n                    formBuilderFunctions: formBuilderFunctions(),\n                  }\">\n                </ng-container>\n                @if (activeInput === innerInput.id) {\n                  <mat-card-actions class=\"input-actions\">\n                    <span class=\"spacer\"></span>\n                    <button [matTooltip]=\"'Edit Input: ' + innerInput.label\"\n                      (click)=\"editInput(innerInput)\" mat-icon-button>\n                      <mat-icon>edit</mat-icon>\n                    </button>\n                    @if (!!inputWillBeRemovedIn(innerInput.id)) {\n                      <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\n                        (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\n                        <div class=\"countdown-button\">\n                          <mat-progress-spinner class=\"cancelProgress\" color=\"primary\"\n                            [value]=\"((inputWillBeRemovedIn(innerInput.id) || 0) / 5) * 100\">\n                          </mat-progress-spinner>\n                          {{ overId === innerInput.id ? 'Click to cancel' : 'Deleting in' }}\n                          {{ inputWillBeRemovedIn(innerInput.id) }}\n                        </div>\n                      </button>\n                    } @else if (inputConfig().systemDefault !== true && innerInput.systemDefault !== true) {\n                      <button [matTooltip]=\"'Delete input ' + innerInput.label\"\n                        (click)=\"removeInput(innerInput)\" mat-icon-button>\n                        <mat-icon>delete</mat-icon>\n                      </button>\n                    }\n                    <span class=\"action-divider\"></span>\n                    @if (!!innerInput.showAsLabel && innerInput.dataType === 'number' || !!innerInput.showAsLabel && innerInput.type === 'number') {\n                      <button\n                        [matMenuTriggerFor]=\"calculationMenu\"\n                        [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\n                        [matTooltip]=\"'calculate sum,avg,min,max'\"\n                        mat-icon-button>\n                        <mat-icon>calculate</mat-icon>\n                      </button>\n                    }\n                    <button [color]=\"innerInput.showAsLabel ? 'primary' : ''\"\n                      (click)=\"toggleLabel(innerInput)\"\n                      [matTooltip]=\"innerInput.showAsLabel ? 'Hide as label' : 'Show as label'\"\n                      mat-icon-button>\n                      <mat-icon>label</mat-icon>\n                    </button>\n                    <span class=\"spacer\"></span>\n                  </mat-card-actions>\n                }\n              </mat-card>\n            }\n          } @else {\n            <div [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n              <ng-container *ngComponentOutlet=\"InputComponent;\n                inputs: {\n                  inputConfig: innerInput,\n                  formGroup: formGroup(),\n                  formBuilderFunctions: formBuilderFunctions(),\n                }\">\n              </ng-container>\n            </div>\n          }\n        </ng-container>\n      }\n      @if (!!editorMode() && innerInputs().length === 0) {\n        <div class=\"tree-instructions\">\n          <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n          <span>\n            <strong>Add Form Input</strong>\n            <br>\n            Manage your list by adding, editing, or removing items. Each item is customizable through a form.\n          </span>\n        </div>\n      }\n    </div>\n  </mat-card-content>\n  @if (innerInputs().length !== 0) {\n    <mat-divider></mat-divider>\n    <mat-card-actions align=\"end\" class=\"edit-card-actions\">\n      <button [color]=\"areYouSure ? 'warn' : ''\"\n        [class.confirm-leave]=\"areYouSure\" mat-button\n        (click)=\"closeMultipleInput()\">\n        {{ areYouSure ? \"leave without saving\" : \"cancel\" }}\n      </button>\n      @if (!inputConfig().readonly) {\n        <button [disabled]=\"!!formInvalid()\" class=\"save-button\" color=\"primary\"\n          (click)=\"saveMultipleInputForm()\" mat-raised-button>\n          {{ rowInUpdate() ? \"Update\" : \"Save\" }}\n        </button>\n      }\n    </mat-card-actions>\n  }\n</mat-card>\n\n\n<mat-menu #calculationMenu=\"matMenu\">\n  <ng-template matMenuContent let-inputId=\"sectionId\">\n    @for (func of calculationFunctions; track func) {\n      <button (click)=\"toggleFunction(func, inputId)\" mat-menu-item>\n        {{ func }}\n        @if (selectedFunction(func)) {\n          <mat-icon color=\"primary\">check_circle</mat-icon>\n        }\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".edit-card{margin-top:.5rem;background:var(--mat-sys-surface-container, #f3edf7);border-radius:12px}.inputCardElevated{background:var(--mat-sys-surface, #fef7ff);box-shadow:var(--mdc-elevated-card-container-elevation);transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.inputCard{box-shadow:none;transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.list{min-height:60px}.box{padding:.25rem;cursor:move}.input-actions{display:flex;align-items:center;gap:.125rem}.action-divider{width:1px;align-self:stretch;margin:.25rem;background:color-mix(in srgb,var(--mat-sys-outline, #79747e) 25%,transparent)}.countdown-button{display:flex;align-items:center}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:8px;box-shadow:0 5px 5px -3px color-mix(in srgb,var(--mat-sys-shadow, #000) 20%,transparent),0 8px 10px 1px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent),0 3px 14px 2px color-mix(in srgb,var(--mat-sys-shadow, #000) 12%,transparent)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important;margin-right:.3125rem}.edit-card-actions{gap:.5rem;padding:.5rem .75rem .75rem}.confirm-leave{text-decoration:underline}.save-button{min-width:10em}.tree-instructions{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #6750a4) 14%,transparent);border-radius:8px;margin-bottom:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f)}.info-icon{min-width:38px!important;display:block;margin-top:4px;margin-bottom:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multiple-input-table-edit', imports: [
+                        CommonModule,
+                        DragDropModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatDividerModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatProgressSpinnerModule,
+                        MatTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<mat-card appearance=\"outlined\" class=\"edit-card mat-elevation-z4\">\n  <mat-card-content>\n    <div class=\"list row\" (cdkDropListDropped)=\"dropItems($event)\"\n      [cdkDropListData]=\"innerInputs()\" cdkDropList #InputList=\"cdkDropList\">\n      @for (innerInput of innerInputs(); track innerInput.id) {\n        <ng-container>\n          @if (editorMode()) {\n            @if (!!formGroup()) {\n              <mat-card (mouseover)=\"activeInput = innerInput.id\" cdkDrag\n                (cdkDragStarted)=\"dragging = true\" (cdkDragReleased)=\"dragging = false\"\n                [class.inputCardElevated]=\"activeInput === innerInput.id\"\n                [class.inputCard]=\"activeInput !== innerInput.id\"\n                [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n                <ng-container *ngComponentOutlet=\"InputComponent;\n                  inputs: {\n                    inputConfig: innerInput,\n                    formGroup: formGroup(),\n                    formBuilderFunctions: formBuilderFunctions(),\n                  }\">\n                </ng-container>\n                @if (activeInput === innerInput.id) {\n                  <mat-card-actions class=\"input-actions\">\n                    <span class=\"spacer\"></span>\n                    <button [matTooltip]=\"'Edit Input: ' + innerInput.label\"\n                      (click)=\"editInput(innerInput)\" mat-icon-button>\n                      <mat-icon>edit</mat-icon>\n                    </button>\n                    @if (!!inputWillBeRemovedIn(innerInput.id)) {\n                      <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\n                        (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\n                        <div class=\"countdown-button\">\n                          <mat-progress-spinner class=\"cancelProgress\" color=\"primary\"\n                            [value]=\"((inputWillBeRemovedIn(innerInput.id) || 0) / 5) * 100\">\n                          </mat-progress-spinner>\n                          {{ overId === innerInput.id ? 'Click to cancel' : 'Deleting in' }}\n                          {{ inputWillBeRemovedIn(innerInput.id) }}\n                        </div>\n                      </button>\n                    } @else if (inputConfig().systemDefault !== true && innerInput.systemDefault !== true) {\n                      <button [matTooltip]=\"'Delete input ' + innerInput.label\"\n                        (click)=\"removeInput(innerInput)\" mat-icon-button>\n                        <mat-icon>delete</mat-icon>\n                      </button>\n                    }\n                    <span class=\"action-divider\"></span>\n                    @if (!!innerInput.showAsLabel && innerInput.dataType === 'number' || !!innerInput.showAsLabel && innerInput.type === 'number') {\n                      <button\n                        [matMenuTriggerFor]=\"calculationMenu\"\n                        [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\n                        [matTooltip]=\"'calculate sum,avg,min,max'\"\n                        mat-icon-button>\n                        <mat-icon>calculate</mat-icon>\n                      </button>\n                    }\n                    <button [color]=\"innerInput.showAsLabel ? 'primary' : ''\"\n                      (click)=\"toggleLabel(innerInput)\"\n                      [matTooltip]=\"innerInput.showAsLabel ? 'Hide as label' : 'Show as label'\"\n                      mat-icon-button>\n                      <mat-icon>label</mat-icon>\n                    </button>\n                    <span class=\"spacer\"></span>\n                  </mat-card-actions>\n                }\n              </mat-card>\n            }\n          } @else {\n            <div [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n              <ng-container *ngComponentOutlet=\"InputComponent;\n                inputs: {\n                  inputConfig: innerInput,\n                  formGroup: formGroup(),\n                  formBuilderFunctions: formBuilderFunctions(),\n                }\">\n              </ng-container>\n            </div>\n          }\n        </ng-container>\n      }\n      @if (!!editorMode() && innerInputs().length === 0) {\n        <div class=\"tree-instructions\">\n          <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n          <span>\n            <strong>Add Form Input</strong>\n            <br>\n            Manage your list by adding, editing, or removing items. Each item is customizable through a form.\n          </span>\n        </div>\n      }\n    </div>\n  </mat-card-content>\n  @if (innerInputs().length !== 0) {\n    <mat-divider></mat-divider>\n    <mat-card-actions align=\"end\" class=\"edit-card-actions\">\n      <button [color]=\"areYouSure ? 'warn' : ''\"\n        [class.confirm-leave]=\"areYouSure\" mat-button\n        (click)=\"closeMultipleInput()\">\n        {{ areYouSure ? \"leave without saving\" : \"cancel\" }}\n      </button>\n      @if (!inputConfig().readonly) {\n        <button [disabled]=\"!!formInvalid()\" class=\"save-button\" color=\"primary\"\n          (click)=\"saveMultipleInputForm()\" mat-raised-button>\n          {{ rowInUpdate() ? \"Update\" : \"Save\" }}\n        </button>\n      }\n    </mat-card-actions>\n  }\n</mat-card>\n\n\n<mat-menu #calculationMenu=\"matMenu\">\n  <ng-template matMenuContent let-inputId=\"sectionId\">\n    @for (func of calculationFunctions; track func) {\n      <button (click)=\"toggleFunction(func, inputId)\" mat-menu-item>\n        {{ func }}\n        @if (selectedFunction(func)) {\n          <mat-icon color=\"primary\">check_circle</mat-icon>\n        }\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".edit-card{margin-top:.5rem;background:var(--mat-sys-surface-container, #f3edf7);border-radius:12px}.inputCardElevated{background:var(--mat-sys-surface, #fef7ff);box-shadow:var(--mdc-elevated-card-container-elevation);transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.inputCard{box-shadow:none;transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.list{min-height:60px}.box{padding:.25rem;cursor:move}.input-actions{display:flex;align-items:center;gap:.125rem}.action-divider{width:1px;align-self:stretch;margin:.25rem;background:color-mix(in srgb,var(--mat-sys-outline, #79747e) 25%,transparent)}.countdown-button{display:flex;align-items:center}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:8px;box-shadow:0 5px 5px -3px color-mix(in srgb,var(--mat-sys-shadow, #000) 20%,transparent),0 8px 10px 1px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent),0 3px 14px 2px color-mix(in srgb,var(--mat-sys-shadow, #000) 12%,transparent)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important;margin-right:.3125rem}.edit-card-actions{gap:.5rem;padding:.5rem .75rem .75rem}.confirm-leave{text-decoration:underline}.save-button{min-width:10em}.tree-instructions{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #6750a4) 14%,transparent);border-radius:8px;margin-bottom:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f)}.info-icon{min-width:38px!important;display:block;margin-top:4px;margin-bottom:auto}\n"] }]
+        }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], editorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorMode", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }], onSaveMultipleInputForm: [{ type: i0.Output, args: ["onSaveMultipleInputForm"] }], editMultipleInput: [{ type: i0.Output, args: ["editMultipleInput"] }], deleteInput: [{ type: i0.Output, args: ["deleteInput"] }], showItemAsLabel: [{ type: i0.Output, args: ["showItemAsLabel"] }], addFunction: [{ type: i0.Output, args: ["addFunction"] }], reorderItems: [{ type: i0.Output, args: ["reorderItems"] }] } });
+
+function getCaluculatedTableData(inputConfig, data) {
+    try {
+        if (!Array.isArray(data) || !inputConfig)
+            return data;
+        const input = inputConfig;
+        const funcs = (input?.calculateListFunctions || []);
+        const allUniqueFunctionNames = [
+            ...new Set(funcs.map((f) => f.func)),
+        ];
+        const calculatedData = allUniqueFunctionNames.map((func) => {
+            const newCalculatedData = {
+                SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION: func,
+            };
+            funcs.filter((f) => f.func === func).forEach((f) => {
+                const arrayValues = data.map((d) => Number(d[f.inputId]));
+                newCalculatedData[f.inputId] = calculateListOveralFunctions(func, arrayValues);
+            });
+            return newCalculatedData;
+        });
+        return [...data, ...calculatedData];
+    }
+    catch (error) {
+        return data;
+    }
+}
+
+const customInputConfig = {
+    controlType: 'app-multiple-input-table',
+    nextId: 0,
+};
+class MultipleInputTableComponent extends BaseCustomInput {
+    #destroyRef;
+    constructor() {
+        super(inject(NgControl, { self: true, optional: true }), inject(ElementRef), customInputConfig);
+        this.editorMode = input(false, ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.formBuilderFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "formBuilderFunctions" }] : /* istanbul ignore next */ []));
+        this.#destroyRef = inject(DestroyRef);
+        this.rowInViewOnly = undefined;
+        this.listenToValueChanges();
+    }
+    /**
+     * Manages custom validation errors on the form control.
+     * Intended to be called from the ngDoCheck lifecycle hook.
+     * This function handles both the 'required' error and the new
+     * 'multipleInputListMissingSomeFields' custom error.
+     */
+    checkValidationsAnErrors() {
+        const control = this.ngControl?.control;
+        // 1. Early exit if there's no form control to work with.
+        if (!control) {
+            return;
+        }
+        // --- DEFINE THE DESIRED ERROR STATE ---
+        // 2. Determine if the custom "multiple fields" error should exist.
+        let shouldHaveCustomError = false;
+        const formInputs = this.inputConfig()?.formInputs;
+        if (Array.isArray(formInputs) && Array.isArray(this.value)) {
+            const requiredFieldIds = formInputs
+                .filter(i => i.required)
+                .map(i => i.id);
+            if (requiredFieldIds.length > 0) {
+                const configId = this.inputConfig().id;
+                shouldHaveCustomError = this.value.some(item => requiredFieldIds.some(id => this._isNilOrEmpty(item?.[`${configId}.${id}`])));
+            }
+        }
+        // 3. Determine if the standard 'required' error should exist.
+        const shouldHaveRequiredError = this.required && this._isNilOrEmpty(this.value);
+        // --- APPLY THE ERROR STATE TO THE CONTROL ---
+        // 4. Preserve other errors that might be on the control (e.g., minlength, pattern).
+        const newErrors = { ...control.errors };
+        delete newErrors['required'];
+        delete newErrors['multipleInputListMissingSomeFields'];
+        // 5. Add our managed errors back if their conditions are met.
+        if (shouldHaveRequiredError) {
+            newErrors['required'] = true;
+        }
+        if (shouldHaveCustomError) {
+            newErrors['multipleInputListMissingSomeFields'] = { value: true }; // Or simply 'true'
+        }
+        // 6. Finalize the error object. If no errors, it must be null.
+        const finalErrors = Object.keys(newErrors).length > 0 ? newErrors : null;
+        // 7. IMPORTANT: Only update the control if the errors have actually changed.
+        // This prevents infinite loops within ngDoCheck. A simple stringify is a
+        // dependency-free way to compare the error objects.
+        if (JSON.stringify(control.errors) !== JSON.stringify(finalErrors)) {
+            control.setErrors(finalErrors);
+        }
+    }
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        // 1. Check for standard validation errors from Angular's Forms API.
+        const hasStandardError = !!this.ngControl?.errors;
+        // 2. Check for custom validation errors specific to 'IMultiple' type.
+        let hasCustomError = false;
+        const formInputs = this.inputConfig()?.formInputs;
+        // This custom logic only runs if the config and value are the expected array types.
+        if (Array.isArray(formInputs) && Array.isArray(this.value)) {
+            const requiredFieldIds = formInputs
+                .filter(input => input.required)
+                .map(input => input.id);
+            // The custom error is true if any item in our value array is missing
+            // a value for any of its required sub-fields.
+            if (requiredFieldIds.length > 0) {
+                hasCustomError = this.value.some(item => requiredFieldIds.some(id => this._isNilOrEmpty(item?.[`${this.inputConfig().id}.${id}`])));
+            }
+        }
+        // 3. The final error state is true if *any* validation fails,
+        //    AND the control has been "touched" by the user.
+        return (hasStandardError || hasCustomError) && this.touched;
+    }
+    _isNilOrEmpty(value) {
+        return value === null || value === undefined || value === '';
+    }
+    listenToValueChanges() {
+        this.stateChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.checkItemList();
+        });
+    }
+    checkItemList() {
+        try {
+            if (this.value) {
+                const config = this.inputConfig();
+                const TableData = (config.groupBy?.length ?? 0) > 0
+                    ? addGroups(this.value, config.groupBy)
+                    : this.value;
+                const data = getCaluculatedTableData(config, TableData);
+                if (!this.dataSource) {
+                    this.dataSource = new MatTableDataSource(data);
+                    this.dataSource;
+                }
+                else {
+                    this.dataSource.data = data;
+                }
+            }
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    multipleInputRemoveItem(item) {
+        if (!item)
+            return;
+        if (!this.value)
+            return;
+        this.value = this.value.filter((i) => !_isEqual(i, item));
+        this.applyOptionsTo = undefined;
+        this.onChange(this.value);
+        this.stateChanges.next();
+    }
+    generateMultipleInputForm() {
+        const id = this.inputConfig()?.id;
+        if (!id)
+            return;
+        this.formBuilderFunctions()?.multipleInputToggleForm(id, true);
+    }
+    editRow(rowId) {
+        if (!rowId) {
+            throw new Error('Row id not provided');
+        }
+        const config = this.inputConfig();
+        const fbf = this.formBuilderFunctions();
+        if (!fbf || !config)
+            return;
+        fbf.multipleInputEditRow(config.id, rowId);
+        // if( !this.inputConfig?.multipleInputController){
+        //     return
+        // }
+        //   this.inputConfig.multipleInputInEditId = this.applyOptionsTo.id;
+        // this.inputConfig.applyMultipleInputValuesToForm(
+        //   this.applyOptionsTo
+        // );
+    }
+    copy(rowId) {
+        const config = this.inputConfig();
+        const fbf = this.formBuilderFunctions();
+        if (!fbf || !config)
+            return;
+        fbf.multipleInputDuplicateRow(config.id, rowId);
+        // this.generateMultipleInputForm();
+        // this.inputConfig?.applyMultipleInputValuesToForm(
+        //   this.applyOptionsTo
+        // );
+        // this.applyOptionsTo = undefined;
+    }
+    get handleLabel() {
+        return this.inputConfig()?.handleLabel;
+    }
+    handleIcon() {
+        // NOTE(phase-4): `handleIcon` is declared on `IBasicFormInput` but not on `IMultiple` directly;
+        // narrow through `ITowerStepColumn` (which extends FormColumnInputs) and provide a string fallback.
+        const cfg = this.inputConfig();
+        return cfg?.handleIcon || 'add';
+    }
+    saveMultipleInputForm() {
+        this.formBuilderFunctions()?.multipleInputSaveForm(this.inputConfig().id);
+        //  const value: any = this.inputConfig?.multipleInputFormValue();
+        // value['id'] = uuidv4();
+        // if (!this.inputConfig) {
+        //   return
+        // }
+        //   const previousValue = this.value
+        //   if (!previousValue) {
+        //     this.value = [value];
+        //     this.inputConfig.multipleInputController = undefined;
+        //   } else {
+        //     if (this.inputConfig?.multipleInputInEditId) {
+        //       let inEdit = previousValue.find(
+        //         (i: { id: any }) =>
+        //           i.id === this.inputConfig?.multipleInputInEditId
+        //       );
+        //       Object.keys(inEdit).every((s) => {
+        //         s;
+        //         inEdit[s] = value[s];
+        //         return !!inEdit[s];
+        //       });
+        //        this.value =  [...previousValue],
+        //       this.inputConfig.multipleInputController = undefined;
+        //     } else {
+        //       this.value = [...previousValue, value];
+        //       this.inputConfig.multipleInputController = undefined;
+        //     }
+        //   }
+        //   this.onChange(this.value);
+        //   this.stateChanges.next();
+        //   this.checkItemList(this.value || []);
+        //   return
+    }
+    editInput(input) {
+        const fbf = this.formBuilderFunctions();
+        if (typeof fbf?.editInput !== 'function') {
+            throw new Error('editInput function not defined in formBuilderFunctions');
+        }
+        fbf.editInput(input);
+    }
+    deleteItemInput(input) {
+        this.formBuilderFunctions()?.deleteInput(input);
+    }
+    showItemAsLabel(input) {
+        this.formBuilderFunctions()?.multipleInputToggleLabel(input);
+    }
+    addFunction(func) {
+        this.formBuilderFunctions()?.addFunction(func, this.inputConfig()?.id);
+    }
+    // `FormBuilderFunctions.reorderItems` is now generic over the row shape; the
+    // container/data slots stay `unknown` (opaque drag payload).
+    reorderItems(event) {
+        const config = this.inputConfig();
+        const fbf = this.formBuilderFunctions();
+        if (!fbf || !config)
+            return;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Phase-4 TODO: deduplicate @angular/cdk peer dep in typings package; CdkDragDrop types are nominally distinct across copies.
+        fbf.reorderItems(event, config.id);
+    }
+    get parentFormGroup() {
+        return this.ngControl?.control?.parent;
+    }
+    get canAddRecords() {
+        const config = this.inputConfig();
+        if (!config)
+            return false;
+        //NOTE: Temporary backward compatibility for older versions of the config that might not have the new property
+        if (!config.multipleInputAvailableOperations)
+            return true;
+        return config.multipleInputAvailableOperations?.includes(MultipleInputAvailableOperations.Add);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableComponent, isStandalone: true, selector: "lib-multiple-input-table", inputs: { editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], usesInheritance: true, ngImport: i0, template: "<lib-multiple-input-table-view\n  [inputConfig]=\"inputConfig()\"\n  [dataSource]=\"dataSource\"\n  [applyOptionsTo]=\"applyOptionsTo\"\n  [formGroup]=\"parentFormGroup\"\n  (onEditItem)=\"editRow($event)\"\n  (showItemAsLabel)=\"showItemAsLabel(inputConfig())\"\n  (onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\n  (onCopy)=\"copy($event)\"\n  (onApplyOptionsTo)=\"applyOptionsTo = $event\"\n></lib-multiple-input-table-view>\n\n@if (!!inputConfig().formIsOpen || !!rowInViewOnly) {\n  <lib-multiple-input-table-edit\n    [editorMode]=\"editorMode()\"\n    (editMultipleInput)=\"editInput($event)\"\n    (deleteInput)=\"deleteItemInput($event)\"\n    (addFunction)=\"addFunction($event)\"\n    (showItemAsLabel)=\"showItemAsLabel($event)\"\n    (onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\n    (reorderItems)=\"reorderItems($event)\"\n    [formBuilderFunctions]=\"formBuilderFunctions()\"\n    [formGroup]=\"parentFormGroup\"\n    [inputConfig]=\"inputConfig()\"\n  ></lib-multiple-input-table-edit>\n}\n\n@if (!inputConfig().readonly && !inputConfig().formIsOpen && canAddRecords) {\n  <section class=\"add-row-bar\">\n    <button class=\"add-row-button\" (click)=\"generateMultipleInputForm()\" mat-stroked-button>\n      <mat-icon class=\"add-row-icon\">{{ handleIcon() }}</mat-icon>\n      <span class=\"add-row-label\">{{ handleLabel }}</span>\n    </button>\n  </section>\n}\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}.add-row-bar{margin-top:.5rem}.add-row-button{width:100%;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;border:1px dashed color-mix(in srgb,var(--mat-sys-outline, #79747e) 60%,transparent);border-radius:8px;color:var(--mat-sys-on-surface-variant, #49454f);background:transparent;font-size:.8125rem;font-weight:500;letter-spacing:.01em;transition:border-color .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1)}.add-row-button:hover{border-color:var(--mat-sys-primary, #6750a4);color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.add-row-button:focus-visible{border-style:solid;border-color:var(--mat-sys-primary, #6750a4);box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.add-row-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.add-row-label{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MultipleInputTableEditComponent, selector: "lib-multiple-input-table-edit", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"], outputs: ["onSaveMultipleInputForm", "editMultipleInput", "deleteInput", "showItemAsLabel", "addFunction", "reorderItems"] }, { kind: "component", type: MultipleInputTableViewComponent, selector: "lib-multiple-input-table-view", inputs: ["inputConfig", "dataSource", "applyOptionsTo", "formGroup"], outputs: ["onEditItem", "onDeleteItem", "onCopy", "onApplyOptionsTo", "showItemAsLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multiple-input-table', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        MultipleInputTableEditComponent,
+                        MultipleInputTableViewComponent,
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<lib-multiple-input-table-view\n  [inputConfig]=\"inputConfig()\"\n  [dataSource]=\"dataSource\"\n  [applyOptionsTo]=\"applyOptionsTo\"\n  [formGroup]=\"parentFormGroup\"\n  (onEditItem)=\"editRow($event)\"\n  (showItemAsLabel)=\"showItemAsLabel(inputConfig())\"\n  (onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\n  (onCopy)=\"copy($event)\"\n  (onApplyOptionsTo)=\"applyOptionsTo = $event\"\n></lib-multiple-input-table-view>\n\n@if (!!inputConfig().formIsOpen || !!rowInViewOnly) {\n  <lib-multiple-input-table-edit\n    [editorMode]=\"editorMode()\"\n    (editMultipleInput)=\"editInput($event)\"\n    (deleteInput)=\"deleteItemInput($event)\"\n    (addFunction)=\"addFunction($event)\"\n    (showItemAsLabel)=\"showItemAsLabel($event)\"\n    (onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\n    (reorderItems)=\"reorderItems($event)\"\n    [formBuilderFunctions]=\"formBuilderFunctions()\"\n    [formGroup]=\"parentFormGroup\"\n    [inputConfig]=\"inputConfig()\"\n  ></lib-multiple-input-table-edit>\n}\n\n@if (!inputConfig().readonly && !inputConfig().formIsOpen && canAddRecords) {\n  <section class=\"add-row-bar\">\n    <button class=\"add-row-button\" (click)=\"generateMultipleInputForm()\" mat-stroked-button>\n      <mat-icon class=\"add-row-icon\">{{ handleIcon() }}</mat-icon>\n      <span class=\"add-row-label\">{{ handleLabel }}</span>\n    </button>\n  </section>\n}\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}.add-row-bar{margin-top:.5rem}.add-row-button{width:100%;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;border:1px dashed color-mix(in srgb,var(--mat-sys-outline, #79747e) 60%,transparent);border-radius:8px;color:var(--mat-sys-on-surface-variant, #49454f);background:transparent;font-size:.8125rem;font-weight:500;letter-spacing:.01em;transition:border-color .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1)}.add-row-button:hover{border-color:var(--mat-sys-primary, #6750a4);color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.add-row-button:focus-visible{border-style:solid;border-color:var(--mat-sys-primary, #6750a4);box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.add-row-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.add-row-label{line-height:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorMode", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }] } });
+function addGroups(tableValue, groupBy) {
+    throw new Error('Function not implemented.');
+}
+
+/** Wraps a multi-row input table inside a `mat-form-field`. */
+class MultipleInputInputElementComponent {
+    constructor() {
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.editorMode = input(false, ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
+        this.formBuilderFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "formBuilderFunctions" }] : /* istanbul ignore next */ []));
+        this.reload = output();
+        this.errorMessage = computed(() => getInputErrorMessage(this.inputConfig(), this.formGroup()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-input-element", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\">\n  @if (inputConfig(); as inputConfig) {\n    <mat-form-field\n      class=\"multiple-input-field\"\n      [appearance]=\"inputConfig.appearance || 'fill'\"\n      subscriptSizing=\"dynamic\"\n      floatLabel=\"always\"\n    >\n      <mat-label>\n        {{ inputConfig.label }}\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\n      </mat-label>\n\n      @if (inputConfig.id) {\n        <lib-multiple-input-table\n          [editorMode]=\"editorMode()\"\n          [required]=\"inputConfig.required\"\n          [formGroup]=\"formGroup()\"\n          [formBuilderFunctions]=\"formBuilderFunctions()\"\n          [formControlName]=\"inputConfig.id\"\n          [inputConfig]=\"inputConfig\"\n        ></lib-multiple-input-table>\n      }\n\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\n        <mat-hint class=\"inputHint\">\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\n        </mat-hint>\n      }\n\n      @if (!!errorMessage()) {\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\n      }\n\n      @if (inputConfig.canReload?.canReload) {\n        <button\n          mat-icon-button\n          matTooltip=\"Click to refresh this field.\"\n          class=\"input-sync-button\"\n          (click)=\"inputConfig.canReload.emit()\"\n          matSuffix\n        >\n          <mat-icon>sync</mat-icon>\n        </button>\n      }\n\n      @if (inputConfig.prefixIcon) {\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.prefixText) {\n        <span class=\"affix-text\" matPrefix>{{ inputConfig.prefixText }}</span>\n      }\n      @if (inputConfig.suffixText) {\n        <span class=\"affix-text affix-text--suffix\" matSuffix>{{ inputConfig.suffixText }}</span>\n      }\n\n      @if (inputConfig.maxLength && formGroup()) {\n        <mat-hint align=\"end\">\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n</form>\n", styles: [":host{display:block}.multiple-input-field{width:100%}.affix-text{top:0;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.8125rem}.affix-text--suffix{padding-left:.3125rem}.input-sync-button{margin-right:.25rem;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}.input-sync-button mat-icon{color:var(--mat-sys-primary, #6750a4)}.multiple-input-field:hover .input-sync-button,.multiple-input-field:focus-within .input-sync-button{opacity:1;transform:scale(1);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: MultipleInputTableComponent, selector: "lib-multiple-input-table", inputs: ["editorMode", "formGroup", "inputConfig", "formBuilderFunctions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputInputElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multiple-input-input-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        TFormInputStatusComponent,
+                        MultipleInputTableComponent,
+                    ], template: "<form [formGroup]=\"formGroup()\">\n  @if (inputConfig(); as inputConfig) {\n    <mat-form-field\n      class=\"multiple-input-field\"\n      [appearance]=\"inputConfig.appearance || 'fill'\"\n      subscriptSizing=\"dynamic\"\n      floatLabel=\"always\"\n    >\n      <mat-label>\n        {{ inputConfig.label }}\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\n      </mat-label>\n\n      @if (inputConfig.id) {\n        <lib-multiple-input-table\n          [editorMode]=\"editorMode()\"\n          [required]=\"inputConfig.required\"\n          [formGroup]=\"formGroup()\"\n          [formBuilderFunctions]=\"formBuilderFunctions()\"\n          [formControlName]=\"inputConfig.id\"\n          [inputConfig]=\"inputConfig\"\n        ></lib-multiple-input-table>\n      }\n\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\n        <mat-hint class=\"inputHint\">\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\n        </mat-hint>\n      }\n\n      @if (!!errorMessage()) {\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\n      }\n\n      @if (inputConfig.canReload?.canReload) {\n        <button\n          mat-icon-button\n          matTooltip=\"Click to refresh this field.\"\n          class=\"input-sync-button\"\n          (click)=\"inputConfig.canReload.emit()\"\n          matSuffix\n        >\n          <mat-icon>sync</mat-icon>\n        </button>\n      }\n\n      @if (inputConfig.prefixIcon) {\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.prefixText) {\n        <span class=\"affix-text\" matPrefix>{{ inputConfig.prefixText }}</span>\n      }\n      @if (inputConfig.suffixText) {\n        <span class=\"affix-text affix-text--suffix\" matSuffix>{{ inputConfig.suffixText }}</span>\n      }\n\n      @if (inputConfig.maxLength && formGroup()) {\n        <mat-hint align=\"end\">\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n</form>\n", styles: [":host{display:block}.multiple-input-field{width:100%}.affix-text{top:0;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.8125rem}.affix-text--suffix{padding-left:.3125rem}.input-sync-button{margin-right:.25rem;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}.input-sync-button mat-icon{color:var(--mat-sys-primary, #6750a4)}.multiple-input-field:hover .input-sync-button,.multiple-input-field:focus-within .input-sync-button{opacity:1;transform:scale(1);pointer-events:auto}\n"] }]
+        }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], editorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorMode", required: false }] }], formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
+
+export { MultipleInputInputElementComponent };
+//# sourceMappingURL=ngx-t-forms-multiple-input-input-element.component-C7y1OGPx.mjs.map