survery-lib 0.1.44 → 0.1.46

package/fesm2022/survery-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, EventEmitter, Component, Output, Input, InjectionToken, Inject, NgModule } from '@angular/core';
+import { Injectable, Pipe, EventEmitter, Component, Output, Input, InjectionToken, Inject, Directive, HostListener, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
 import { Subject, of, debounceTime, map, filter, distinctUntilChanged } from 'rxjs';
 import * as i1 from '@ng-stack/forms';
@@ -136,8 +136,10 @@ class CheckRuleExpsUsecase {
             else {
                 result = this.checkRuleExpForAnswerId(ruleExp, questionGroupValue.answerId);
             }
-            var answers = ruleExp.ruleExpAnswers.map(x => x.answerId + '-' + x.answerTitle);
-            console.log(`Question ${questionGroupValue.questionId} type ${QuestionTypeEnum[questionGroupValue.questionType]} --- ${result == true ? 'passed' : 'not passed'} ---`, ` answers (${answers.join(' , ')}) logic (${LogicPropertyEnum[ruleExp.logicPropertyId]}) operator (${OperatorEnum[ruleExp.opporator]})`);
+            if (result != true && questionGroupValue.surveyPageIndex == params.currentPageIndex) {
+                var answers = ruleExp.ruleExpAnswers.map(x => x.answerId + '-' + x.answerTitle);
+                console.log(`Question ${questionGroupValue.questionId} type ${QuestionTypeEnum[questionGroupValue.questionType]} --- ${'not passed'} ---`, ` answers (${answers.join(' , ')}) logic (${LogicPropertyEnum[ruleExp.logicPropertyId]}) operator (${OperatorEnum[ruleExp.opporator]})`);
+            }
             useCaseResult.exprestionResultArr.push(result);
         });
         return of(useCaseResult);
