survery-lib 0.1.32 → 0.1.34

package/fesm2022/survery-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, EventEmitter, Component, Output, Input, NgModule } from '@angular/core';
+import { Injectable, Pipe, EventEmitter, Component, Output, Input, InjectionToken, Inject, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
 import { Subject, of, debounceTime, map, filter, distinctUntilChanged } from 'rxjs';
 import * as i1 from '@ng-stack/forms';
@@ -10,7 +10,8 @@ import * as i4 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i5 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { HttpClientModule } from '@angular/common/http';
+import * as i1$1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 
 var QuestionTypeEnum;
 (function (QuestionTypeEnum) {
@@ -21,6 +22,7 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["TextInput"] = 5] = "TextInput";
     QuestionTypeEnum[QuestionTypeEnum["Matrix"] = 6] = "Matrix";
     QuestionTypeEnum[QuestionTypeEnum["DropDownMulti"] = 7] = "DropDownMulti";
+    QuestionTypeEnum[QuestionTypeEnum["Cascade"] = 8] = "Cascade";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
 var LogicActionEnum;
@@ -42,10 +44,26 @@ class SurveyLibService {
     get reloadSurveyObsrv() {
         return this.reloadSurveySubject.asObservable();
     }
+    get questionIsShowObsrv() {
+        return this.questionIsShowSubject.asObservable();
+    }
+    get questionIsDisabledObsrv() {
+        return this.questionIsDisabledSubject.asObservable();
+    }
+    get addQuestionObsrv() {
+        return this.addQuestionSubject.asObservable();
+    }
+    get removeQuestionObsrv() {
+        return this.removeQuestionSubject.asObservable();
+    }
     constructor() {
         this.surveyDataSubject = new Subject();
         this.surveyAnswersSubject = new Subject();
         this.reloadSurveySubject = new Subject();
+        this.questionIsShowSubject = new Subject();
+        this.questionIsDisabledSubject = new Subject();
+        this.addQuestionSubject = new Subject();
+        this.removeQuestionSubject = new Subject();
     }
     setSurveyData(survey) {
         this.surveyDataSubject.next(survey);
@@ -53,9 +71,21 @@ class SurveyLibService {
     setsurveyAnswers(model) {
         this.surveyAnswersSubject.next(model);
     }
+    setQuestionIsShow(questionId, isShow) {
+        this.questionIsShowSubject.next({ questionId, isShow });
+    }
+    setQuestionIsDisabled(questionId, isDisabled) {
+        this.questionIsDisabledSubject.next({ questionId, isDisabled });
+    }
     setReloadSurvey() {
         this.reloadSurveySubject.next(v4());
     }
+    setAddQuestion(question, pageIndex) {
+        this.addQuestionSubject.next({ question, pageIndex });
+    }
+    setRemoveQuestion(questionId) {
+        this.removeQuestionSubject.next({ questionId });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, providedIn: 'root' }); }
 }
@@ -588,28 +618,28 @@ class QuestionDropdownTemplateComponent {
             name: value.questionName,
             title: value.questionTitle,
             typeId: value.questionTypeId,
-            description: value.questionDescription
+            description: value.questionDescription,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
         if (value.isRequired == true) {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
-        this.isShow = value.isVisable;
-        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _surveyLibService) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.emitter = new EventEmitter();
-        this.isShow = true;
-        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
             title: [null],
             typeId: [null],
             description: [null],
-            answer: [null]
+            answer: [null],
+            isDisabled: [false],
+            isShow: [true]
         });
     }
     ngOnInit() {
@@ -628,22 +658,24 @@ class QuestionDropdownTemplateComponent {
             .subscribe(answer => {
             this.fCtrls.answer.setValue(answer.AnswerId);
         });
+        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isDisabled.setValue(x.isDisabled);
+        });
+        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isShow.setValue(x.isShow);
+        });
     }
     convertToFormControl(element) {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
+            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -913,6 +945,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+const LibConfigService = new InjectionToken('LibConfig');
+
+class ApiService {
+    constructor(_HttpClient, _LibConfigService) {
+        this._HttpClient = _HttpClient;
+        this._LibConfigService = _LibConfigService;
+        this.url = _LibConfigService.apiUrl;
+    }
+    getNextQuestion(filter) {
+        var queryString = $.param(filter);
+        return this._HttpClient.get(`${this.url}/GetNextQuestion?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiService, deps: [{ token: i1$1.HttpClient }, { token: LibConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LibConfigService]
+                }] }]; } });
+
+class QuestionCascadeTemplateComponent {
+    get fCtrls() {
+        return this.rForm.controls;
+    }
+    get questionTypeEnum() {
+        return QuestionTypeEnum;
+    }
+    get questionFormArray() {
+        return this.fCtrls.questionArr;
+    }
+    set setQuestion(value) {
+        this.setQuestions(value);
+    }
+    constructor(_formBuilder, _surveyLibService, _ApiService) {
+        this._formBuilder = _formBuilder;
+        this._surveyLibService = _surveyLibService;
+        this._ApiService = _ApiService;
+        this.surveyQuestionArr = [];
+        this.emitter = new EventEmitter();
+        this.pageIndex = null;
+        this.isPre = false;
+        this.surveyLanguageId = null;
+        this.applicantKey = null;
+        this.rForm = this._formBuilder.group({
+            questionArr: this._formBuilder.array([])
+        });
+    }
+    ngOnInit() {
+        this.fCtrls.questionArr.statusChanges.subscribe(v => {
+            console.log(v);
+        });
+    }
+    onUpdateAnswer(model) {
+        if (model.Answer) {
+            this._ApiService.getNextQuestion({
+                answerId: model.Answer,
+                applicantKey: this.applicantKey,
+                isPre: this.isPre,
+                surveyLanguageId: this.surveyLanguageId
+            }).subscribe(res => {
+                if (res.errors.filter(x => x.code == 17).length == 0) {
+                    this.setQuestions(res);
+                    this._surveyLibService.setAddQuestion(res, this.pageIndex);
+                }
+            });
+        }
+        else {
+            if (this.surveyQuestionArr.length > 1) {
+                const surveyQuestionIndex = this.surveyQuestionArr.findIndex(c => c.questionId == model.QuestionId);
+                var deletedQuestions = [];
+                for (let index = surveyQuestionIndex + 1; index < this.surveyQuestionArr.length; index++) {
+                    deletedQuestions.push(index);
+                }
+                var sortDeletedArr = deletedQuestions.sort((a, b) => (a > b ? -1 : 1));
+                for (let index = 0; index < sortDeletedArr.length; index++) {
+                    const elementIndex = sortDeletedArr[index];
+                    const questionId = this.surveyQuestionArr[elementIndex].questionId;
+                    this._surveyLibService.setRemoveQuestion(questionId);
+                    this.surveyQuestionArr.slice(elementIndex, 1);
+                    this.questionFormArray.removeAt(elementIndex);
+                }
+            }
+        }
+        this.emitter.emit(model);
+    }
+    setQuestions(value) {
+        this.surveyQuestionArr.push(value);
+        var group = this._formBuilder.group({
+            id: [value.questionId],
+            typeId: [value.questionTypeId],
+            answer: null
+        });
+        if (value.isRequired == true) {
+            group.controls.answer.addValidators([Validators.required]);
+            group.controls.answer.updateValueAndValidity();
+        }
+        this.fCtrls.questionArr.push(group);
+    }
+    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 }], 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: { pageIndex: "pageIndex", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.value ; let i = index\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }] }); }
+}
+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.value ; let i = index\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: ApiService }]; }, propDecorators: { emitter: [{
+                type: Output
+            }], pageIndex: [{
+                type: Input
+            }], isPre: [{
+                type: Input
+            }], surveyLanguageId: [{
+                type: Input
+            }], applicantKey: [{
+                type: Input
+            }], setQuestion: [{
+                type: Input
+            }] } });
+
 class FilterQuestionPipe {
     transform(value, questionArr) {
         return questionArr.find(x => x.questionId == value.questionId);
@@ -979,7 +1134,8 @@ class SurveryLibComponent {
         this.surveryLibraryDivId = v4();
         this.reloadDefaultAnswerId = v4();
         this.isPre = false;
-        this.arabicLanguageId = null;
+        this.surveyLanguageId = null;
+        this.applicantKey = null;
         this.surveyResultEmit = new EventEmitter();
         this.selectLanguageEmit = new EventEmitter();
         this.rForm = this._formBuilder.group({
@@ -995,11 +1151,19 @@ class SurveryLibComponent {
             this.fCtrls.questionArray.clear();
             this.fCtrls.ruleQuestionArray.clear();
             this.surveyData = null;
+            console.log(survey);
             if (survey != null) {
                 this.surveyData = survey;
                 this.loadQuestions(survey);
             }
         });
+        this._surveyLibService.addQuestionObsrv.subscribe(res => {
+            this.addQuestionGroup(res.question, res.pageIndex);
+        });
+        this._surveyLibService.removeQuestionObsrv.subscribe(res => {
+            const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == res.questionId);
+            this.fCtrls.questionArray.removeAt(index);
+        });
     }
     onPaggingNext() {
         var isHaveInvalidRecords = this.haveInValidateQuestions();
@@ -1039,79 +1203,31 @@ class SurveryLibComponent {
     }
     onUpdateAnswer(model) {
         const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == model.QuestionId);
-        var questionGroup = this.fCtrls.questionArray.controls[index];
-        questionGroup.controls.isValid.setValue(model.IsValid);
-        if (questionGroup.value.questionType == this.questionTypeEnum.TextInput) {
-            questionGroup.patchValue({
-                answerId: model.SurveyAnswerId,
-                answerText: model.Answer
-            });
-        }
-        else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox || questionGroup.value.questionType == this.questionTypeEnum.DropDownMulti) {
-            questionGroup.controls.answerIdArr.setValue(model.Answer);
-        }
-        else {
-            questionGroup.controls.answerId.setValue(model.Answer);
-        }
-        if (this.fCtrls.ruleQuestionArray.value.findIndex(x => x.questionId == model.QuestionId) > -1) {
-            this.checkRules();
+        if (index > -1) {
+            var questionGroup = this.fCtrls.questionArray.controls[index];
+            questionGroup.controls.isValid.setValue(model.IsValid);
+            if (questionGroup.value.questionType == this.questionTypeEnum.TextInput) {
+                questionGroup.patchValue({
+                    answerId: model.SurveyAnswerId,
+                    answerText: model.Answer
+                });
+            }
+            else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox || questionGroup.value.questionType == this.questionTypeEnum.DropDownMulti) {
+                questionGroup.controls.answerIdArr.setValue(model.Answer);
+            }
+            else {
+                questionGroup.controls.answerId.setValue(model.Answer);
+            }
+            if (this.fCtrls.ruleQuestionArray.value.findIndex(x => x.questionId == model.QuestionId) > -1) {
+                this.checkRules();
+            }
         }
     }
     loadQuestions(survey) {
         survey.surveyPages.forEach((page, pageIndex) => {
             page.surveyQuestionGroups.forEach(group => {
                 group.surveyQuestions.forEach(question => {
-                    if (question.questionTypeId != 6) {
-                        this.fCtrls.questionArray.push(this._formBuilder.group({
-                            surveyPageIndex: pageIndex,
-                            questionId: [question.questionId],
-                            questionType: [question.questionTypeId],
-                            isMatrixGroup: [false],
-                            answerId: [null],
-                            answerIdArr: [null],
-                            answerText: [null],
-                            isRequired: [question.isRequired],
-                            isValid: [null],
-                            isDisabled: [question.isReadOnly],
-                            isShow: [question.isVisable],
-                            isDisabled_default: [question.isReadOnly],
-                            isShow_default: [question.isVisable]
-                        }));
-                    }
-                    else {
-                        this.fCtrls.questionArray.push(this._formBuilder.group({
-                            surveyPageIndex: pageIndex,
-                            questionId: [question.questionId],
-                            questionType: [question.questionTypeId],
-                            isMatrixGroup: [true],
-                            answerId: [null],
-                            answerIdArr: [null],
-                            answerText: [null],
-                            isRequired: [question.isRequired],
-                            isValid: [null],
-                            isDisabled: [question.isReadOnly],
-                            isShow: [question.isVisable],
-                            isDisabled_default: [question.isReadOnly],
-                            isShow_default: [question.isVisable],
-                        }));
-                        question.surveySubQuestions.forEach(subQuestion => {
-                            this.fCtrls.questionArray.push(this._formBuilder.group({
-                                surveyPageIndex: pageIndex,
-                                questionId: [subQuestion.questionId],
-                                questionType: [subQuestion.questionTypeId],
-                                isMatrixGroup: [false],
-                                answerId: [null],
-                                answerIdArr: [null],
-                                answerText: [null],
-                                isRequired: [question.isRequired],
-                                isValid: [null],
-                                isDisabled: [subQuestion.isReadOnly],
-                                isShow: [subQuestion.isVisable],
-                                isDisabled_default: [subQuestion.isReadOnly],
-                                isShow_default: [subQuestion.isVisable]
-                            }));
-                        });
-                    }
+                    this.addQuestionGroup(question, pageIndex);
                 });
             });
         });
@@ -1149,15 +1265,19 @@ class SurveryLibComponent {
                         var questionGroup = this.fCtrls.questionArray.at(index);
                         if (rule.logicActionId == LogicActionEnum.Show) {
                             questionGroup.controls.isShow.setValue(true);
+                            this._surveyLibService.setQuestionIsShow(questionGroup.value.questionId, true);
                         }
                         else if (rule.logicActionId == LogicActionEnum.Hide) {
                             questionGroup.controls.isShow.setValue(false);
+                            this._surveyLibService.setQuestionIsShow(questionGroup.value.questionId, false);
                         }
                         else if (rule.logicActionId == LogicActionEnum.Enable) {
                             questionGroup.controls.isDisabled.setValue(false);
+                            this._surveyLibService.setQuestionIsDisabled(questionGroup.value.questionId, false);
                         }
                         else if (rule.logicActionId == LogicActionEnum.Disable) {
                             questionGroup.controls.isDisabled.setValue(true);
+                            this._surveyLibService.setQuestionIsDisabled(questionGroup.value.questionId, true);
                         }
                         else if (rule.logicActionId == LogicActionEnum.SetAnswer) {
                         }
@@ -1194,15 +1314,70 @@ class SurveryLibComponent {
         }
         return null;
     }
+    addQuestionGroup(question, pageIndex) {
+        if (question.questionTypeId != 6) {
+            this.fCtrls.questionArray.push(this._formBuilder.group({
+                surveyPageIndex: pageIndex,
+                questionId: [question.questionId],
+                questionType: [question.questionTypeId],
+                isMatrixGroup: [false],
+                answerId: [null],
+                answerIdArr: [null],
+                answerText: [null],
+                isRequired: [question.isRequired],
+                isValid: [null],
+                isDisabled: [question.isReadOnly],
+                isShow: [question.isVisable],
+                isDisabled_default: [question.isReadOnly],
+                isShow_default: [question.isVisable]
+            }));
+        }
+        else {
+            this.fCtrls.questionArray.push(this._formBuilder.group({
+                surveyPageIndex: pageIndex,
+                questionId: [question.questionId],
+                questionType: [question.questionTypeId],
+                isMatrixGroup: [true],
+                answerId: [null],
+                answerIdArr: [null],
+                answerText: [null],
+                isRequired: [question.isRequired],
+                isValid: [null],
+                isDisabled: [question.isReadOnly],
+                isShow: [question.isVisable],
+                isDisabled_default: [question.isReadOnly],
+                isShow_default: [question.isVisable],
+            }));
+            question.surveySubQuestions.forEach(subQuestion => {
+                this.fCtrls.questionArray.push(this._formBuilder.group({
+                    surveyPageIndex: pageIndex,
+                    questionId: [subQuestion.questionId],
+                    questionType: [subQuestion.questionTypeId],
+                    isMatrixGroup: [false],
+                    answerId: [null],
+                    answerIdArr: [null],
+                    answerText: [null],
+                    isRequired: [question.isRequired],
+                    isValid: [null],
+                    isDisabled: [subQuestion.isReadOnly],
+                    isShow: [subQuestion.isVisable],
+                    isDisabled_default: [subQuestion.isReadOnly],
+                    isShow_default: [subQuestion.isVisable]
+                }));
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { 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", arabicLanguageId: "arabicLanguageId" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\" >\r\n  <div class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n      <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\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\">\r\n                  {{item.questionGroupName}}\r\n                </h2>\r\n                <span class=\"group-sub-title \">\r\n                  {{item.questionGroupDescription}}\r\n                </span>\r\n              </div>\r\n              <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n                <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n                <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                  [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n                <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n                <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n                <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-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=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isShow", "isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { 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" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\" >\r\n  <div class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n      <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\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\">\r\n                  {{item.questionGroupName}}\r\n                </h2>\r\n                <span class=\"group-sub-title \">\r\n                  {{item.questionGroupDescription}}\r\n                </span>\r\n              </div>\r\n              <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n                <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n                <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                  [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n                <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n                <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n                <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-template>\r\n\r\n                  <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                  [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\" \r\n                  [pageIndex]=\"surveyPageIndex\"></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=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isShow", "isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageIndex", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"], outputs: ["emitter"] }, { 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 class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n      <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\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\">\r\n                  {{item.questionGroupName}}\r\n                </h2>\r\n                <span class=\"group-sub-title \">\r\n                  {{item.questionGroupDescription}}\r\n                </span>\r\n              </div>\r\n              <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n                <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n                <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                  [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n                <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n                <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n                <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-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=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.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 class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n      <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\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\">\r\n                  {{item.questionGroupName}}\r\n                </h2>\r\n                <span class=\"group-sub-title \">\r\n                  {{item.questionGroupDescription}}\r\n                </span>\r\n              </div>\r\n              <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n                <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n                <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                  [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n                <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n                <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n                <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-template>\r\n\r\n                  <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                  [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\" \r\n                  [pageIndex]=\"surveyPageIndex\"></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=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.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: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
-            }], arabicLanguageId: [{
+            }], surveyLanguageId: [{
+                type: Input
+            }], applicantKey: [{
                 type: Input
             }], surveyResultEmit: [{
                 type: Output
@@ -1245,9 +1420,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
         }] });
 
 class SurveryLibModule {
-    static forRoot() {
+    static forRoot(config) {
         return {
-            ngModule: SurveryLibModule
+            ngModule: SurveryLibModule,
+            providers: [
+                { provide: LibConfigService, useValue: config }
+            ]
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1262,7 +1440,8 @@ class SurveryLibModule {
             FilterQuestionPipe,
             DefaultQuestionAnswerPipe,
             DefaultQuestionAnswersPipe,
-            TextBoxTypeAttrPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule], exports: [SurveryLibComponent] }); }
+            TextBoxTypeAttrPipe,
+            QuestionCascadeTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule], exports: [SurveryLibComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
@@ -1280,7 +1459,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         FilterQuestionPipe,
                         DefaultQuestionAnswerPipe,
                         DefaultQuestionAnswersPipe,
-                        TextBoxTypeAttrPipe
+                        TextBoxTypeAttrPipe,
+                        QuestionCascadeTemplateComponent
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule