survery-lib 2.1.2 → 2.1.4

package/fesm2022/survery-lib.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Directive, HostListener, Pipe, Component, Input, EventEmitter, Output, InjectionToken, Inject, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
-import { Subject, of, debounceTime, distinctUntilChanged, map, filter, pairwise, take } from 'rxjs';
+import { Subject, of, debounceTime, distinctUntilChanged, map, filter, pairwise, take, withLatestFrom, switchMap } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i3 from '@ngrx/store';
@@ -9,6 +9,7 @@ import { createFeatureSelector, createSelector, createAction, props, createReduc
 import { createEntityAdapter } from '@ngrx/entity';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { SubSink } from 'subsink';
 import * as i5 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$1 from '@angular/common/http';
@@ -17,8 +18,8 @@ import * as i5$1 from 'ngx-bootstrap/rating';
 import { RatingModule } from 'ngx-bootstrap/rating';
 import * as i6 from 'ngx-bootstrap/pagination';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
-import * as i2 from '@ngrx/effects';
-import { EffectsModule } from '@ngrx/effects';
+import * as i1$2 from '@ngrx/effects';
+import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 
 var QuestionTypeEnum;
 (function (QuestionTypeEnum) {
@@ -510,6 +511,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['keypress', ['$event']]
             }] } });
 
+class MaskedForMaxLengthDirective {
+    onKeyUp(event) {
+        const input = event.target;
+        var max = null;
+        if (input.getAttribute('max') !== null) {
+            max = parseInt(input.getAttribute('max'));
+        }
+        var inputVlaue = input.value;
+        // allowed key array
+        if (max !== null) {
+            if (input.selectionStart != input.selectionEnd) {
+                let firstPart = input.value.slice(0, input.selectionStart);
+                let lastPart = input.value.slice(input.selectionEnd, input.value.length);
+                inputVlaue = Number(firstPart + event.key + lastPart);
+            }
+            if (inputVlaue.length + 1 > max) {
+                event.preventDefault();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MaskedForMaxLengthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: MaskedForMaxLengthDirective, selector: "[libMaskedForMaxLength]", host: { listeners: { "keypress": "onKeyUp($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MaskedForMaxLengthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libMaskedForMaxLength]'
+                }]
+        }], propDecorators: { onKeyUp: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }] } });
+
 class TextBoxTypeAttrPipe {
     transform(value, ...args) {
         if (value != null) {
@@ -625,6 +659,10 @@ class QuestionTextTemplateComponent {
                 }
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerText) {
+                this.rForm.controls.answer.setValue(question.answerText, { emitEvent: false });
+            }
             this.toggleEnableAnswer(value.questionAllInfo.isReadOnly);
         }
     }
@@ -635,6 +673,7 @@ class QuestionTextTemplateComponent {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.isArabicLang = false;
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
@@ -709,11 +748,11 @@ class QuestionTextTemplateComponent {
         this.fCtrls.answer.updateValueAndValidity();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }, { token: i3.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isArabicLang: "isArabicLang", setQuestion: "setQuestion", isDisabled: "isDisabled" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax\r\n             *ngIf=\"fCtrls.inputTypeId.value == inputTypeEnum.Number else inputTextTypeNumberTemplate\"\r\n              [attr.min]=\"fCtrls.inputMin.value\"  [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\r\n    </div>\r\n\r\n    <ng-template #inputTextTypeNumberTemplate>\r\n        <input class=\"form-control\"   [attr.min]=\"fCtrls.inputMin.value\"\r\n        [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n        [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n    </ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]" }, { kind: "pipe", type: TextBoxTypeAttrPipe, name: "textBoxTypeAttr" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isArabicLang: "isArabicLang", setQuestion: "setQuestion", isDisabled: "isDisabled" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax\r\n             *ngIf=\"fCtrls.inputTypeId.value == inputTypeEnum.Number else inputTextTypeNumberTemplate\"\r\n              [attr.min]=\"fCtrls.inputMin.value\"  [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\r\n    </div>\r\n\r\n    <ng-template #inputTextTypeNumberTemplate>\r\n        <input class=\"form-control\"  libMaskedForMaxLength \r\n        [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n        [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n    </ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]" }, { kind: "directive", type: MaskedForMaxLengthDirective, selector: "[libMaskedForMaxLength]" }, { kind: "pipe", type: TextBoxTypeAttrPipe, name: "textBoxTypeAttr" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax\r\n             *ngIf=\"fCtrls.inputTypeId.value == inputTypeEnum.Number else inputTextTypeNumberTemplate\"\r\n              [attr.min]=\"fCtrls.inputMin.value\"  [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\r\n    </div>\r\n\r\n    <ng-template #inputTextTypeNumberTemplate>\r\n        <input class=\"form-control\"   [attr.min]=\"fCtrls.inputMin.value\"\r\n        [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n        [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n    </ng-template>" }]