@@ -316,10 +318,6 @@ class QuestionTextTemplateComponent {
     get questionTypeEnum() {
         return QuestionTypeEnum;
     }
-    get isShowTextArea() {
-        const fromValue = this.rForm.value;
-        return fromValue.inputTypeId != InputTypeEnum.Number;
-    }
     set setQuestion(value) {
         this.surveyQuestion = value;
         this.rForm.patchValue({
@@ -339,9 +337,11 @@ class QuestionTextTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             if (value.surveyAnswers[0].inputTypeId == InputTypeEnum.Number) {
                 if (value.surveyAnswers[0].inputMin != null) {
+                    this.fCtrls.inputMin.setValue(value.surveyAnswers[0].inputMin);
                     this.fCtrls.answer.addValidators([Validators.min(value.surveyAnswers[0].inputMin)]);
                 }
                 if (value.surveyAnswers[0].inputMax != null) {
+                    this.fCtrls.inputMax.setValue(value.surveyAnswers[0].inputMax);
                     this.fCtrls.answer.addValidators([Validators.max(value.surveyAnswers[0].inputMax)]);
                 }
             }
@@ -359,6 +359,7 @@ class QuestionTextTemplateComponent {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.emitter = new EventEmitter();
+        this.isArabicLang = false;
         this.isTextArea = false;
         this.rForm = this._formBuilder.group({
             id: [null],
@@ -370,7 +371,9 @@ class QuestionTextTemplateComponent {
             answer: [null],
             isDisabled: [false],
             isShow: [true],
-            inputTypeId: [null]
+            inputTypeId: [null],
+            inputMin: [null],
+            inputMax: [null]
         });
     }
     ngOnInit() {
@@ -409,13 +412,15 @@ 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 }], 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: { isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isShowTextArea == false else textAreaTemplate\">\n        <input class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n         [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\"  >\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>", styles: [""], 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.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n        <p *ngIf=\"fCtrls.inputMin.value != null || fCtrls.inputMax.value != null\" class=\"text-danger\">\n            <small>{{isArabicLang == true ?  ' \u0627\u0644\u0642\u064A\u0645\u0629 \u064A\u062C\u0628 \u0627\u0646 \u062A\u0643\u0648\u0646' :'The value must be '}}</small>\n            <small *ngIf=\"fCtrls.inputMin.value\">{{isArabicLang == true ? ' \u0645\u0646' : 'from'}} {{fCtrls.inputMin.value}} </small>\n            <small *ngIf=\"fCtrls.inputMax.value\">{{isArabicLang == true ? '\u0627\u0644\u0649' : 'to'}} {{fCtrls.inputMax.value}} </small>\n        </p>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n            <input class=\"form-control\"  [attr.min]=\"fCtrls.inputMin.value\"\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\"></textarea>\n        </ng-template>\n    </div>", styles: [""], 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.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isShowTextArea == false else textAreaTemplate\">\n        <input class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n         [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\"  >\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>" }]
+            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n        <p *ngIf=\"fCtrls.inputMin.value != null || fCtrls.inputMax.value != null\" class=\"text-danger\">\n            <small>{{isArabicLang == true ?  ' \u0627\u0644\u0642\u064A\u0645\u0629 \u064A\u062C\u0628 \u0627\u0646 \u062A\u0643\u0648\u0646' :'The value must be '}}</small>\n            <small *ngIf=\"fCtrls.inputMin.value\">{{isArabicLang == true ? ' \u0645\u0646' : 'from'}} {{fCtrls.inputMin.value}} </small>\n            <small *ngIf=\"fCtrls.inputMax.value\">{{isArabicLang == true ? '\u0627\u0644\u0649' : 'to'}} {{fCtrls.inputMax.value}} </small>\n        </p>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n            <input class=\"form-control\"  [attr.min]=\"fCtrls.inputMin.value\"\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\"></textarea>\n        </ng-template>\n    </div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isArabicLang: [{
+                type: Input
             }], isTextArea: [{
                 type: Input
             }], setQuestion: [{
@@ -749,7 +754,6 @@ class QuestionMatrixTemplateComponent {
             .pipe(map(x => x.defaultAnswers.filter(x => x.ParentQuestionId == this.fCtrls.id.value)))
             .pipe(filter(x => x.length > 0))
             .subscribe(answers => {
-            console.log(answers);
             this.fCtrls.subQuestionArray.controls.forEach(group => {
                 var answer = answers.find(x => x.QuestionId == group.value.subQuestionId);
                 if (answer != null) {
@@ -778,11 +782,11 @@ class QuestionMatrixTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\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: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\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: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"] }]
+            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -1146,6 +1150,7 @@ class SurveryLibComponent {
         this.isPre = false;
         this.surveyLanguageId = null;
         this.applicantKey = null;
+        this.isArabicLang = false;
         this.surveyResultEmit = new EventEmitter();
         this.selectLanguageEmit = new EventEmitter();
         this.rForm = this._formBuilder.group({
@@ -1270,7 +1275,8 @@ class SurveryLibComponent {
         this.surveyData.surveyRules.forEach(rule => {
             this._checkRuleExpsUsecase.execute({
                 ruleExps: rule.ruleExps,
-                questions: this.fCtrls.questionArray.value
+                questions: this.fCtrls.questionArray.value,
+                currentPageIndex: this.fCtrls.currentPageIndex.value
             }).subscribe(result => {
                 var isPassed = result.exprestionResultArr.filter(x => x == false).length == 0;
                 if (isPassed) {
@@ -1295,6 +1301,19 @@ class SurveryLibComponent {
                         }
                         else if (rule.logicActionId == LogicActionEnum.SetAnswer) {
                         }
+                        if (questionGroup.value.questionType == QuestionTypeEnum.Matrix && questionGroup.value.isMatrixGroup == true) {
+                            var subQuestions = this.fCtrls.questionArray.value.filter(x => x.surveyPageIndex == questionGroup.value.surveyPageIndex && x.isMatrixGroup == false);
+                            subQuestions.forEach(subQuestion => {
+                                const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == subQuestion.questionId);
+                                var subQuestionGroup = this.fCtrls.questionArray.at(index);
+                                subQuestionGroup.patchValue({
+                                    isShow: questionGroup.value.isShow,
+                                    isDisabled: questionGroup.value.isDisabled
+                                });
+                                this._surveyLibService.setQuestionIsDisabled(subQuestion.questionId, subQuestion.isDisabled);
+                                this._surveyLibService.setQuestionIsShow(subQuestion.questionId, subQuestion.isShow);
+                            });
+                        }
                     });
                 }
                 else {
@@ -1390,17 +1409,19 @@ class SurveryLibComponent {
         });
     }
     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", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [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\" [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 *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              </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                [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              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\"\r\n                *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              </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              </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              </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: ["isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["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: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageIndex", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"], outputs: ["emitter"] }] }); }
+    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 *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [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\" [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 *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              </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                [isTextArea]=\"question.isAdvanceTextArea\" [isArabicLang]=\"isArabicLang\"></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              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\"\r\n                *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              </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              </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              </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\">{{isArabicLang ? '\u0645\u0646' : '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: ["isArabicLang", "isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["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: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageIndex", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"], outputs: ["emitter"] }] }); }
 }
 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 *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [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\" [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 *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              </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                [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              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\"\r\n                *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              </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              </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              </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"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [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\" [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 *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              </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                [isTextArea]=\"question.isAdvanceTextArea\" [isArabicLang]=\"isArabicLang\"></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              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\"\r\n                *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              </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              </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              </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\">{{isArabicLang ? '\u0645\u0646' : '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
             }], surveyLanguageId: [{
                 type: Input
             }], applicantKey: [{
                 type: Input
+            }], isArabicLang: [{
+                type: Input
             }], surveyResultEmit: [{
                 type: Output
             }], selectLanguageEmit: [{
@@ -1455,6 +1476,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class MaskedForMinMaxDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    onKeyUp(event) {
+        let ele = this.el.nativeElement;
+        const input = event.target;
+        if (input.type === 'number') {
+            var min = null;
+            var max = null;
+            if (input.getAttribute('min') !== null) {
+                min = parseInt(input.getAttribute('min'));
+            }
+            if (input.getAttribute('max') !== null) {
+                max = parseInt(input.getAttribute('max'));
+            }
+            if (min != null) {
+                var newInputValue = input.value + event.key;
+                if (parseInt(newInputValue) < min) {
+                    event.preventDefault();
+                }
+            }
+            if (max !== null) {
+                var newInputValue = input.value + event.key;
+                if (parseInt(newInputValue) > max) {
+                    event.preventDefault();
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MaskedForMinMaxDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]", host: { listeners: { "keypress": "onKeyUp($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MaskedForMinMaxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libMaskedForMinMax]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onKeyUp: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }] } });
+
 class SurveryLibModule {
     static forRoot(config) {
         return {
@@ -1482,7 +1546,8 @@ class SurveryLibModule {
             DefaultQuestionAnswerPipe,
             DefaultQuestionAnswersPipe,
             TextBoxTypeAttrPipe,
-            QuestionCascadeTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule], exports: [SurveryLibComponent] }); }
+            QuestionCascadeTemplateComponent,
+            MaskedForMinMaxDirective], 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: [{
@@ -1501,7 +1566,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         DefaultQuestionAnswerPipe,
                         DefaultQuestionAnswersPipe,
                         TextBoxTypeAttrPipe,
-                        QuestionCascadeTemplateComponent
+                        QuestionCascadeTemplateComponent,
+                        MaskedForMinMaxDirective
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule