ngx-t-forms 2.0.24 → 2.0.26

package/README.md

@@ -1,27 +1,188 @@
-# NgxTForms
-atar
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.0.
+# ngx-t-forms
 
-## Code scaffolding
+Enterprise-ready Angular form builder and runtime. Build dynamic, multi-step forms from JSON schemas with calculated fields, API-driven options, file uploads, signatures, and rich text editing.
 
-ng generate s tets --project ngx-t-forms
+## Why ngx-t-forms
 
-Run `ng generate component component-name --project ngx-t-forms` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-t-forms`.
-> Note: Don't forget to add `--project ngx-t-forms` or else it will be added to the default project in your `angular.json` file. 
+- JSON-driven form schema with sections, columns, and rich inputs
+- Standalone Angular components for fast integration
+- Built-in form builder UI and form listing UI
+- Calculated fields, dependent logic, and custom validation rules
+- API and Mongo pipeline-driven options/value fetching
+- Specialized inputs: signature pad, QR code, geo-location, file upload, rich text editor
 
-## Build
+## Requirements
 
-Run `ng build ngx-t-forms` to build the project. The build artifacts will be stored in the `dist/` directory.
- `ng build ngx-t-forms --configuration production`
+- Angular `^19.2.6`
+- RxJS `~7.8`
+- Angular CDK + Material (theme required)
+- `ngx-t-forms-types` (type definitions for schemas)
 
-## Publishing
+Many specialized inputs are enabled by peer dependencies (EditorJS tools, `signature_pad`, `html5-qrcode`, `qrcode`, `mathjs`, `joi`). Install them if you use those inputs.
 
-After building your library with `ng build ngx-t-forms`, go to the dist folder `cd dist/ngx-t-forms` and run `npm publish`.
+## Installation
 
-## Running unit tests
+```bash
+npm i ngx-t-forms ngx-t-forms-types
+```
 
-Run `ng test ngx-t-forms` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Install peer dependencies used by your inputs:
 
-## Further help
+```bash
+npm i @angular/material @angular/cdk @angular/animations
+npm i @editorjs/editorjs @editorjs/header @editorjs/list @editorjs/paragraph @editorjs/table @editorjs/quote @editorjs/marker @editorjs/image @editorjs/embed @editorjs/code @editorjs/raw @editorjs/delimiter @editorjs/text-variant-tune
+npm i signature_pad html5-qrcode qrcode mathjs joi ngx-ui-tour-md-menu db-aggregation-pipeline-builder uuid
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Add an Angular Material theme (required for all UI components):
+
+```json
+// styles (angular.json)
+"styles": [
+  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+  "src/styles.scss"
+]
+```
+
+## Quick start
+
+### 1) Provide library configuration
+
+`ngx-t-forms` uses a single environment config to wire UI actions and data access.
+
+```ts
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideNgxTForms } from 'ngx-t-forms';
+import { NgxTFormsConfig } from 'ngx-t-forms-types';
+import { of } from 'rxjs';
+
+const ngxTFormsConfig: NgxTFormsConfig = {
+  formBuilder: {
+    addNewForm: () => {},
+    editForm: (formId: string) => {},
+    getForm: (formId: string) => of(null),
+    saveFormData: (formId: string | undefined, data: Record<string, any>) => {},
+    formSubmittedSuccessfully: (formId?: string) => {},
+    toastSuccess: (message: string) => {},
+    toastError: (message: string) => {},
+    httpGetDataFunction: (url: string, options?: any) => of(null),
+    httpPostDataFunction: (url: string, data: any, options?: any) => of(null),
+    runMongoDbPipeLine: (payload: any) => of([]),
+    fileUpload: (file: string, fileName: string, fileType: string) => of({ url: '' }),
+    getUserSignature: () => of(null),
+    saveUserSignature: (data: any) => of(null),
+    getScoaTree: () => of(null),
+    getSCOAAccount: (account: string) => of(null),
+    getWorkflowCols: (workflowId: string) => of([]),
+    getSelectedDocument: (docId: string) => of(null)
+  }
+};
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(),
+    provideNgxTForms(ngxTFormsConfig)
+  ]
+};
+```
+
+### 2) Render a complete form
+
+`UserFormStepperComponent` renders a full, multi-step form from a stored schema.
+
+```ts
+import { Component } from '@angular/core';
+import { UserFormStepperComponent } from 'ngx-t-forms';
+
+@Component({
+  selector: 'app-form-runner',
+  standalone: true,
+  imports: [UserFormStepperComponent],
+  template: `
+    <lib-user-form-stepper
+      [formId]="formId"
+      [initialValues]="initialValues"
+      [passParamsOnSubmit]="submitContext">
+    </lib-user-form-stepper>
+  `
+})
+export class FormRunnerComponent {
+  formId = 'your-form-id';
+  initialValues = {};
+  submitContext = { submittedBy: 'user-id' };
+}
+```
+
+## Core components
+
+- `FormBuilderComponent`: UI to build and edit forms
+- `FormsComponent`: list and manage saved forms
+- `UserFormStepperComponent`: runtime stepper UI to complete a form
+- `TFormInputComponent`: render a single input definition
+- `TDynamicDataEditComponent` / `TDynamicDataViewComponent`: schema editors and read-only views
+
+All components are standalone; import them directly in your `imports` array.
+
+## Form schema (overview)
+
+Form schemas are typed in `ngx-t-forms-types`. The core pattern is:
+
+```ts
+import { ElementTypes, InputDataTypes, InputTypes } from 'ngx-t-forms-types';
+
+const form = {
+  slides: [
+    {
+      sectionId: 'section-1',
+      label: 'Customer Details',
+      columns: [
+        {
+          element: ElementTypes.Input,
+          dataType: InputDataTypes.String,
+          type: InputTypes.Text,
+          label: 'Full name',
+          formControlName: 'fullName',
+          id: 'fullName',
+          colSize: 6,
+          required: true
+        }
+      ]
+    }
+  ]
+};
+```
+
+### Calculated fields
+
+Use `calculatedFieldRules` to compute values based on other inputs:
+
+```ts
+{
+  element: ElementTypes.Input,
+  isCalculatedField: true,
+  formControlName: 'total',
+  calculatedFieldRules: {
+    variables: [
+      { variable: 'a', inputId: 'price', formControlName: 'price' },
+      { variable: 'b', inputId: 'qty', formControlName: 'qty' }
+    ],
+    formula: 'a * b'
+  }
+}
+```
+
+## Scripts (library development)
+
+- Build: `ng build ngx-t-forms --configuration production`
+- Test: `ng test ngx-t-forms`
+- Publish: `ng build ngx-t-forms` then `npm publish` from `dist/ngx-t-forms`
+
+## Repository
+
+- Repo: `https://github.com/petoriT/01ANGULAR-WORKSPACE`
+
+## License
+
+Private — all rights reserved. Permission to use, copy, or redistribute must be obtained from the founder and creator, Mashego Terrence.

