@bnsights/bbsf-controls 1.0.24 → 1.0.27

package/fesm2015/bnsights-bbsf-controls.js

@@ -4,7 +4,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
+import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, Directive, TemplateRef, ViewChildren, ComponentFactoryResolver, ViewContainerRef, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
 import { BlockUIModule } from 'ng-block-ui';
 import { ControlContainer, Validators, FormControl, FormGroupDirective, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { Http, HttpModule } from '@angular/http';
@@ -1894,7 +1894,7 @@ DropdownListComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-DropdownList',
-                template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n        [notFoundText]=\"'No data found.'\" [maxSelectedItems]=\"options.LimitSelection\"\r\n        [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n        [searchable]=\"true\" [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n        [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n        [(ngModel)]=\"SelectedList\" (change)=\"onItemSelect($event[options.ItemTempletkey])\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\"ks-cboxtags\">\r\n            <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\"\r\n              class=\" \" /> <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control bnsights-control\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect($event.target.value)\"\r\n        [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--select--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n        {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <!-- <div *ngIf=\"DropdownListFormControl.valid\">{{resetError()}}</div> -->\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n</div>",
+                template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n        [notFoundText]=\"'No data found.'\" [maxSelectedItems]=\"options.LimitSelection\"\r\n        [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n        [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n        [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n        [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect($event[options.ItemTempletkey])\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\"ks-cboxtags\">\r\n            <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\"\r\n              class=\" \" /> <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control bnsights-control\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect($event.target.value)\"\r\n        [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--select--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n        {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <!-- <div *ngIf=\"DropdownListFormControl.valid\">{{resetError()}}</div> -->\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".cuppa-dropdown{background-color:#fff}.arrow-up,.arrow-down{border-left:none!important;border-right:none!important}.dropdown-list{padding-top:0!important}.c-token{background-color:#6495ed}.pure-checkbox .selected-item{background-color:#6495ed;color:#fff}\n"]
             },] }
 ];
@@ -2783,7 +2783,7 @@ class ImageUploaderComponent {
             this.FileLikeObject = new FileLikeObject({
                 name: element.FileName,
                 size: element.FileSizeInMB * 1000 * 1000,
-                type: element.FileType
+                type: element.FileType,
             });
             this.uploader.addToQueue([this.FileLikeObject]);
         }
@@ -2807,6 +2807,8 @@ class ImageUploaderComponent {
         }
         this.group.addControl(this.options.Name, new FormControl(''));
         this.ImageUploadFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (this.options.Value != null)
+            this.group.get(this.options.Name).setValue(this.options.Value);
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
         if (this.options.CustomValidation.length > 0) {
@@ -2949,6 +2951,7 @@ class ImageUploaderComponent {
                 FileType: this.EventFile.type,
                 FileBase64: reader.result.toString().split(',')[1],
                 FileSizeInMB: ((BlobFile.size / 1000) / 1000),
+                NameWithExtension: this.EventFile.name
             };
             BlobFile.name = this.EventFile.name;
             FilesArray.push(FileObject);
@@ -2975,7 +2978,7 @@ ImageUploaderComponent.controlContainerstatic = null;
 ImageUploaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-ImageUpload',
-                template: "<div class=\"b-control b-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n        </i>\r\n      </ejs-tooltip>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" style=\"max-width:200px !important; max-height: 200px !important;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"options.FileMaxSizeInMB\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label  class=\"h-100 m-0\" style=\"max-width: 200px  !important;\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"h-100 w-100\"  />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n\r\n\r\n        <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\"  *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ImageUploadClassSelector\"  *ngIf=\"!options.AllowDropZone\" >\r\n      <ngx-dropzone-label  class=\"h-100 m-0\" *ngIf=\"files.length==0\" >\r\n        <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element  (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" class=\"h-100 w-100\"  />\r\n        </div>`\r\n      </ngx-dropzone-label>\r\n\r\n      <div   style=\"border: none !important; max-width:200px !important; max-height: 200px !important;\" class=\" fileSelector customImageUploadPlacment d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\"  ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"options.FileMaxSizeInMB\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      \r\n\r\n\r\n        <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\"  *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n    </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                Crop Image\r\n              </h4>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\r\n              <div *ngIf=\"imageUrl\">\r\n                <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n                </angular-cropper>\r\n                <img [src]=\"imgwUrl\" />\r\n              </div>\r\n              <div style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n                      <span class=\"fa fa-search-plus\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n                      <span class=\"fa fa-search-minus\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n                      <span class=\"fa fa-arrow-left\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n                      <span class=\"fa fa-arrow-right\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n                      <span class=\"fa fa-arrow-up\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n                      <span class=\"fa fa-arrow-down\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n                      <span class=\"fa fa-undo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                Crop\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n      *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n  </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n        </i>\r\n      </ejs-tooltip>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" style=\"max-width:200px !important; max-height: 200px !important;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"options.FileMaxSizeInMB\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label  class=\"h-100 m-0\" style=\"max-width: 200px  !important;\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"h-100 w-100\"  />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n\r\n\r\n        <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\"  *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ImageUploadClassSelector\"  *ngIf=\"!options.AllowDropZone\" >\r\n      <ngx-dropzone-label  class=\"h-100 m-0\" *ngIf=\"files.length==0\" >\r\n        <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element  (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" class=\"h-100 w-100\"  />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n\r\n      <div   style=\"border: none !important; max-width:200px !important; max-height: 200px !important;\" class=\" fileSelector customImageUploadPlacment d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\"  ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"options.FileMaxSizeInMB\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      \r\n\r\n\r\n        <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\"  *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n    </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                Crop Image\r\n              </h4>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\r\n              <div *ngIf=\"imageUrl\">\r\n                <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n                </angular-cropper>\r\n                <img [src]=\"imgwUrl\" />\r\n              </div>\r\n              <div style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n                      <span class=\"fa fa-search-plus\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n                      <span class=\"fa fa-search-minus\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n                      <span class=\"fa fa-arrow-left\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n                      <span class=\"fa fa-arrow-right\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n                      <span class=\"fa fa-arrow-up\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n                      <span class=\"fa fa-arrow-down\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n                      <span class=\"fa fa-undo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                Crop\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n      *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n  </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                 styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.ImageUploadClassSelector img{cursor:pointer}.d-inline-flex.h-auto.m-0.overflow-hidden.w-auto.ng-untouched.ng-pristine.ng-valid{border-radius:40px;border-color:#c7c7c7}\n"]
             },] }
 ];
@@ -3998,7 +4001,7 @@ class PagingComponent {
 PagingComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-Paging',
-                template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{utilityService.getResourceValue(\"ItemsIn\")}} <strong> {{Pages}}</strong> {{utilityService.getResourceValue(\"Pages\")}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *ngIf=\"options.IsLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"ScrollDistance\"\r\n         [infiniteScrollUpDistance]=\"ScrollUpDistance\" [infiniteScrollThrottle]=\"Throttle\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-primary\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\"> Load More </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{utilityService.getResourceValue(\"ItemsIn\")}} <strong> {{Pages}}</strong> {{utilityService.getResourceValue(\"Pages\")}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *ngIf=\"options.IsLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"ScrollDistance\"\r\n         [infiniteScrollUpDistance]=\"ScrollUpDistance\" [infiniteScrollThrottle]=\"Throttle\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-info\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n",
                 styles: [".ngx-pager-container{text-align:center;padding:25px 0 0}.ngx-pager-container li{display:inline-block;margin:0 4px}.ngx-pager-container li a{display:block;width:26px;height:26px;border:1px solid #707070;text-align:center;color:#3e4e59;font-size:14px;line-height:24px;border-radius:5px;text-decoration:none}.ngx-pager-container li a:hover{color:#fff;background:#0a0e03}.ngx-pager-container li.invisible{display:none}.ngx-pager-container li.active{background:#0a0e03;border-radius:5px}.ngx-pager-container li.active a{border:none;color:#fff}\n"]
             },] }
 ];
@@ -5148,6 +5151,1060 @@ ConfirmationModalComponent.propDecorators = {
     confirmationModal: [{ type: ViewChild, args: ['confirmationModal', { static: false },] }]
 };
 