+            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax\r\n             *ngIf=\"fCtrls.inputTypeId.value == inputTypeEnum.Number else inputTextTypeNumberTemplate\"\r\n              [attr.min]=\"fCtrls.inputMin.value\"  [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\r\n    </div>\r\n\r\n    <ng-template #inputTextTypeNumberTemplate>\r\n        <input class=\"form-control\"  libMaskedForMaxLength \r\n        [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n        [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n    </ng-template>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { isArabicLang: [{
                 type: Input
             }], setQuestion: [{
@@ -752,6 +791,11 @@ class QuestionRadioButtonTemplateComponent {
                 this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerId) {
+                this.rForm.controls.answer.setValue(question.answerId, { emitEvent: false });
+                this.fCtrls.answerArray.controls.find(x => x.value.id == question.answerId).controls.isSelected.setValue(true);
+            }
         }
     }
     constructor(_formBuilder, _surveyLibService, _Store) {
@@ -759,6 +803,7 @@ class QuestionRadioButtonTemplateComponent {
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
         this.elemId = v4();
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
             name: new FormControl(null),
@@ -851,6 +896,10 @@ class QuestionCheckBoxTemplateComponent {
                 this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerIdArr) {
+                this.rForm.controls.answer.setValue(question.answerIdArr, { emitEvent: false });
+            }
         }
     }
     constructor(_formBuilder, _surveyLibService, _Store) {
@@ -858,6 +907,7 @@ class QuestionCheckBoxTemplateComponent {
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
         this.elemId = v4();
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
             name: new FormControl(null),
@@ -954,12 +1004,18 @@ class QuestionDropdownTemplateComponent {
                 this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerId) {
+                this.rForm.controls.answer.setValue(question.answerId, { emitEvent: false });
+            }
         }
     }
     constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
+        this.subs = new SubSink();
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
@@ -972,8 +1028,11 @@ class QuestionDropdownTemplateComponent {
             isShow: new FormControl(true),
         });
     }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
     ngOnInit() {
-        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
+        this.subs.sink = this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
             const formValue = this.rForm.value;
             this._Store.dispatch(surveyActions.updateQuestionAnswer({
                 questionId: formValue.id,
@@ -986,7 +1045,7 @@ class QuestionDropdownTemplateComponent {
                 Answer: value
             });
         });
-        this._Store.select(questionSelectors.pageQuestions).pipe(map(arr => arr.find(x => x.questionId == this.fCtrls.id.value)))
+        this.subs.sink = this._Store.select(questionSelectors.pageQuestions).pipe(map(arr => arr.find(x => x.questionId == this.fCtrls.id.value)))
             .pipe(filter(x => x != null), pairwise()).subscribe(value => {
             const oldValue = value[0];
             const newValue = value[1];
@@ -1056,6 +1115,10 @@ class QuestionMatrixTemplateComponent {
                         isValid: group.controls.answer.valid
                     }));
                 });
+                var question = this.questionArr().find(x => x.questionId == group.value.subQuestionId);
+                if (question != null) {
+                    group.controls.answer.setValue(question.answerId, { emitEvent: false });
+                }
                 this.fCtrls.subQuestionArray.push(group);
             });
         }