package/fesm2022/ngx-t-forms-calculated-field-rules.component-Cs_Lhz_D.mjs

@@ -0,0 +1,313 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Input, Output, HostBinding, Optional, Self, Component } from '@angular/core';
+import { v4 } from 'uuid';
+import { _ as _isEqual, M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-CD9InaXz.mjs';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { FormInputSelectorComponent } from './ngx-t-forms-form-input-selector.component-C38FXT55.mjs';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import { CalculationFunctions } from 'ngx-t-forms-types';
+import * as i10$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/material/autocomplete';
+import * as i2$2 from '@angular/material/button';
+import * as i3 from '@angular/material/card';
+import * as i5 from '@angular/material/chips';
+import * as i4 from '@angular/material/divider';
+import * as i2$3 from '@angular/material/icon';
+import * as i2$4 from '@angular/material/select';
+import * as i10 from '@angular/material/toolbar';
+import * as i13 from '@angular/material/input';
+
+// import 'mathlive';
+// Define the interface for the Mathfield element to avoid TS errors
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     'math-field': MathfieldElement;
+//   }
+// }
+// import { MathfieldElement } from 'mathlive';
+// import { cleanLatexForMathJS, cleanMathJSForLatex } from '../../../../services/core/t-form-tower-controller/functions/lateToMathjs';
+class CalculatedFieldRulesComponent {
+    static { this.nextId = 0; }
+    constructor(ngControl, _elementRef) {
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        // #region MatFormFieldControl Properties
+        this.id = `app-calculated-field-rules-${CalculatedFieldRulesComponent.nextId++}`;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.touched = false;
+        this.controlType = 'app-calculated-field-rules';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        // #endregion
+        // #region Component Inputs/Outputs
+        this.mapToData = undefined;
+        this.formInputs = [];
+        this.errors = [];
+        this.valueChange2dWithPath = new EventEmitter();
+        this.valueChanged = new EventEmitter();
+        // Edit Mode State
+        this.isEditing = false;
+        this.tempValue = {}; // Local state for editing
+        // Cache for performance (calculated in ngOnChanges)
+        this.cachedNumberInputs = [];
+        // Variable config state
+        this.activeVariable = {};
+        this.showVariableConfig = false;
+        this.roundingType = [
+            { value: 'FLOOR', label: 'Round Down (FLOOR)' },
+            { value: 'CEIL', label: 'Round Up (CEIL)' },
+            { value: 'ROUND', label: 'Standard Rounding (ROUND)' },
+        ];
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        if (changes['formInputs']) {
+            this.cachedNumberInputs = this.formInputs?.filter((input) => input.dataType === 'number' || input.type === 'number') || [];
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.next();
+        this.stateChanges.complete();
+    }
+    // #region Value Accessor & MatFormFieldControl Logic
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        if (_isEqual(this._value, val))
+            return;
+        this._value = val ? {
+            ...val
+        } : undefined;
+        this.stateChanges.next();
+        this.valueChanged.emit(this._value);
+        this.onChange(this._value);
+    }
+    get empty() {
+        return !this._value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        const hasCustomError = (this.errors || []).length > 0;
+        const hasControlError = !!this.ngControl?.control?.errors;
+        return ((this.touched && (hasControlError || hasCustomError)) ||
+            (!!this.required && !this.value));
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDescribedByIds(ids) {
+        if (this._elementRef?.nativeElement) {
+            const controlElement = this._elementRef.nativeElement.querySelector('.app-calculated-field-rules');
+            if (controlElement) {
+                controlElement.setAttribute('aria-describedby', ids.join(' '));
+            }
+        }
+    }
+    onContainerClick(event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+        this.markAsTouched();
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+            this.stateChanges.next();
+        }
+    }
+    // #endregion
+    // #region Edit Mode Logic
+    startEdit() {
+        // Clone the current value into tempValue to prevent immediate emission
+        this.tempValue = this.value
+            ? JSON.parse(JSON.stringify(this.value))
+            : {};
+        this.isEditing = true;
+        this.markAsTouched();
+    }
+    saveEdit() {
+        // Commit tempValue to actual value
+        this.value = this.tempValue;
+        this.isEditing = false;
+    }
+    cancelEdit() {
+        // Discard changes
+        this.isEditing = false;
+        this.tempValue = {};
+    }
+    // #endregion
+    // #region Getters
+    get allCalculationFunction() {
+        return Object.values(CalculationFunctions);
+    }
+    get tableMode() {
+        return !!this.mapToData?.tableConfig;
+    }
+    get tableConfig() {
+        return this.mapToData?.tableConfig;
+    }
+    // #endregion
+    // #region Logic (Refactored to use tempValue)
+    checkIfInputCanBeLinkedToCalVariable(currentInput, inputToDisable) {
+        if (!currentInput)
+            return false;
+        if (currentInput.formControlName === inputToDisable.formControlName) {
+            return true;
+        }
+        if (!currentInput.multipleInputInEditId) {
+            return !!inputToDisable.parentInput || !!inputToDisable.multipleInputInEditId;
+        }
+        return false;
+    }
+    linkFormulaSource(event) {
+        this.tempValue = {
+            ...this.tempValue,
+            formControlWithFormula: event.value,
+            formula: undefined // Reset formula when source changes
+        };
+    }
+    removeVariable(variableId) {
+        if (!this.tempValue?.variables)
+            return;
+        this.tempValue = {
+            ...this.tempValue,
+            variables: this.tempValue.variables.filter(v => v.id !== variableId)
+        };
+    }
+    appendVariableToFormula(variableName) {
+        const currentFormula = this.tempValue?.formula || '';
+        this.tempValue = {
+            ...this.tempValue,
+            formula: `${currentFormula} ${variableName}`
+        };
+    }
+    // #endregion
+    // #region Variable Configuration
+    toggleVariableConfig() {
+        this.showVariableConfig = !this.showVariableConfig;
+        if (!this.showVariableConfig) {
+            this.activeVariable = {};
+        }
+    }
+    bindInput(inputId) {
+        const input = this.formInputs?.find((i) => i.id === inputId);
+        if (!input)
+            return;
+        if (this.activeVariable.formControlName === input.formControlName) {
+            return;
+        }
+        this.activeVariable = {
+            ...this.activeVariable,
+            formControlName: input.formControlName,
+            label: input.label,
+            inputId: input.id,
+            parentInputId: input.multipleInputInEditId
+        };
+    }
+    attachFunction(event, funcValue) {
+        event.stopPropagation();
+        if (this.activeVariable.function === funcValue) {
+            this.activeVariable.function = undefined;
+            this.activeVariable.applyFunctionToCol = undefined;
+            this.activeVariable.applyFunctionToLabel = undefined;
+        }
+        else {
+            this.activeVariable.function = funcValue;
+            this.activeVariable.applyFunctionToCol = this.activeVariable.formControlName;
+            this.activeVariable.applyFunctionToLabel = this.activeVariable.label;
+        }
+    }
+    cancelVariableConfig() {
+        this.activeVariable = {};
+        this.showVariableConfig = false;
+    }
+    saveNewVariable() {
+        const currentVariables = this.tempValue?.variables || [];
+        const newVar = {
+            ...this.activeVariable,
+            id: v4(),
+            variable: this.activeVariable.variable || '',
+        };
+        if (this.inputIsInItemList(newVar)) {
+            const input = this.formInputs?.find((i) => i.formControlName === newVar.formControlName);
+            if (input?.multipleInputInEditId) {
+                newVar['parentInputId'] = input.multipleInputInEditId;
+            }
+        }
+        this.tempValue = {
+            ...this.tempValue,
+            variables: [...currentVariables, newVar],
+            formula: this.tempValue.formula || ''
+        };
+        this.activeVariable = {};
+        this.showVariableConfig = false;
+    }
+    inputIsInItemList(v) {
+        const input = this.formInputs?.find((i) => i.formControlName === v.formControlName);
+        const hasParent = input ? !!input.multipleInputInEditId : false;
+        const isInTable = v.tableCell;
+        return hasParent || isInTable;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CalculatedFieldRulesComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CalculatedFieldRulesComponent, isStandalone: true, selector: "app-calculated-field-rules", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", mapToData: "mapToData", formInputs: "formInputs", errors: "errors", value: "value" }, outputs: { valueChange2dWithPath: "valueChange2dWithPath", valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CalculatedFieldRulesComponent }], usesOnChanges: true, ngImport: i0, template: "<br>\r\n\r\n<!-- View Mode (Summary) -->\r\n@if (!isEditing) {\r\n<div class=\"view-mode-container\"\r\n  style=\"display: flex; flex-direction: column; gap: 8px;background:var(--mat-sys-surface-variant)\">\r\n\r\n  @if (!!value && !mapToData?.['id'] && !tableMode) {\r\n  <div class=\"tree-instructions\">\r\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n    <span>Save the input first to enable calculated field configurations</span>\r\n  </div>\r\n  }\r\n\r\n  <div\r\n    style=\"display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--mat-sys-outline-variant, #ccc); border-radius: 4px; padding: 12px;\">\r\n    <div style=\"display: flex; flex-direction: column; width: 100%;\">\r\n      <span style=\"font-size: 0.85em; opacity: 0.7;\">Current Formula</span>\r\n      <span style=\"font-weight: 500; font-size: 1.1em; width: 100%;\">\r\n        <!-- <math-field style=\"width: 100%;\" #mathfield \r\n        [readOnly]=\"true\"\r\n        [value]=\"getFormular\">\r\n        </math-field> -->\r\n\r\n        <code>\r\n          <pre>\r\n              {{ value?.formula || 'No formula configured' }}\r\n          </pre>\r\n          </code>\r\n\r\n\r\n      </span>\r\n      @if(value?.decimalPlaces) {\r\n      <span style=\"font-size: 0.8em; margin-top: 4px; opacity: 0.7;\">\r\n        Decimals: {{value?.decimalPlaces}} | Rounding: {{value?.roundingMode || 'None'}}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n<button style=\"width: 100%;margin-top: 16px;\" mat-stroked-button color=\"primary\" (click)=\"startEdit()\">\r\n  <mat-icon>edit</mat-icon>\r\n  Edit Rules\r\n</button>\r\n}\r\n\r\n<!-- Edit Mode (Editor Card) -->\r\n@else {\r\n<mat-card appearance=\"outlined\" class=\"editor-card\" style=\"padding: 16px; border-color: var(--mat-sys-primary);\">\r\n  <h3 style=\"margin-top: 0; margin-bottom: 16px; color: var(--mat-sys-primary);\">\r\n    <mat-icon style=\"vertical-align: middle; margin-right: 8px;\">functions</mat-icon>\r\n    Edit Calculation\r\n  </h3>\r\n\r\n  <section>\r\n    <!-- Main Formula Input -->\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\" appearance=\"outline\" style=\"width: 100%;\">\r\n      <mat-label>Equation</mat-label>\r\n      <textarea matInput [(ngModel)]=\"tempValue['formula']\" placeholder=\"Enter calculation expression\"\r\n        rows=\"3\"></textarea>\r\n      <mat-hint>example: ((a+2)/(b-1))*2</mat-hint>\r\n    </mat-form-field>\r\n      <!-- <math-field style=\"width: 100%;\" #mathfield \r\n        [readOnly]=\"false\"\r\n        [value]=\"getFormular\" \r\n        [smartMode]=\"true\"\r\n        (input)=\"onInput(mathfield.value)\">\r\n        </math-field> -->\r\n    <!-- Optional Source Link -->\r\n    @if (!!tempValue?.getFormulaFromAFormInput) {\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\"\r\n      style=\"margin-bottom: 8px; margin-top: 12px; width: 100%;\" appearance=\"outline\">\r\n      <mat-label>Equation Source</mat-label>\r\n      <mat-select matNativeControl [value]=\"tempValue.formControlWithFormula\"\r\n        (selectionChange)=\"linkFormulaSource($event)\" placeholder=\"select Input with formula\">\r\n        @for (input of formInputs; track input.id) {\r\n        <mat-option [disabled]=\"checkIfInputCanBeLinkedToCalVariable(mapToData, input) || input.element !== 'select'\"\r\n          [value]=\"input.formControlName\">\r\n          {{input.label}}\r\n        </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-hint>Link formula to an input value</mat-hint>\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- Variable Chips List -->\r\n    <div style=\"margin-top: 12px; margin-bottom: 12px;\">\r\n      <label style=\"font-size: 0.9em; opacity: 0.8; display: block; margin-bottom: 8px;\">Variables</label>\r\n      <mat-chip-listbox aria-label=\"options\">\r\n        @for (variable of (tempValue['variables'] || []); track variable.id) {\r\n        <mat-chip (click)=\"appendVariableToFormula(variable.variable)\" (removed)=\"removeVariable(variable.id!)\">\r\n          <div [style.color]=\"variable.tableCell ? 'var(--ion-color-purple)' : ''\" style=\"font-size: 0.8125em\">\r\n            {{ variable.variable }} - {{ variable.label }}\r\n            @if (variable.function) {\r\n            <span style=\"opacity: 0.6; padding-left: 5px\">{{ variable.function }}</span>\r\n            }\r\n          </div>\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n        }\r\n\r\n        <!-- Add/Close Variable Button -->\r\n        <mat-chip highlighted=\"true\" [color]=\"showVariableConfig ? 'warn' : 'accent'\" (click)=\"toggleVariableConfig()\">\r\n          <span>{{ showVariableConfig ? 'Close Variable Edit' : 'Add a new Variable' }}</span>\r\n          <mat-icon matChipTrailingIcon>{{ showVariableConfig ? 'close' : 'add' }}</mat-icon>\r\n        </mat-chip>\r\n      </mat-chip-listbox>\r\n    </div>\r\n\r\n    <!-- Variable Configuration Panel -->\r\n    @if (showVariableConfig) {\r\n    @defer (on immediate) {\r\n    <ng-container *ngTemplateOutlet=\"variableConfigurationTpl\"></ng-container>\r\n    }\r\n    }\r\n\r\n    <mat-divider style=\"margin: 16px 0;\"></mat-divider>\r\n\r\n    <!-- Rounding Settings -->\r\n    <div style=\"display: flex; gap: 16px; flex-wrap: wrap;\">\r\n      <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\" appearance=\"outline\"\r\n        style=\"flex: 1; min-width: 150px;\">\r\n        <mat-label>Decimal Places</mat-label>\r\n        <input matInput [(ngModel)]=\"tempValue['decimalPlaces']\" placeholder=\"0\" type=\"number\" min=\"0\">\r\n      </mat-form-field>\r\n\r\n      @if (tempValue['decimalPlaces']) {\r\n      <div style=\"flex: 2;\">\r\n        <label style=\"font-size: 0.85em; opacity: 0.8;\">Rounding Mode</label>\r\n        <mat-chip-listbox aria-label=\"Rounding types\" style=\"margin-top: 4px;\">\r\n          @for (type of roundingType; track type.value) {\r\n          <mat-chip-option (click)=\"tempValue['roundingMode'] = type.value\"\r\n            [selected]=\"tempValue['roundingMode'] === type.value\">\r\n            {{type.label}}\r\n          </mat-chip-option>\r\n          }\r\n        </mat-chip-listbox>\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n\r\n  <!-- Card Actions (Save/Cancel) -->\r\n  <div style=\"display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px;\">\r\n    <button mat-button (click)=\"cancelEdit()\">Cancel</button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"saveEdit()\">Save Changes</button>\r\n  </div>\r\n</mat-card>\r\n}\r\n\r\n<!-- Variable Configuration Template -->\r\n<ng-template #variableConfigurationTpl>\r\n  <div\r\n    style=\"background: var(--mat-sys-surface-variant, #f5f5f5); border-radius: 8px; padding: 12px; margin-top: 8px; border: 1px dashed #ccc;\">\r\n    <div class=\"tree-instructions\" style=\"background: azure; margin-bottom: 12px;\">\r\n      <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n      <span>\r\n        <strong>Configure variable</strong><br>\r\n        Link a form input to a variable to use in the equation\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Input Selector -->\r\n    <lib-form-input-selector [disabled]=\"!!activeVariable.formControlName\" [formInputs]=\"cachedNumberInputs\"\r\n      [value]=\"activeVariable.inputId\" (click)=\"$event.stopPropagation()\" (change)=\"bindInput($event)\">\r\n    </lib-form-input-selector>\r\n\r\n    @if (activeVariable.formControlName) {\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\" appearance=\"outline\"\r\n      style=\"width: 100%; margin-top: 12px;\">\r\n      <mat-label>Variable Name</mat-label>\r\n      <textarea matInput (click)=\"$event.stopPropagation()\" [(ngModel)]=\"activeVariable.variable\"\r\n        placeholder=\"enter variable\" rows=\"1\"></textarea>\r\n      <mat-hint>A variable is an alphabet or term that represents a form input in the equation.</mat-hint>\r\n    </mat-form-field>\r\n\r\n    @if (activeVariable.parentInputId) {\r\n    <br>\r\n    <mat-label><small>list function ( \u0192 )</small></mat-label>\r\n    <mat-chip-listbox class=\"mat-mdc-chip-set-stacked\" aria-label=\"Calculation function\">\r\n      @for (func of allCalculationFunction; track func) {\r\n      <mat-chip-option (click)=\"attachFunction($event, func)\" [selected]=\"activeVariable.function === func\">\r\n        {{func}}\r\n      </mat-chip-option>\r\n      }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\n\r\n    <!-- Actions -->\r\n    <mat-toolbar style=\"background: transparent; padding: 0; margin-top: 12px;\" lines=\"none\">\r\n      <span class=\"spacer\"></span>\r\n      <button mat-button (click)=\"cancelVariableConfig()\">Cancel</button>\r\n      <button mat-flat-button color=\"primary\" [disabled]=\"!activeVariable.formControlName || !activeVariable.variable\"\r\n        (click)=\"saveNewVariable()\">\r\n        Add Variable\r\n      </button>\r\n    </mat-toolbar>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Overlay for disabled state -->\r\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]=\"disabled\">\r\n  <div\r\n    style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10;\">\r\n  </div>\r\n</ng-template>", styles: [".labelM{font-size:.8125em}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}mat-form-field{width:100%;background:azure}.endIcons{height:100%;display:flex!important;align-items:center!important;justify-content:center}mat-chip{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i5.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i10$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormInputSelectorComponent, selector: "lib-form-input-selector", inputs: ["errors", "value", "formInputs", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: OverlayModule }], deferBlockDependencies: [() => [i2.NgTemplateOutlet]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CalculatedFieldRulesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calculated-field-rules', standalone: true, imports: [
+                        MatModulesModule,
+                        CommonModule,
+                        FormsModule,
+                        FormInputSelectorComponent,
+                        OverlayModule
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: CalculatedFieldRulesComponent }], template: "<br>\r\n\r\n<!-- View Mode (Summary) -->\r\n@if (!isEditing) {\r\n<div class=\"view-mode-container\"\r\n  style=\"display: flex; flex-direction: column; gap: 8px;background:var(--mat-sys-surface-variant)\">\r\n\r\n  @if (!!value && !mapToData?.['id'] && !tableMode) {\r\n  <div class=\"tree-instructions\">\r\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n    <span>Save the input first to enable calculated field configurations</span>\r\n  </div>\r\n  }\r\n\r\n  <div\r\n    style=\"display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--mat-sys-outline-variant, #ccc); border-radius: 4px; padding: 12px;\">\r\n    <div style=\"display: flex; flex-direction: column; width: 100%;\">\r\n      <span style=\"font-size: 0.85em; opacity: 0.7;\">Current Formula</span>\r\n      <span style=\"font-weight: 500; font-size: 1.1em; width: 100%;\">\r\n        <!-- <math-field style=\"width: 100%;\" #mathfield \r\n        [readOnly]=\"true\"\r\n        [value]=\"getFormular\">\r\n        </math-field> -->\r\n\r\n        <code>\r\n          <pre>\r\n              {{ value?.formula || 'No formula configured' }}\r\n          </pre>\r\n          </code>\r\n\r\n\r\n      </span>\r\n      @if(value?.decimalPlaces) {\r\n      <span style=\"font-size: 0.8em; margin-top: 4px; opacity: 0.7;\">\r\n        Decimals: {{value?.decimalPlaces}} | Rounding: {{value?.roundingMode || 'None'}}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n<button style=\"width: 100%;margin-top: 16px;\" mat-stroked-button color=\"primary\" (click)=\"startEdit()\">\r\n  <mat-icon>edit</mat-icon>\r\n  Edit Rules\r\n</button>\r\n}\r\n\r\n<!-- Edit Mode (Editor Card) -->\r\n@else {\r\n<mat-card appearance=\"outlined\" class=\"editor-card\" style=\"padding: 16px; border-color: var(--mat-sys-primary);\">\r\n  <h3 style=\"margin-top: 0; margin-bottom: 16px; color: var(--mat-sys-primary);\">\r\n    <mat-icon style=\"vertical-align: middle; margin-right: 8px;\">functions</mat-icon>\r\n    Edit Calculation\r\n  </h3>\r\n\r\n  <section>\r\n    <!-- Main Formula Input -->\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\" appearance=\"outline\" style=\"width: 100%;\">\r\n      <mat-label>Equation</mat-label>\r\n      <textarea matInput [(ngModel)]=\"tempValue['formula']\" placeholder=\"Enter calculation expression\"\r\n        rows=\"3\"></textarea>\r\n      <mat-hint>example: ((a+2)/(b-1))*2</mat-hint>\r\n    </mat-form-field>\r\n      <!-- <math-field style=\"width: 100%;\" #mathfield \r\n        [readOnly]=\"false\"\r\n        [value]=\"getFormular\" \r\n        [smartMode]=\"true\"\r\n        (input)=\"onInput(mathfield.value)\">\r\n        </math-field> -->\r\n    <!-- Optional Source Link -->\r\n    @if (!!tempValue?.getFormulaFromAFormInput) {\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\"\r\n      style=\"margin-bottom: 8px; margin-top: 12px; width: 100%;\" appearance=\"outline\">\r\n      <mat-label>Equation Source</mat-label>\r\n      <mat-select matNativeControl [value]=\"tempValue.formControlWithFormula\"\r\n        (selectionChange)=\"linkFormulaSource($event)\" placeholder=\"select Input with formula\">\r\n        @for (input of formInputs; track input.id) {\r\n        <mat-option [disabled]=\"checkIfInputCanBeLinkedToCalVariable(mapToData, input) || input.element !== 'select'\"\r\n          [value]=\"input.formControlName\">\r\n          {{input.label}}\r\n        </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-hint>Link formula to an input value</mat-hint>\r\n    </mat-form-field>\r\n    }\r\n\r\n    <!-- Variable Chips List -->\r\n    <div style=\"margin-top: 12px; margin-bottom: 12px;\">\r\n      <label style=\"font-size: 0.9em; opacity: 0.8; display: block; margin-bottom: 8px;\">Variables</label>\r\n      <mat-chip-listbox aria-label=\"options\">\r\n        @for (variable of (tempValue['variables'] || []); track variable.id) {\r\n        <mat-chip (click)=\"appendVariableToFormula(variable.variable)\" (removed)=\"removeVariable(variable.id!)\">\r\n          <div [style.color]=\"variable.tableCell ? 'var(--ion-color-purple)' : ''\" style=\"font-size: 0.8125em\">\r\n            {{ variable.variable }} - {{ variable.label }}\r\n            @if (variable.function) {\r\n            <span style=\"opacity: 0.6; padding-left: 5px\">{{ variable.function }}</span>\r\n            }\r\n          </div>\r\n          <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip>\r\n        }\r\n\r\n        <!-- Add/Close Variable Button -->\r\n        <mat-chip highlighted=\"true\" [color]=\"showVariableConfig ? 'warn' : 'accent'\" (click)=\"toggleVariableConfig()\">\r\n          <span>{{ showVariableConfig ? 'Close Variable Edit' : 'Add a new Variable' }}</span>\r\n          <mat-icon matChipTrailingIcon>{{ showVariableConfig ? 'close' : 'add' }}</mat-icon>\r\n        </mat-chip>\r\n      </mat-chip-listbox>\r\n    </div>\r\n\r\n    <!-- Variable Configuration Panel -->\r\n    @if (showVariableConfig) {\r\n    @defer (on immediate) {\r\n    <ng-container *ngTemplateOutlet=\"variableConfigurationTpl\"></ng-container>\r\n    }\r\n    }\r\n\r\n    <mat-divider style=\"margin: 16px 0;\"></mat-divider>\r\n\r\n    <!-- Rounding Settings -->\r\n    <div style=\"display: flex; gap: 16px; flex-wrap: wrap;\">\r\n      <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\" appearance=\"outline\"\r\n        style=\"flex: 1; min-width: 150px;\">\r\n        <mat-label>Decimal Places</mat-label>\r\n        <input matInput [(ngModel)]=\"tempValue['decimalPlaces']\" placeholder=\"0\" type=\"number\" min=\"0\">\r\n      </mat-form-field>\r\n\r\n      @if (tempValue['decimalPlaces']) {\r\n      <div style=\"flex: 2;\">\r\n        <label style=\"font-size: 0.85em; opacity: 0.8;\">Rounding Mode</label>\r\n        <mat-chip-listbox aria-label=\"Rounding types\" style=\"margin-top: 4px;\">\r\n          @for (type of roundingType; track type.value) {\r\n          <mat-chip-option (click)=\"tempValue['roundingMode'] = type.value\"\r\n            [selected]=\"tempValue['roundingMode'] === type.value\">\r\n            {{type.label}}\r\n          </mat-chip-option>\r\n          }\r\n        </mat-chip-listbox>\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n\r\n  <!-- Card Actions (Save/Cancel) -->\r\n  <div style=\"display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px;\">\r\n    <button mat-button (click)=\"cancelEdit()\">Cancel</button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"saveEdit()\">Save Changes</button>\r\n  </div>\r\n</mat-card>\r\n}\r\n\r\n<!-- Variable Configuration Template -->\r\n<ng-template #variableConfigurationTpl>\r\n  <div\r\n    style=\"background: var(--mat-sys-surface-variant, #f5f5f5); border-radius: 8px; padding: 12px; margin-top: 8px; border: 1px dashed #ccc;\">\r\n    <div class=\"tree-instructions\" style=\"background: azure; margin-bottom: 12px;\">\r\n      <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n      <span>\r\n        <strong>Configure variable</strong><br>\r\n        Link a form input to a variable to use in the equation\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Input Selector -->\r\n    <lib-form-input-selector [disabled]=\"!!activeVariable.formControlName\" [formInputs]=\"cachedNumberInputs\"\r\n      [value]=\"activeVariable.inputId\" (click)=\"$event.stopPropagation()\" (change)=\"bindInput($event)\">\r\n    </lib-form-input-selector>\r\n\r\n    @if (activeVariable.formControlName) {\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\" appearance=\"outline\"\r\n      style=\"width: 100%; margin-top: 12px;\">\r\n      <mat-label>Variable Name</mat-label>\r\n      <textarea matInput (click)=\"$event.stopPropagation()\" [(ngModel)]=\"activeVariable.variable\"\r\n        placeholder=\"enter variable\" rows=\"1\"></textarea>\r\n      <mat-hint>A variable is an alphabet or term that represents a form input in the equation.</mat-hint>\r\n    </mat-form-field>\r\n\r\n    @if (activeVariable.parentInputId) {\r\n    <br>\r\n    <mat-label><small>list function ( \u0192 )</small></mat-label>\r\n    <mat-chip-listbox class=\"mat-mdc-chip-set-stacked\" aria-label=\"Calculation function\">\r\n      @for (func of allCalculationFunction; track func) {\r\n      <mat-chip-option (click)=\"attachFunction($event, func)\" [selected]=\"activeVariable.function === func\">\r\n        {{func}}\r\n      </mat-chip-option>\r\n      }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\n\r\n    <!-- Actions -->\r\n    <mat-toolbar style=\"background: transparent; padding: 0; margin-top: 12px;\" lines=\"none\">\r\n      <span class=\"spacer\"></span>\r\n      <button mat-button (click)=\"cancelVariableConfig()\">Cancel</button>\r\n      <button mat-flat-button color=\"primary\" [disabled]=\"!activeVariable.formControlName || !activeVariable.variable\"\r\n        (click)=\"saveNewVariable()\">\r\n        Add Variable\r\n      </button>\r\n    </mat-toolbar>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Overlay for disabled state -->\r\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]=\"disabled\">\r\n  <div\r\n    style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10;\">\r\n  </div>\r\n</ng-template>", styles: [".labelM{font-size:.8125em}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}mat-form-field{width:100%;background:azure}.endIcons{height:100%;display:flex!important;align-items:center!important;justify-content:center}mat-chip{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
+                type: HostBinding
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], mapToData: [{
+                type: Input
+            }], formInputs: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], valueChange2dWithPath: [{
+                type: Output
+            }], valueChanged: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+export { CalculatedFieldRulesComponent };
+//# sourceMappingURL=ngx-t-forms-calculated-field-rules.component-Cs_Lhz_D.mjs.map