+class NgTemplateNameDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NgTemplateNameDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'ng-template[name]'
+            },] }
+];
+NgTemplateNameDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+NgTemplateNameDirective.propDecorators = {
+    name: [{ type: Input }]
+};
+
+class RepeaterComponent {
+    constructor() {
+        this.templateRefs = [];
+        this.items = [];
+        this.repeaterContext = { index: 0, delete: null, elements: null };
+    }
+    ngOnInit() {
+        this.currentTemplate = this.initialTemplate;
+        this.repeaterGroup = new FormGroup({});
+        this.group.addControl(this.options.Name, this.repeaterGroup);
+        this.group.get(this.options.Name).setValue(this.options.RepeaterValue);
+        for (let index = 0; index < this.options.MinRequiredItems; index++) {
+            this.items.push(index);
+        }
+        this.repeaterGroup.valueChanges.subscribe((res) => {
+            let result = [];
+            let rowNumber = [];
+            let addItems = [];
+            for (const key in this.repeaterGroup.controls) {
+                if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
+                    const keySplitArr = key.split('.');
+                    let item = {
+                        [keySplitArr[1]]: { [keySplitArr[0]]: this.group.controls[this.options.Name].value[key] }
+                    };
+                    addItems.push(item);
+                    if (!rowNumber.includes(keySplitArr[1]))
+                        rowNumber.push(keySplitArr[1]);
+                }
+            }
+            for (let index = 0; index < rowNumber.length; index++) {
+                const row = rowNumber[index];
+                let addObject = {};
+                let filteredElements = addItems.filter(item => item[row]);
+                for (let index = 0; index < filteredElements.length; index++) {
+                    const filteredElement = filteredElements[index];
+                    for (const key in filteredElement) {
+                        if (Object.prototype.hasOwnProperty.call(filteredElement, key)) {
+                            const element = filteredElement[key];
+                            for (const key in element) {
+                                if (Object.prototype.hasOwnProperty.call(element, key)) {
+                                    const value = element[key];
+                                    addObject[key] = value;
+                                }
+                            }
+                        }
+                    }
+                }
+                result.push(addObject);
+            }
+            this.options.RepeaterValue = result;
+        });
+    }
+    deleteItem(Index) {
+        if (this.items.length == this.options.MinRequiredItems && this.options.IsRequired)
+            return;
+        let deletedControls = [];
+        let controlNames = this.options.RepeaterStructure.map(e => e.ControlOptions.Name);
+        for (const key in this.repeaterGroup.controls) {
+            if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
+                for (let index = 0; index < controlNames.length; index++) {
+                    const element = controlNames[index];
+                    const keySplitArr = key.split('.');
+                    if (keySplitArr[0] + keySplitArr[1] == `${element}${Index}`) {
+                        const element = this.repeaterGroup.controls[key];
+                        deletedControls.push({ [key]: element });
+                    }
+                }
+            }
+        }
+        for (let index = 0; index < deletedControls.length; index++) {
+            const element = deletedControls[index];
+            for (const key in element) {
+                if (Object.prototype.hasOwnProperty.call(element, key)) {
+                    this.repeaterGroup.removeControl(key);
+                }
+            }
+        }
+        let item = this.items[Index];
+        this.items = this.items.filter((res) => res != item);
+    }
+    AddItem() {
+        this.items.push(this.items.length + 1);
+    }
+    ngAfterViewInit() {
+        let templateRefs = this._templates["_results"].map((item) => item["template"]);
+        this.templateRefs = templateRefs;
+        this.repeaterContext.elements = this.templateRefs;
+        this.repeaterContext.delete = this.delete;
+    }
+    setCurrentIndex(i) {
+        this.repeaterContext.index = i;
+    }
+}
+RepeaterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'BBSF-repeater',
+                template: "<div *ngFor='let item of items ; index as i'>\r\n    {{setCurrentIndex(i)}}\r\n    <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n    </ng-container>\r\n\r\n</div>\r\n\r\n<div>\r\n    <ng-container *ngTemplateOutlet=\"add\">\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" \r\n    let-Index=\"itemIndex\" let-control=\"controlIndex\">\r\n    <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\" [controlNumber]=\"control\"\r\n        [group]=\"repeaterGroup\"></repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n    <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n        [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\"> <span [innerHTML]=\"options.DeleteButtonText\"></span></button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n    <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\"\r\n        (click)=\"AddItem()\"><span [innerHTML]=\"options.AddButtonText\"></span></button>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n<!-- <ng-template adHost></ng-template>    -->",
+                styles: [""]
+            },] }
+];
+RepeaterComponent.ctorParameters = () => [];
+RepeaterComponent.propDecorators = {
+    group: [{ type: Input }],
+    options: [{ type: Input }],
+    initialTemplate: [{ type: Input }],
+    _templates: [{ type: ViewChildren, args: [NgTemplateNameDirective,] }],
+    delete: [{ type: ViewChild, args: ['delete', { static: false },] }]
+};
+
+var PermissionSets;
+(function (PermissionSets) {
+    PermissionSets[PermissionSets["Admin"] = 1] = "Admin";
+    PermissionSets[PermissionSets["BusinessAdmin"] = 2] = "BusinessAdmin";
+    PermissionSets[PermissionSets["Customer"] = 3] = "Customer";
+})(PermissionSets || (PermissionSets = {}));
+var PropertyLocation;
+(function (PropertyLocation) {
+    PropertyLocation[PropertyLocation["InternalIdeas"] = 53001] = "InternalIdeas";
+    PropertyLocation[PropertyLocation["EvaluationRequest"] = 53002] = "EvaluationRequest";
+    PropertyLocation[PropertyLocation["IMOBusiness"] = 53003] = "IMOBusiness";
+    PropertyLocation[PropertyLocation["PublicIdeas"] = 53004] = "PublicIdeas";
+})(PropertyLocation || (PropertyLocation = {}));
+var LanguageType;
+(function (LanguageType) {
+    LanguageType[LanguageType["English"] = 54001] = "English";
+    LanguageType[LanguageType["Arabic"] = 54002] = "Arabic";
+    LanguageType[LanguageType["Any"] = 54003] = "Any";
+})(LanguageType || (LanguageType = {}));
+var DataType;
+(function (DataType) {
+    DataType[DataType["Text"] = 52001] = "Text";
+    DataType[DataType["Email"] = 52002] = "Email";
+    DataType[DataType["Number"] = 52005] = "Number";
+    DataType[DataType["Name"] = 52003] = "Name";
+    DataType[DataType["Mobile"] = 52004] = "Mobile";
+    DataType[DataType["MultilineText"] = 52006] = "MultilineText";
+    DataType[DataType["HTML"] = 52007] = "HTML";
+    DataType[DataType["Image"] = 52010] = "Image";
+    DataType[DataType["File"] = 52011] = "File";
+    DataType[DataType["MultiFile"] = 52012] = "MultiFile";
+    DataType[DataType["Boolean"] = 52013] = "Boolean";
+    DataType[DataType["Date"] = 52014] = "Date";
+    DataType[DataType["DateTime"] = 52015] = "DateTime";
+    DataType[DataType["Time"] = 52016] = "Time";
+    DataType[DataType["Location"] = 52017] = "Location";
+    DataType[DataType["SingleSelect"] = 52008] = "SingleSelect";
+    DataType[DataType["MulipleSelect"] = 52009] = "MulipleSelect";
+    DataType[DataType["Goal"] = 52018] = "Goal";
+    DataType[DataType["Challenge"] = 52019] = "Challenge";
+    DataType[DataType["CoverPhoto"] = 52020] = "CoverPhoto";
+    DataType[DataType["InnovationLab"] = 52021] = "InnovationLab";
+    DataType[DataType["Country"] = 52022] = "Country";
+})(DataType || (DataType = {}));
+
+var ForceDirection;
+(function (ForceDirection) {
+    ForceDirection[ForceDirection["English"] = 1] = "English";
+    ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
+})(ForceDirection || (ForceDirection = {}));
+
+class DatePickerOptions {
+    constructor() {
+        /**  to set type of view  if DatePicker is Vertical or Horizontal */
+        this.ViewType = ControlLayout.Vertical;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+        */
+        this.CustomValidation = [];
+        /**To set  First Day Of Week  to DatePicker */
+        this.FirstDayOfWeek = 1;
+        /**To set PickerType to DatePicker  is Calendar or Timer Or Both */
+        this.PickerType = PickerType.Calendar;
+        /**To set StartView to DatePicker  is Year or Month Or Multi-Year */
+        this.StartView = StartView.Month;
+        /**To set SelectMode to DatePicker  is Single or Range */
+        this.SelectMode = SelectMode.Single;
+        this.ForceDirection = ForceDirection.English;
+    }
+}
+
+class DropdownOptions {
+    constructor() {
+        /** Disable Bootstrap DropdownList */
+        this.DisableBootstrapSelect = false;
+        /**  to set type of view  if DropdownList is Vertical or Horizontal */
+        this.ViewType = null;
+        /**  To Set Custom Validation*/
+        this.CustomValidation = [];
+        /** Set key for item in  DropdownList  */
+        this.ItemTempletkey = "key";
+        /** Set value for item in  DropdownList  */
+        this.ItemTempletvalue = "value";
+        this.ForceDirection = ForceDirection.English;
+    }
+}
+
+class FileUploadOptions {
+    constructor() {
+        /** Ability to set  FileInput required */
+        this.IsMultipleFile = false;
+        /** Sets  boolean Value to Show IsDropZone Or Not   */
+        this.IsDropZone = false;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+        */
+        this.CustomValidation = [];
+        /**  to set type of view  if textbox is Vertical or Horizontal */
+        this.ViewType = null;
+    }
+}
+
+class HtmlEditorOptions {
+    constructor() {
+        /**  to set type of view  if textbox is Vertical or Horizontal */
+        this.ViewType = null;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+      */
+        this.CustomValidation = [];
+        /** to set Direction of HtmlEditor  if HtmlEditor is Arabic or English  */
+        this.ForceDirection = ForceDirection.English;
+        /** Set Height For  */
+        this.Height = 150;
+    }
+}
+
+var ImageType;
+(function (ImageType) {
+    ImageType["ImageTypes"] = "image/png,image/bmp,image/jpeg";
+    ImageType["PNG"] = "image/png";
+    ImageType["JPG"] = "image/jpeg";
+    ImageType["JPEG"] = "image/jpeg";
+    ImageType["SVG"] = "image/svg+xml";
+    ImageType["None"] = "";
+})(ImageType || (ImageType = {}));
+
+class ImageUploadOptions {
+    constructor() {
+        /** Allow to Upload Multiple File  */
+        this.IsMultiple = false;
+        /** Allow to Use Drop Zone  */
+        this.AllowDropZone = false;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+        */
+        this.CustomValidation = [];
+        /**  to set type of view  if FileInput is Vertical or Horizontal */
+        this.ViewType = null;
+        /** Set List of Custom Attribute to FileInput  */
+        this.FileUploadAcceptsTypes = [ImageType.ImageTypes];
+    }
+}
+
+class MapAutoCompleteOptions {
+    constructor() {
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+      */
+        this.CustomValidation = [];
+        /**  to set type of view  if MapAutoComplete is Vertical or Horizontal */
+        this.ViewType = null;
+    }
+}
+
+class PhoneOptions {
+    constructor() {
+        /**
+      *   Represent Css classes to Phonebox
+      */
+        this.ExtraClasses = "form-control bnsights-control";
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+       */
+        this.CustomValidation = [];
+        /**Set List Of Countries As Preferred Countries*/
+        this.PreferredCountries = [];
+        /**  to set type of view  if Phonebox is Vertical or Horizontal */
+        this.ViewType = null;
+        this.ForceDirection = ForceDirection.English;
+    }
+}
+
+class RangeNumber {
+}
+
+class TextAreaOptions {
+    constructor() {
+        /**  to set type of view  if TextArea is Vertical or Horizontal */
+        this.ViewType = null;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+      */
+        this.CustomValidation = [];
+        /** to set Direction of TextArea  if TextArea is Arabic or English  */
+        this.ForceDirection = ForceDirection.English;
+    }
+}
+
+var IconPosition;
+(function (IconPosition) {
+    IconPosition[IconPosition["left"] = 1] = "left";
+    IconPosition[IconPosition["right"] = 2] = "right";
+})(IconPosition || (IconPosition = {}));
+
+class TextBoxOptions {
+    constructor() {
+        /** set Range Number to Textbox with type number with From-Value and To-value*/
+        this.NumberRange = new RangeNumber();
+        /**Prevent AutoComplete of textbox*/
+        this.AutoComplete = "off";
+        /**  to set type of view  if textbox is Vertical or Horizontal */
+        this.ViewType = null;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
+      */
+        this.CustomValidation = [];
+        /** to set Direction of textbox  if textbox is Arabic or English  */
+        this.ForceDirection = null;
+        /** Set Type of TextBox ("text","password","email","number") */
+        this.Type = InputType.Text;
+        this.IconPosition = IconPosition.left;
+        this.NoMargin = false;
+        this.ValidationRules = [];
+    }
+}
+
+class ToggleSlideOptions {
+    constructor() {
+        this.ViewType = null;
+        this.ForceDirection = ForceDirection.English;
+    }
+}
+
+class RenderComponentService {
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    renderDynamicComponent(viewContainerRef, component, group, options) {
+        let factory = this.componentFactoryResolver.resolveComponentFactory(component);
+        const componentRef = viewContainerRef.createComponent(factory);
+        componentRef.instance.group = group;
+        componentRef.instance.options = options;
+    }
+}
+RenderComponentService.decorators = [
+    { type: Injectable }
+];
+RenderComponentService.ctorParameters = () => [
+    { type: ComponentFactoryResolver }
+];
+
+class RepeaterFieldBuilderComponent {
+    constructor(renderComponentService, TextControlHost) {
+        this.renderComponentService = renderComponentService;
+        this.TextControlHost = TextControlHost;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.Item.clear();
+            switch (this.RepeaterField.ControlType) {
+                ///TextBox
+                case DataType.Text:
+                    let Text = new TextBoxOptions();
+                    Text.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Text.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Text.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Text.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Text.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Text.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Text.Type = InputType.Text;
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        Text.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        Text.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Text);
+                    break;
+                case DataType.Name:
+                    let Name = new TextBoxOptions();
+                    Name.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Name.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Name.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Name.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Name.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Name.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        Name.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        Name.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    Name.Type = InputType.Text;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Name);
+                    break;
+                case DataType.Email:
+                    let Email = new TextBoxOptions();
+                    Email.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Email.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Email.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Email.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Email.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Email.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Email.Type = InputType.Email;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Email);
+                    break;
+                case DataType.Number:
+                    let Number = new TextBoxOptions();
+                    Number.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Number.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Number.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Number.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Number.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Number.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Number.Type = InputType.Number;
+                    let rangeNumber = new RangeNumber();
+                    rangeNumber.To = this.RepeaterField.ControlOptions.maxLength;
+                    rangeNumber.From = this.RepeaterField.ControlOptions.minLength;
+                    Number.NumberRange = rangeNumber;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Number);
+                    break;
+                ///DateTime
+                case DataType.Date:
+                    let Date = new DatePickerOptions();
+                    Date.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Date.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Date.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Date.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Date.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Date.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Date.PickerType = PickerType.Calendar;
+                    Date.SelectMode = SelectMode.Single;
+                    Date.StartView = StartView.Month;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DateInputComponent, this.group, Date);
+                    break;
+                case DataType.DateTime:
+                    let DateTime = new DatePickerOptions();
+                    DateTime.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    DateTime.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    DateTime.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    DateTime.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    DateTime.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    DateTime.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    DateTime.PickerType = PickerType.Both;
+                    DateTime.SelectMode = SelectMode.Single;
+                    DateTime.StartView = StartView.Month;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DateInputComponent, this.group, DateTime);
+                    break;
+                case DataType.Time:
+                    let Time = new DatePickerOptions();
+                    Time.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Time.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Time.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Time.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Time.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Time.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Time.PickerType = PickerType.Timer;
+                    Time.SelectMode = SelectMode.Single;
+                    Time.StartView = StartView.Month;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DateInputComponent, this.group, Time);
+                    break;
+                //Dropdown
+                case DataType.SingleSelect:
+                    let SingleSelect = new DropdownOptions();
+                    SingleSelect.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    SingleSelect.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    SingleSelect.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    SingleSelect.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    SingleSelect.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    SingleSelect.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    SingleSelect.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    SingleSelect.SingleSelection = true;
+                    SingleSelect.ShowCheckbox = false;
+                    SingleSelect.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, SingleSelect);
+                    break;
+                case DataType.MulipleSelect:
+                    let MulipleSelect = new DropdownOptions();
+                    MulipleSelect.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    MulipleSelect.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    MulipleSelect.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    MulipleSelect.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    MulipleSelect.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    MulipleSelect.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    MulipleSelect.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    MulipleSelect.SingleSelection = false;
+                    MulipleSelect.ShowCheckbox = false;
+                    MulipleSelect.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, MulipleSelect);
+                    break;
+                case DataType.Goal:
+                    let Goal = new DropdownOptions();
+                    Goal.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Goal.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Goal.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Goal.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Goal.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Goal.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Goal.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Goal.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    Goal.ShowCheckbox = false;
+                    Goal.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, Goal);
+                    break;
+                case DataType.Challenge:
+                    let Challenge = new DropdownOptions();
+                    Challenge.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Challenge.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Challenge.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Challenge.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Challenge.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Challenge.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Challenge.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Challenge.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Challenge.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    Challenge.ShowCheckbox = false;
+                    Challenge.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, Challenge);
+                    break;
+                case DataType.InnovationLab:
+                    let InnovationLab = new DropdownOptions();
+                    InnovationLab.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    InnovationLab.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    InnovationLab.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    InnovationLab.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    InnovationLab.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    InnovationLab.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    InnovationLab.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    InnovationLab.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    InnovationLab.ShowCheckbox = false;
+                    InnovationLab.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, InnovationLab);
+                    break;
+                case DataType.Country:
+                    let Country = new DropdownOptions();
+                    Country.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Country.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Country.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Country.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Country.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Country.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Country.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Country.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    Country.ShowCheckbox = false;
+                    Country.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, Country);
+                    break;
+                //FileUpload
+                case DataType.File:
+                    let File = new FileUploadOptions();
+                    File.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    File.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    File.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    File.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    File.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    File.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    File.FileMaxSizeInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    this.renderComponentService.renderDynamicComponent(this.Item, FileUploadComponent, this.group, File);
+                    break;
+                case DataType.MultiFile:
+                    let MultiFile = new FileUploadOptions();
+                    File.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    File.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    File.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    File.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    File.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    File.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    MultiFile.MaxSizeForAllFilesInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    MultiFile.MaxNoOfFiles = this.RepeaterField.ControlOptions.maxFileCount;
+                    MultiFile.IsMultipleFile = true;
+                    this.renderComponentService.renderDynamicComponent(this.Item, FileUploadComponent, this.group, MultiFile);
+                    break;
+                //ImageUpload
+                case DataType.Image:
+                    let Image = new ImageUploadOptions();
+                    Image.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Image.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Image.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Image.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Image.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Image.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxFileSizeInMB)
+                        Image.FileMaxSizeInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    this.renderComponentService.renderDynamicComponent(this.Item, ImageUploaderComponent, this.group, Image);
+                    break;
+                case DataType.CoverPhoto:
+                    let CoverPhoto = new ImageUploadOptions();
+                    CoverPhoto.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    CoverPhoto.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    CoverPhoto.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    CoverPhoto.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    CoverPhoto.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    CoverPhoto.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxFileSizeInMB)
+                        CoverPhoto.FileMaxSizeInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    this.renderComponentService.renderDynamicComponent(this.Item, ImageUploaderComponent, this.group, CoverPhoto);
+                    break;
+                //Mobile
+                case DataType.Mobile:
+                    let Mobile = new PhoneOptions();
+                    Mobile.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Mobile.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Mobile.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Mobile.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Mobile.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Mobile.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Mobile.AllowSearch = true;
+                    Mobile.PhoneValidation = true;
+                    Mobile.SelectFirstCountry = true;
+                    Mobile.EnablePlaceholder = true;
+                    this.renderComponentService.renderDynamicComponent(this.Item, PhoneComponent, this.group, Mobile);
+                    break;
+                //MultilineText
+                case DataType.MultilineText:
+                    let MultilineText = new TextAreaOptions();
+                    MultilineText.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    MultilineText.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    MultilineText.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    MultilineText.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    MultilineText.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    MultilineText.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        MultilineText.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        MultilineText.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    MultilineText.Rows = this.RepeaterField.ControlOptions.rows;
+                    MultilineText.ForceDirection = this.RepeaterField.ControlOptions.ForceDirection;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextAreaComponent, this.group, MultilineText);
+                    break;
+                //HTML
+                case DataType.HTML:
+                    let HTML = new HtmlEditorOptions();
+                    HTML.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    HTML.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    HTML.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    HTML.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    HTML.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    HTML.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        HTML.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        HTML.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    HTML.Height = this.RepeaterField.ControlOptions.rows;
+                    HTML.ForceDirection = this.RepeaterField.ControlOptions.ForceDirection;
+                    this.renderComponentService.renderDynamicComponent(this.Item, HtmlEditorComponent, this.group, HTML);
+                    break;
+                //Boolean
+                case DataType.Boolean:
+                    let Boolean = new ToggleSlideOptions();
+                    Boolean.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Boolean.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Boolean.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Boolean.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Boolean.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    this.renderComponentService.renderDynamicComponent(this.Item, ToggleslideComponent, this.group, Boolean);
+                    break;
+                //Location
+                case DataType.Location:
+                    let Location = new MapAutoCompleteOptions();
+                    Location.Name = this.RepeaterField.ControlOptions.Name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
+                    Location.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Location.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Location.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Location.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Location.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    this.renderComponentService.renderDynamicComponent(this.Item, MapAutoCompleteComponent, this.group, Location);
+                    break;
+                default:
+                    break;
+            }
+        }, 0);
+    }
+    ngOnChanges(changes) {
+        if (changes.itemNumber.previousValue) {
+            let name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.previousValue.toString() + "." + this.controlNumber.toString();
+            let value = this.group.controls[name].value;
+            this.Item.clear();
+            this.group.removeControl(name);
+            switch (this.RepeaterField.ControlType) {
+                ///TextBox
+                case DataType.Text:
+                    let Text = new TextBoxOptions();
+                    Text.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Text.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Text.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Text.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Text.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Text.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Text.Type = InputType.Text;
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        Text.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        Text.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    Text.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Text);
+                    break;
+                case DataType.Name:
+                    let Name = new TextBoxOptions();
+                    Name.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Name.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Name.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Name.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Name.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Name.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        Name.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        Name.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    Name.Type = InputType.Text;
+                    Name.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Name);
+                    break;
+                case DataType.Email:
+                    let Email = new TextBoxOptions();
+                    Email.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Email.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Email.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Email.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Email.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Email.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Email.Type = InputType.Email;
+                    Email.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Email);
+                    break;
+                case DataType.Number:
+                    let Number = new TextBoxOptions();
+                    Number.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Number.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Number.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Number.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Number.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Number.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Number.Type = InputType.Number;
+                    let rangeNumber = new RangeNumber();
+                    rangeNumber.To = this.RepeaterField.ControlOptions.maxLength;
+                    rangeNumber.From = this.RepeaterField.ControlOptions.minLength;
+                    Number.NumberRange = rangeNumber;
+                    Number.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextboxComponent, this.group, Number);
+                    break;
+                ///DateTime
+                case DataType.Date:
+                    let Date = new DatePickerOptions();
+                    Date.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Date.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Date.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Date.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Date.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Date.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Date.PickerType = PickerType.Calendar;
+                    Date.SelectMode = SelectMode.Single;
+                    Date.StartView = StartView.Month;
+                    Date.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DateInputComponent, this.group, Date);
+                    break;
+                case DataType.DateTime:
+                    let DateTime = new DatePickerOptions();
+                    DateTime.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    DateTime.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    DateTime.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    DateTime.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    DateTime.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    DateTime.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    DateTime.PickerType = PickerType.Both;
+                    DateTime.SelectMode = SelectMode.Single;
+                    DateTime.StartView = StartView.Month;
+                    DateTime.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DateInputComponent, this.group, DateTime);
+                    break;
+                case DataType.Time:
+                    let Time = new DatePickerOptions();
+                    Time.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Time.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Time.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Time.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Time.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Time.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Time.PickerType = PickerType.Timer;
+                    Time.SelectMode = SelectMode.Single;
+                    Time.StartView = StartView.Month;
+                    Time.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DateInputComponent, this.group, Time);
+                    break;
+                //Dropdown
+                case DataType.SingleSelect:
+                    let SingleSelect = new DropdownOptions();
+                    SingleSelect.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    SingleSelect.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    SingleSelect.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    SingleSelect.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    SingleSelect.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    SingleSelect.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    SingleSelect.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    SingleSelect.SingleSelection = true;
+                    SingleSelect.ShowCheckbox = false;
+                    SingleSelect.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    SingleSelect.SelectedItems = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, SingleSelect);
+                    break;
+                case DataType.MulipleSelect:
+                    let MulipleSelect = new DropdownOptions();
+                    MulipleSelect.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    MulipleSelect.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    MulipleSelect.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    MulipleSelect.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    MulipleSelect.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    MulipleSelect.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    MulipleSelect.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    MulipleSelect.SingleSelection = false;
+                    MulipleSelect.ShowCheckbox = false;
+                    MulipleSelect.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    MulipleSelect.SelectedItems = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, MulipleSelect);
+                    break;
+                case DataType.Goal:
+                    let Goal = new DropdownOptions();
+                    Goal.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Goal.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Goal.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Goal.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Goal.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Goal.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Goal.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Goal.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    Goal.ShowCheckbox = false;
+                    Goal.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    Goal.SelectedItems = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, Goal);
+                    break;
+                case DataType.Challenge:
+                    let Challenge = new DropdownOptions();
+                    Challenge.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Challenge.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Challenge.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Challenge.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Challenge.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Challenge.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Challenge.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Challenge.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Challenge.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    Challenge.ShowCheckbox = false;
+                    Challenge.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    Challenge.SelectedItems = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, Challenge);
+                    break;
+                case DataType.InnovationLab:
+                    let InnovationLab = new DropdownOptions();
+                    InnovationLab.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    InnovationLab.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    InnovationLab.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    InnovationLab.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    InnovationLab.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    InnovationLab.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    InnovationLab.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    InnovationLab.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    InnovationLab.ShowCheckbox = false;
+                    InnovationLab.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    InnovationLab.SelectedItems = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, InnovationLab);
+                    break;
+                case DataType.Country:
+                    let Country = new DropdownOptions();
+                    Country.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Country.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Country.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Country.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Country.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Country.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Country.DataSource = this.RepeaterField.ControlOptions.dataSource;
+                    Country.SingleSelection = !this.RepeaterField.ControlOptions.isMultiple;
+                    Country.ShowCheckbox = false;
+                    Country.AllowSearchFilter = this.RepeaterField.ControlOptions.hasSearch;
+                    Country.SelectedItems = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, DropdownListComponent, this.group, Country);
+                    break;
+                //FileUpload
+                case DataType.File:
+                    let File = new FileUploadOptions();
+                    File.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    File.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    File.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    File.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    File.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    File.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    File.FileMaxSizeInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    File.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, FileUploadComponent, this.group, File);
+                    break;
+                case DataType.MultiFile:
+                    let MultiFile = new FileUploadOptions();
+                    File.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    File.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    File.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    File.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    File.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    File.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    MultiFile.MaxSizeForAllFilesInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    MultiFile.MaxNoOfFiles = this.RepeaterField.ControlOptions.maxFileCount;
+                    MultiFile.IsMultipleFile = true;
+                    MultiFile.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, FileUploadComponent, this.group, MultiFile);
+                    break;
+                //ImageUpload
+                case DataType.Image:
+                    let Image = new ImageUploadOptions();
+                    Image.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Image.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Image.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Image.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Image.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Image.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxFileSizeInMB)
+                        Image.FileMaxSizeInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    Image.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, ImageUploaderComponent, this.group, Image);
+                    break;
+                case DataType.CoverPhoto:
+                    let CoverPhoto = new ImageUploadOptions();
+                    CoverPhoto.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    CoverPhoto.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    CoverPhoto.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    CoverPhoto.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    CoverPhoto.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    CoverPhoto.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxFileSizeInMB)
+                        CoverPhoto.FileMaxSizeInMB = this.RepeaterField.ControlOptions.maxFileSizeInMB;
+                    CoverPhoto.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, ImageUploaderComponent, this.group, CoverPhoto);
+                    break;
+                //Mobile
+                case DataType.Mobile:
+                    let Mobile = new PhoneOptions();
+                    Mobile.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Mobile.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Mobile.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Mobile.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Mobile.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Mobile.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Mobile.AllowSearch = true;
+                    Mobile.PhoneValidation = true;
+                    Mobile.SelectFirstCountry = true;
+                    Mobile.EnablePlaceholder = true;
+                    Mobile.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, PhoneComponent, this.group, Mobile);
+                    break;
+                //MultilineText
+                case DataType.MultilineText:
+                    let MultilineText = new TextAreaOptions();
+                    MultilineText.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    MultilineText.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    MultilineText.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    MultilineText.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    MultilineText.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    MultilineText.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        MultilineText.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        MultilineText.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    MultilineText.Rows = this.RepeaterField.ControlOptions.rows;
+                    MultilineText.ForceDirection = this.RepeaterField.ControlOptions.ForceDirection;
+                    MultilineText.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, TextAreaComponent, this.group, MultilineText);
+                    break;
+                //HTML
+                case DataType.HTML:
+                    let HTML = new HtmlEditorOptions();
+                    HTML.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    HTML.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    HTML.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    HTML.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    HTML.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    HTML.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    if (this.RepeaterField.ControlOptions.maxLength)
+                        HTML.MaxLength = this.RepeaterField.ControlOptions.maxLength;
+                    if (this.RepeaterField.ControlOptions.minLength)
+                        HTML.MinLength = this.RepeaterField.ControlOptions.minLength;
+                    HTML.Height = this.RepeaterField.ControlOptions.rows;
+                    HTML.ForceDirection = this.RepeaterField.ControlOptions.ForceDirection;
+                    HTML.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, HtmlEditorComponent, this.group, HTML);
+                    break;
+                //Boolean
+                case DataType.Boolean:
+                    let Boolean = new ToggleSlideOptions();
+                    Boolean.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Boolean.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Boolean.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Boolean.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Boolean.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Boolean.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, ToggleslideComponent, this.group, Boolean);
+                    break;
+                //Location
+                case DataType.Location:
+                    let Location = new MapAutoCompleteOptions();
+                    Location.Name = this.RepeaterField.ControlOptions.Name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
+                    Location.HideLabel = this.RepeaterField.ControlOptions.HideLabel;
+                    Location.LabelKey = this.RepeaterField.ControlOptions.LabelKey;
+                    Location.IsRequired = this.RepeaterField.ControlOptions.IsRequired;
+                    Location.ViewType = this.RepeaterField.ControlOptions.ViewType;
+                    Location.LabelDescription = this.RepeaterField.ControlOptions.LabelDescription ? this.RepeaterField.ControlOptions.LabelDescription : "";
+                    Location.Value = value;
+                    this.renderComponentService.renderDynamicComponent(this.Item, MapAutoCompleteComponent, this.group, Location);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+}
+RepeaterFieldBuilderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'repeater-field-builder',
+                template: "<ng-container #Item></ng-container>\r\n"
+            },] }
+];
+RepeaterFieldBuilderComponent.ctorParameters = () => [
+    { type: RenderComponentService },
+    { type: FormGroupDirective }
+];
+RepeaterFieldBuilderComponent.propDecorators = {
+    Item: [{ type: ViewChild, args: ["Item", { read: ViewContainerRef },] }],
+    group: [{ type: Input }],
+    itemNumber: [{ type: Input }],
+    controlNumber: [{ type: Input }],
+    RepeaterField: [{ type: Input }]
+};
+
+class RepeaterItemFieldComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+RepeaterItemFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'repeater-item-field',
+                template: "<ng-container *ngFor=\"let template of templates ; index as i\">\r\n    <ng-container *ngIf=\"i==filedIndex\" [ngTemplateOutlet]=\"template\"  [ngTemplateOutletContext] ={itemIndex:itemIndex,controlIndex:i}></ng-container>\r\n  </ng-container>",
+                styles: [""]
+            },] }
+];
+RepeaterItemFieldComponent.ctorParameters = () => [];
+RepeaterItemFieldComponent.propDecorators = {
+    templates: [{ type: Input }],
+    filedIndex: [{ type: Input }],
+    itemIndex: [{ type: Input }]
+};
+
 let options;
 let AppInjector;
 FullCalendarModule.registerPlugins([
@@ -5190,7 +6247,11 @@ BBSFControlsModule.decorators = [
                     JwPaginationComponent,
                     RadioButtonComponent,
                     FormComponent,
-                    ConfirmationModalComponent
+                    ConfirmationModalComponent,
+                    RepeaterComponent,
+                    RepeaterFieldBuilderComponent,
+                    NgTemplateNameDirective,
+                    RepeaterItemFieldComponent,
                 ],
                 imports: [
                     CommonModule,
@@ -5245,17 +6306,12 @@ BBSFControlsModule.decorators = [
                     ErrorMassageValidation,
                     ControlUtility,
                     OnPagingFiltersChangeService,
-                    // EnvironmentService,
-                    // AuthService,
-                    // RequestHandlerService,
-                    // UtilityService,
                     TranslateService,
-                    // BBSFTranslateService,
-                    // ControlValidationService,
                     FormGroupDirective,
                     NgbModal,
                     NgbActiveModal,
                     DatePipe,
+                    RenderComponentService,
                     { provide: OWL_DATE_TIME_LOCALE, useValue: ɵ0 },
                 ],
                 schemas: [
@@ -5274,7 +6330,6 @@ BBSFControlsModule.decorators = [
                     ToggleslideComponent,
                     HtmlEditorComponent,
                     MultiLingualHtmlEditorComponent,
-                    FileUploadComponent,
                     ImageUploaderComponent,
                     ProfileImageUploaderComponent,
                     CalendarComponent,
@@ -5286,7 +6341,11 @@ BBSFControlsModule.decorators = [
                     RadioButtonComponent,
                     FormComponent,
                     PagingComponent,
-                    ConfirmationModalComponent
+                    ConfirmationModalComponent,
+                    RepeaterComponent,
+                    RepeaterFieldBuilderComponent,
+                    NgTemplateNameDirective,
+                    RepeaterItemFieldComponent,
                 ]
             },] }
 ];
@@ -5321,75 +6380,6 @@ class CustomValidator {
     }
 }
 