@@ -1065,6 +1128,7 @@ class QuestionMatrixTemplateComponent {
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
         this.elemId = v4();
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
             typeId: new FormControl(null),
@@ -1154,6 +1218,11 @@ class QuestionBooleanTemplateComponent {
                 this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerId) {
+                this.rForm.controls.answer.setValue(question.answerId, { emitEvent: false });
+                this.fCtrls.answerArray.controls.find(x => x.value.id == question.answerId).controls.isSelected.setValue(true);
+            }
         }
     }
     constructor(_formBuilder, _surveyLibService, _Store) {
@@ -1161,6 +1230,7 @@ class QuestionBooleanTemplateComponent {
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
         this.elemId = v4();
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
             name: new FormControl(null),
@@ -1249,6 +1319,10 @@ class QuestionDropdownMultiTemplateComponent {
                 this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerIdArr) {
+                this.rForm.controls.answer.setValue(question.answerIdArr, { emitEvent: false });
+            }
         }
     }
     constructor(_formBuilder, _surveyLibService, _Store) {
@@ -1256,6 +1330,7 @@ class QuestionDropdownMultiTemplateComponent {
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
         this.elemId = v4();
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
             name: new FormControl(null),
@@ -1375,7 +1450,7 @@ class QuestionCascadeTemplateComponent {
         this._ApiService = _ApiService;
         this._Store = _Store;
         this.surveyQuestionArr = [];
-        this.pageQuestions$ = this._Store.select(questionSelectors.pageQuestions);
+        this.pageQuestions$ = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.pageId = null;
         this.questionGroupId = null;
         this.isPre = false;
@@ -1453,14 +1528,13 @@ class QuestionCascadeTemplateComponent {
             group.controls.answer.updateValueAndValidity();
         }
         this.fCtrls.questionArr.push(group);
-        console.log(this.fCtrls.questionArr.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }, { token: ApiService }, { token: i3.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: { pageId: "pageId", questionGroupId: "questionGroupId", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"(pageQuestions$  |async) |findQuestion :item.value.id \"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>  \r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FindQuestionPipe, name: "findQuestion" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: { pageId: "pageId", questionGroupId: "questionGroupId", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"pageQuestions$() |findQuestion :item.value.id \"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>  \r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "pipe", type: FindQuestionPipe, name: "findQuestion" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-cascade-template', template: "<ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"(pageQuestions$  |async) |findQuestion :item.value.id \"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>  \r\n</ng-container>" }]
+            args: [{ selector: 'lib-question-cascade-template', template: "<ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"pageQuestions$() |findQuestion :item.value.id \"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>  \r\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: ApiService }, { type: i3.Store }]; }, propDecorators: { pageId: [{
                 type: Input
             }], questionGroupId: [{
@@ -1510,6 +1584,10 @@ class QuestionFeedbackTemplateComponent {
                 this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerText) {
+                this.rForm.controls.answer.setValue(question.answerText, { emitEvent: false });
+            }
             this.toggleEnableAnswer(value.questionAllInfo.isReadOnly);
         }
     }
@@ -1520,6 +1598,7 @@ class QuestionFeedbackTemplateComponent {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this._Store = _Store;
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.isArabicLang = false;
         this.rForm = this._formBuilder.group({
             id: new FormControl(null),
@@ -1628,8 +1707,8 @@ class SurveryLibComponent {
         this.surveryLibraryDivId = v4();
         this.reloadDefaultAnswerId = v4();
         this.questionAnswerArr = [];
-        this.pageQuestionGroups$ = this._Store.select(questionGroupSelectors.pageQuestionGroups);
-        this.pageQuestions$ = this._Store.select(questionSelectors.pageQuestions);
+        this.pageQuestionGroups$ = this._Store.selectSignal(questionGroupSelectors.pageQuestionGroups);
+        this.pageQuestions$ = this._Store.selectSignal(questionSelectors.pageQuestions);
         this.isFirstPage$ = this._Store.select(surveySelectors.isFirstPage);
         this.isLastPage$ = this._Store.select(surveySelectors.isLastPage);
         this.curruntShowedSurveyPages$ = this._Store.select(surveySelectors.selectedPageIndex).pipe(map(x => x + 1));
@@ -1652,6 +1731,9 @@ class SurveryLibComponent {
     questionIdentify(index, item) {
         return item.questionId;
     }
+    questionGroupIdentify(index, item) {
+        return item.questionGroupId;
+    }
     ngOnInit() {
         this._Store.select(surveySelectors.selectedPageId).subscribe(value => {
             this.fCtrls.currentPageId.setValue(value);
@@ -1732,11 +1814,11 @@ class SurveryLibComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i3.Store }, { token: i1.FormBuilder }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", isArabicLang: "isArabicLang" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of (pageQuestionGroups$ | async)\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of ((pageQuestions$|async) |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n                <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n               <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n               *ngIf=\"question.questionType == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageId", "questionGroupId", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"] }, { kind: "component", type: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", isArabicLang: "isArabicLang" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of pageQuestionGroups$(); trackBy:questionGroupIdentify\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of (pageQuestions$() |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n                <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n               <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n               *ngIf=\"question.questionType == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageId", "questionGroupId", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"] }, { kind: "component", type: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of (pageQuestionGroups$ | async)\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of ((pageQuestions$|async) |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n                <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n               <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n               *ngIf=\"question.questionType == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of pageQuestionGroups$(); trackBy:questionGroupIdentify\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of (pageQuestions$() |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n                <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n               <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n               *ngIf=\"question.questionType == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i3.Store }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
             }], surveyLanguageId: [{
@@ -1881,6 +1963,124 @@ function surveyReducer(state, action) {
     return _surveyReducer(state, action);
 }
 
+var LogicActionEnum;
+(function (LogicActionEnum) {
+    LogicActionEnum[LogicActionEnum["Show"] = 1] = "Show";
+    LogicActionEnum[LogicActionEnum["Hide"] = 2] = "Hide";
+    LogicActionEnum[LogicActionEnum["Enable"] = 3] = "Enable";
+    LogicActionEnum[LogicActionEnum["Disable"] = 4] = "Disable";
+    LogicActionEnum[LogicActionEnum["SetAnswer"] = 5] = "SetAnswer";
+})(LogicActionEnum || (LogicActionEnum = {}));
+
+class SurveyEffects {
+    constructor(_actions, _store, _checkRuleExpsUsecase) {
+        this._actions = _actions;
+        this._store = _store;
+        this._checkRuleExpsUsecase = _checkRuleExpsUsecase;
+        this.updateQuestionAnswer$ = createEffect(() => this._actions.pipe(ofType(surveyActions.updateQuestionAnswer), withLatestFrom(this._store.select(surveySelectors.ruleArr), this._store.select(questionSelectors.allQuestions)), switchMap(([action, ruleArr, questionArr]) => {
+            var formatedRuleArr = [];
+            ruleArr.forEach(rule => {
+                rule.ruleExps.forEach(ruleQuestion => {
+                    formatedRuleArr.push({
+                        ruleId: rule.ruleId,
+                        questionId: ruleQuestion.questionId
+                    });
+                });
+            });
+            var selectedRuleIdArr = formatedRuleArr.filter(x => x.questionId == action.questionId).map(x => Number(x.ruleId));
+            var arr = ruleArr.filter(x => selectedRuleIdArr.find(c => c == x.ruleId) != null);
+            arr.forEach(rule => {
+                this._checkRuleExpsUsecase.execute({
+                    ruleExps: rule.ruleExps,
+                    questions: questionArr,
+                }).subscribe(result => {
+                    var isPassed = result.exprestionResultArr.filter(x => x == false).length == 0;
+                    if (isPassed) {
+                        rule.ruleResultQuestions.forEach(resultQuestion => {
+                            if (rule.logicActionId == LogicActionEnum.Show) {
+                                this._store.dispatch(surveyActions.updateQuestionShow({
+                                    questionId: resultQuestion.questionId,
+                                    isShow: true
+                                }));
+                            }
+                            else if (rule.logicActionId == LogicActionEnum.Hide) {
+                                this._store.dispatch(surveyActions.updateQuestionShow({
+                                    questionId: resultQuestion.questionId,
+                                    isShow: false
+                                }));
+                            }
+                            else if (rule.logicActionId == LogicActionEnum.Enable) {
+                                this._store.dispatch(surveyActions.updateQuestionDisable({
+                                    questionId: resultQuestion.questionId,
+                                    isDisabled: false
+                                }));
+                            }
+                            else if (rule.logicActionId == LogicActionEnum.Disable) {
+                                this._store.dispatch(surveyActions.updateQuestionDisable({
+                                    questionId: resultQuestion.questionId,
+                                    isDisabled: true
+                                }));
+                            }
+                            else if (rule.logicActionId == LogicActionEnum.SetAnswer) {
+                            }
+                            const question = questionArr.find(x => x.questionId == resultQuestion.questionId);
+                            //update matrix sub questions
+                            if (question.questionType == QuestionTypeEnum.Matrix && question.isMatrixGroup == true) {
+                                var subQuestions = questionArr.filter(x => x.parentQuestionId == question.questionId);
+                                subQuestions.forEach(subQuestion => {
+                                    if (rule.logicActionId == LogicActionEnum.Show) {
+                                        this._store.dispatch(surveyActions.updateQuestionShow({
+                                            questionId: subQuestion.questionId,
+                                            isShow: true
+                                        }));
+                                    }
+                                    else if (rule.logicActionId == LogicActionEnum.Hide) {
+                                        this._store.dispatch(surveyActions.updateQuestionShow({
+                                            questionId: subQuestion.questionId,
+                                            isShow: false
+                                        }));
+                                    }
+                                    else if (rule.logicActionId == LogicActionEnum.Enable) {
+                                        this._store.dispatch(surveyActions.updateQuestionDisable({
+                                            questionId: subQuestion.questionId,
+                                            isDisabled: false
+                                        }));
+                                    }
+                                    else if (rule.logicActionId == LogicActionEnum.Disable) {
+                                        this._store.dispatch(surveyActions.updateQuestionDisable({
+                                            questionId: subQuestion.questionId,
+                                            isDisabled: true
+                                        }));
+                                    }
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        rule.ruleResultQuestions.forEach(resultQuestion => {
+                            const question = questionArr.find(x => x.questionId == resultQuestion.questionId);
+                            this._store.dispatch(surveyActions.updateQuestionShow({
+                                questionId: resultQuestion.questionId,
+                                isShow: question.isShow_default
+                            }));
+                            this._store.dispatch(surveyActions.updateQuestionDisable({
+                                questionId: resultQuestion.questionId,
+                                isDisabled: question.isDisabled_default
+                            }));
+                        });
+                    }
+                });
+            });
+            return of([]);
+        })), { dispatch: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects, deps: [{ token: i1$2.Actions }, { token: i3.Store }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: i3.Store }, { type: CheckRuleExpsUsecase }]; } });
+
 class SurveryLibModule {
     static forRoot(config) {
         return {
@@ -1911,11 +2111,12 @@ class SurveryLibModule {
             QuestionCascadeTemplateComponent,
             MaskedForMinMaxDirective,
             FindQuestionPipe,
-            QuestionFeedbackTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule, i3.StoreFeatureModule, i2.EffectsFeatureModule, RatingModule, PaginationModule], exports: [SurveryLibComponent,
+            QuestionFeedbackTemplateComponent,
+            MaskedForMaxLengthDirective], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule, i3.StoreFeatureModule, i1$2.EffectsFeatureModule, RatingModule, PaginationModule], exports: [SurveryLibComponent,
             StoreModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,
             StoreModule.forFeature('survey-lib', surveyReducer),
-            EffectsModule.forFeature([]), RatingModule, PaginationModule, StoreModule] }); }
+            EffectsModule.forFeature([SurveyEffects]), RatingModule, PaginationModule, StoreModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
             type: NgModule,
@@ -1936,12 +2137,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         QuestionCascadeTemplateComponent,
                         MaskedForMinMaxDirective,
                         FindQuestionPipe,
-                        QuestionFeedbackTemplateComponent
+                        QuestionFeedbackTemplateComponent,
+                        MaskedForMaxLengthDirective
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,
                         StoreModule.forFeature('survey-lib', surveyReducer),
-                        EffectsModule.forFeature([]), RatingModule, PaginationModule
+                        EffectsModule.forFeature([SurveyEffects]), RatingModule, PaginationModule
                     ],
                     exports: [
                         SurveryLibComponent,