@muraai/mnl-form 0.0.1-alpha-2edbad0 → 0.0.1-alpha-10829d9

package/fesm2022/muraai-mnl-form.mjs

@@ -4524,14 +4524,44 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
     get defaultHelperText() {
         return this.to['helperProps']?.['defaultHelperText'] || '';
     }
+    // Get value from primary model (answers)
+    get originalValue() {
+        const fieldKey = this.field.key;
+        return this.field.model?.[fieldKey];
+    }
+    // Get/Set value from secondary model (helper)
+    get helperModel() {
+        return (this.to['helperModel'] ||
+            this.props['helperModel'] ||
+            this.options?.formState?.['helperModel']);
+    }
+    get helperKey() {
+        return this.to['helperKey'] || this.field.key;
+    }
+    get currentHelperValue() {
+        if (this.helperModel && this.helperKey) {
+            return this.helperModel[this.helperKey];
+        }
+        return '';
+    }
+    set currentHelperValue(value) {
+        if (this.helperModel && this.helperKey) {
+            this.helperModel[this.helperKey] = value;
+        }
+    }
     constructor(cdr) {
         super();
         this.cdr = cdr;
         this.checked = false;
     }
     ngOnInit() {
+        // Initialize helper form control with value from helper model
+        this.helperFormControl = new FormControl(this.currentHelperValue || '');
+        // Subscribe to changes in helper form control and update helper model
+        this.helperFormControl.valueChanges.subscribe((value) => {
+            this.currentHelperValue = value;
+        });
         this.setupDefaultField();
-        // If mode is helper, set up the initial state based on scoring
         if (this.to['enableHelper']) {
             this.setCorrectValue();
             this.determineInitialState();
@@ -4539,6 +4569,16 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
     }
     toggleSlide() {
         this.checked = !this.checked;
+        if (this.checked) {
+            // When toggle is opened, check if helper field is empty
+            const currenthelper = this.helperFormControl.value;
+            if (!currenthelper || currenthelper.trim() === '') {
+                this.helperFormControl.setValue(this.defaultHelperText);
+            }
+        }
+        else {
+            this.helperFormControl.setValue('');
+        }
         this.cdr.detectChanges();
     }
     setupDefaultField() {
@@ -4548,7 +4588,6 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
                 ...fieldConfig,
                 key: this.field.key || fieldConfig.key || 'defaultKey',
                 formControl: this.formControl,
-                // Add required properties that formly expects
                 modelOptions: fieldConfig.modelOptions || this.field.modelOptions || {},
                 validators: fieldConfig.validators || this.field.validators || {},
                 asyncValidators: fieldConfig.asyncValidators || this.field.asyncValidators || {},
@@ -4559,7 +4598,6 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
                 fieldGroupClassName: fieldConfig.fieldGroupClassName ||
                     this.field.fieldGroupClassName ||
                     '',
-                // Inherit parent field's form and model
                 parent: this.field.parent,
                 options: this.field.options,
                 model: this.field.model,
@@ -4572,12 +4610,12 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
         switch (this.to['scoring']?.['criteria']) {
             case 'exactMatch':
                 if (Array.isArray(this.to['scoring']?.['answer']) &&
-                    !this.to['scoring']?.['answer'].includes(this.to['value'])) {
+                    !this.to['scoring']?.['answer'].includes(this.originalValue)) {
                     this.checked = true;
                 }
                 break;
             case 'range':
-                const answer = this.to['value'];
+                const answer = this.originalValue;
                 const num = typeof answer === 'number' ? answer : Number(answer);
                 const correct = Number.isFinite(num) &&
                     num >= this.to['scoring']?.['answer'].min &&
@@ -4589,28 +4627,44 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
         }
     }
     setCorrectValue() {
+        const currentHelperValue = this.currentHelperValue;
+        // If helper already has a value (user edited), don't override
+        if (currentHelperValue && currentHelperValue.trim() !== '') {
+            return;
+        }
         switch (this.to['scoring']?.['criteria']) {
             case 'attempted':
-                this.formControl?.setValue(this.defaultHelperText);
+                // For attempted, set defaultHelperText
+                this.helperFormControl.setValue('');
                 break;
             case 'exactMatch':
-                if (Array.isArray(this.to['scoring']?.['answer']) &&
-                    !this.to['scoring']?.['answer'].includes(this.to['value'])) {
-                    this.formControl?.setValue(this.defaultHelperText);
+                if (Array.isArray(this.to['scoring']?.['answer'])) {
+                    if (this.to['scoring']?.['answer'].includes(this.originalValue)) {
+                        // Answer is correct - set empty value in helper
+                        this.helperFormControl.setValue('');
+                    }
+                    else {
+                        // Answer is incorrect - set defaultHelperText in helper
+                        this.helperFormControl.setValue(this.defaultHelperText);
+                    }
                 }
                 break;
             case 'range':
-                const answer = this.to['value'];
+                const answer = this.originalValue;
                 const num = typeof answer === 'number' ? answer : Number(answer);
                 const correct = Number.isFinite(num) &&
                     num >= this.to['scoring']?.['answer'].min &&
                     num <= this.to['scoring']?.['answer'].max;
-                if (!correct) {
-                    this.formControl?.setValue(this.defaultHelperText);
+                if (correct) {
+                    // Answer is correct - set empty value in helper
+                    this.helperFormControl.setValue('');
+                }
+                else {
+                    // Answer is incorrect - set defaultHelperText in helper
+                    this.helperFormControl.setValue(this.defaultHelperText);
                 }
                 break;
             default:
-                this.formControl?.setValue(this.defaultHelperText);
                 break;
         }
     }
@@ -4620,20 +4674,19 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
       <!-- Helper Mode - Show toggle and conditional content -->
       <div *ngIf="to['enableHelper']">
         <mat-label>{{ to.label }}</mat-label>
-        <div *ngIf="to['value']" class="flex-row">
-          <span class="answer">{{to['value'] }}</span>
+        <div *ngIf="originalValue" class="flex-row">
+          <span class="answer">{{ originalValue }}</span>
           <mat-slide-toggle
             [(ngModel)]="checked"
             (toggleChange)="toggleSlide()"
-            >{{helperLabel}}</mat-slide-toggle
+            >{{ helperLabel }}</mat-slide-toggle
           >
         </div>
 
         <mat-form-field class="textarea" appearance="outline" *ngIf="checked">
           <textarea
             matInput
-            [formControl]="formControl"
-            [formlyAttributes]="field"
+            [formControl]="helperFormControl"
             [readonly]="to['readonly']"
           >
           </textarea>
@@ -4646,7 +4699,7 @@ class MnlFormHelperTextInputComponent extends FieldType$1 {
         </formly-field>
       </div>
     </div>
-  `, isInline: true, styles: [".helper-text-container{display:flex;flex-direction:column}.answer{font-size:12px}.textarea{margin:0!important;width:100%}.flex-row{display:flex;flex-direction:row;justify-content:space-between}.w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+  `, isInline: true, styles: [".helper-text-container{display:flex;flex-direction:column}.answer{font-size:12px}.textarea{margin:0!important;width:100%}.flex-row{display:flex;flex-direction:row;justify-content:space-between}.w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MnlFormHelperTextInputComponent, decorators: [{
             type: Component,
@@ -4666,20 +4719,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- Helper Mode - Show toggle and conditional content -->
       <div *ngIf="to['enableHelper']">
         <mat-label>{{ to.label }}</mat-label>
-        <div *ngIf="to['value']" class="flex-row">
-          <span class="answer">{{to['value'] }}</span>
+        <div *ngIf="originalValue" class="flex-row">
+          <span class="answer">{{ originalValue }}</span>
           <mat-slide-toggle
             [(ngModel)]="checked"
             (toggleChange)="toggleSlide()"
-            >{{helperLabel}}</mat-slide-toggle
+            >{{ helperLabel }}</mat-slide-toggle
           >
         </div>
 
         <mat-form-field class="textarea" appearance="outline" *ngIf="checked">
           <textarea
             matInput
-            [formControl]="formControl"
-            [formlyAttributes]="field"
+            [formControl]="helperFormControl"
             [readonly]="to['readonly']"
           >
           </textarea>
@@ -4811,11 +4863,21 @@ class ScoringService {
     calculateScore(model, fields) {
         let totalScore = 0;
         let categoryResults = {};
-        for (const category of fields) {
-            const categoryLabel = category.props?.label || 'Unnamed Category';
-            const categoryWeight = category.props?.weight || 0;
-            const questions = category.fieldGroup || [];
-            const perQuestionWeight = categoryWeight / (questions.length || 1);
+        const processCategory = (category) => {
+            const categoryLabel = category.props?.label;
+            const categoryWeight = category.props?.weight ?? 0;
+            // Only treat as scoring category if it has a label + weight
+            if (!categoryLabel || !categoryWeight) {
+                // Still need to go deeper in case children have categories
+                if (category.fieldGroup?.length) {
+                    category.fieldGroup.forEach(processCategory);
+                }
+                return;
+            }
+            const questions = (category.fieldGroup || []).filter(q => q.props?.scoring);
+            if (questions.length === 0)
+                return;
+            const perQuestionWeight = categoryWeight / questions.length;
             let categoryScore = 0;
             for (const q of questions) {
                 const parentKey = category.key;
@@ -4856,7 +4918,9 @@ class ScoringService {
                 score: categoryScore,
                 weight: categoryWeight,
             };
-        }
+        };
+        // start recursive walk
+        fields.forEach(processCategory);
         return {
             totalScore,
             categoryResults,
@@ -4900,6 +4964,7 @@ class MnlFormLibComponent {
                     ...this.options.formState,
                     showOldValues: this.showOldValues,
                     oldValues: this.oldValues,
+                    helperModel: this.helperModel,
                 },
             };
         }
@@ -5005,7 +5070,7 @@ class MnlFormLibComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MnlFormLibComponent, deps: [{ token: i1$2.TranslateService }, { token: ScoringService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MnlFormLibComponent, isStandalone: true, selector: "mnl-form", inputs: { readonly: "readonly", form: "form", fields: "fields", model: "model", options: "options", userRoles: "userRoles", userCountries: "userCountries", oldValues: "oldValues", showOldValues: "showOldValues" }, outputs: { noOfTabs: "noOfTabs", scoreChange: "scoreChange" }, ngImport: i0, template: "@if(formPrepared) {\n<formly-form\n  [form]=\"form\"\n  [fields]=\"fields\"\n  [model]=\"model\"\n  [options]=\"options\"\n  (modelChange)=\"onModelChange($event)\"\n  class=\"mnl-formly-form\"\n></formly-form>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CommonsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormlyMatTextAreaModule }, { kind: "ngmodule", type: FormlyMatInputModule }, { kind: "ngmodule", type: FormlyMatCheckboxModule }, { kind: "ngmodule", type: FormlyMatRadioModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MnlFormLibComponent, isStandalone: true, selector: "mnl-form", inputs: { readonly: "readonly", form: "form", fields: "fields", model: "model", helperModel: "helperModel", options: "options", userRoles: "userRoles", userCountries: "userCountries", oldValues: "oldValues", showOldValues: "showOldValues" }, outputs: { noOfTabs: "noOfTabs", scoreChange: "scoreChange" }, ngImport: i0, template: "@if(formPrepared) {\n<formly-form\n  [form]=\"form\"\n  [fields]=\"fields\"\n  [model]=\"model\"\n  [options]=\"options\"\n  (modelChange)=\"onModelChange($event)\"\n  class=\"mnl-formly-form\"\n></formly-form>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CommonsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormlyMatTextAreaModule }, { kind: "ngmodule", type: FormlyMatInputModule }, { kind: "ngmodule", type: FormlyMatCheckboxModule }, { kind: "ngmodule", type: FormlyMatRadioModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MnlFormLibComponent, decorators: [{
             type: Component,
@@ -5029,6 +5094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], model: [{
                 type: Input
+            }], helperModel: [{
+                type: Input
             }], options: [{
                 type: Input
             }], userRoles: [{