-var ForceDirection;
-(function (ForceDirection) {
-    ForceDirection[ForceDirection["English"] = 1] = "English";
-    ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
-})(ForceDirection || (ForceDirection = {}));
-
-class DatePickerOptions {
-    constructor() {
-        /**  to set type of view  if DatePicker is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
-        /**To set  First Day Of Week  to DatePicker */
-        this.FirstDayOfWeek = 1;
-        /**To set PickerType to DatePicker  is Calendar or Timer Or Both */
-        this.PickerType = PickerType.Calendar;
-        /**To set StartView to DatePicker  is Year or Month Or Multi-Year */
-        this.StartView = StartView.Month;
-        /**To set SelectMode to DatePicker  is Single or Range */
-        this.SelectMode = SelectMode.Single;
-        this.ForceDirection = ForceDirection.English;
-    }
-}
-
-class RangeNumber {
-}
-
-var IconPosition;
-(function (IconPosition) {
-    IconPosition[IconPosition["left"] = 1] = "left";
-    IconPosition[IconPosition["right"] = 2] = "right";
-})(IconPosition || (IconPosition = {}));
-
-class TextBoxOptions {
-    constructor() {
-        /** set Range Number to Textbox with type number with From-Value and To-value*/
-        this.NumberRange = new RangeNumber();
-        /**Prevent AutoComplete of textbox*/
-        this.AutoComplete = "off";
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /** to set Direction of textbox  if textbox is Arabic or English  */
-        this.ForceDirection = null;
-        /** Set Type of TextBox ("text","password","email","number") */
-        this.Type = InputType.Text;
-        this.IconPosition = IconPosition.left;
-        this.NoMargin = false;
-        this.ValidationRules = [];
-    }
-}
-
-class FileUploadOptions {
-    constructor() {
-        /** Ability to set  FileInput required */
-        this.IsMultipleFile = false;
-        /** Sets  boolean Value to Show IsDropZone Or Not   */
-        this.IsDropZone = false;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-    }
-}
-
 class MultiLingualTextBoxOptions {
     constructor() {
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
@@ -5411,18 +6401,6 @@ class MultiLingualTextBoxOptions {
 class Attribute {
 }
 
-class TextAreaOptions {
-    constructor() {
-        /**  to set type of view  if TextArea is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /** to set Direction of TextArea  if TextArea is Arabic or English  */
-        this.ForceDirection = ForceDirection.English;
-    }
-}
-
 class MultiLingualTextAreaOptions {
     constructor() {
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
@@ -5453,60 +6431,6 @@ class CheckBoxOptions {
 class DropdownListItem {
 }
 
-class DropdownOptions {
-    constructor() {
-        /** Disable Bootstrap DropdownList */
-        this.DisableBootstrapSelect = false;
-        /**  to set type of view  if DropdownList is Vertical or Horizontal */
-        this.ViewType = null;
-        /**  To Set Custom Validation*/
-        this.CustomValidation = [];
-        /** Set key for item in  DropdownList  */
-        this.ItemTempletkey = "key";
-        /** Set value for item in  DropdownList  */
-        this.ItemTempletvalue = "value";
-        this.ForceDirection = ForceDirection.English;
-    }
-}
-
-class PhoneOptions {
-    constructor() {
-        /**
-      *   Represent Css classes to Phonebox
-      */
-        this.ExtraClasses = "form-control bnsights-control";
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-       */
-        this.CustomValidation = [];
-        /**Set List Of Countries As Preferred Countries*/
-        this.PreferredCountries = [];
-        /**  to set type of view  if Phonebox is Vertical or Horizontal */
-        this.ViewType = null;
-        this.ForceDirection = ForceDirection.English;
-    }
-}
-
-class ToggleSlideOptions {
-    constructor() {
-        this.ViewType = null;
-        this.ForceDirection = ForceDirection.English;
-    }
-}
-
-class HtmlEditorOptions {
-    constructor() {
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /** to set Direction of HtmlEditor  if HtmlEditor is Arabic or English  */
-        this.ForceDirection = ForceDirection.English;
-        /** Set Height For  */
-        this.Height = 150;
-    }
-}
-
 class MultiLingualHtmlEditorOptions {
     constructor() {
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
@@ -5523,32 +6447,6 @@ class MultiLingualHtmlEditorOptions {
     }
 }
 
-var ImageType;
-(function (ImageType) {
-    ImageType["ImageTypes"] = "image/png,image/bmp,image/jpeg";
-    ImageType["PNG"] = "image/png";
-    ImageType["JPG"] = "image/jpeg";
-    ImageType["JPEG"] = "image/jpeg";
-    ImageType["SVG"] = "image/svg+xml";
-    ImageType["None"] = "";
-})(ImageType || (ImageType = {}));
-
-class ImageUploadOptions {
-    constructor() {
-        /** Allow to Upload Multiple File  */
-        this.IsMultiple = false;
-        /** Allow to Use Drop Zone  */
-        this.AllowDropZone = false;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
-        /**  to set type of view  if FileInput is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Set List of Custom Attribute to FileInput  */
-        this.FileUploadAcceptsTypes = [ImageType.ImageTypes];
-    }
-}
-
 class ProfileImageUploadOptions {
     constructor() {
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
@@ -5609,16 +6507,6 @@ class CalendarOptions {
 class CalendarEventDTO {
 }
 
-class MapAutoCompleteOptions {
-    constructor() {
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /**  to set type of view  if MapAutoComplete is Vertical or Horizontal */
-        this.ViewType = null;
-    }
-}
-
 class AutocompleteOptions {
     constructor() {
         /**
@@ -5816,6 +6704,19 @@ class ConfirmationModalOptions {
     }
 }
 
+class RepeaterField {
+}
+
+class RepeaterOptions {
+    constructor() {
+        this.MinRequiredItems = 1;
+        this.AddButtonText = "Add";
+        this.DeleteButtonText = "Delete";
+        this.RepeaterValue = [];
+        this.RepeaterStructure = [];
+    }
+}
+
 var MenuListType;
 (function (MenuListType) {
     MenuListType[MenuListType["AdminType"] = 1] = "AdminType";
@@ -6139,5 +7040,5 @@ var FileType;
  * Generated bundle index. Do not edit.
  */
 
-export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, BBSFControlsModule, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxOptions, ConfirmationModalOptions, ControlLayout, ControlUtility, Country, CustomValidation, CustomValidator, DatePickerOptions, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormOptions, GlobalSettings, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, InputType, Insert, LanguageMode, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorOptions, MultiLingualTextAreaOptions, MultiLingualTextBoxOptions, MultipleFileUploadModel, OnPagingFiltersChangeService, PagingActionMode, PagingDTO, PagingOptions, Para, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfilePictureDTO, RadioButtonItem, RadioButtonOptions, RangeNumber, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputDTO, TagsInputOptions, TextAreaOptions, TextBoxOptions, ToggleSlideOptions, UploadPersonalImage, environment, options, ɵ0, DateInputComponent as ɵa, FileUploadComponent as ɵb, MultiLingualTextBoxComponent as ɵc, TextboxComponent as ɵd, TextAreaComponent as ɵe, MultiLingualTextAreaComponent as ɵf, CheckBoxComponent as ɵg, DropdownListComponent as ɵh, PhoneComponent as ɵi, ToggleslideComponent as ɵj, HtmlEditorComponent as ɵk, MultiLingualHtmlEditorComponent as ɵl, ImageUploaderComponent as ɵm, ProfileImageUploaderComponent as ɵn, CalendarComponent as ɵo, MapAutoCompleteComponent as ɵp, AutocompleteTextBoxComponent as ɵq, TagsInputComponent as ɵr, PagingComponent as ɵs, JwPaginationComponent as ɵt, RadioButtonComponent as ɵu, FormComponent as ɵv, ConfirmationModalComponent as ɵw };
+export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageType, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, PropertyLocation, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0 };
 //# sourceMappingURL=bnsights-bbsf-controls.js.map