ng-ipa-library 1.3.8 → 1.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/generate-form/generate-form.component.mjs +26 -5
- package/esm2020/lib/ipa-form/file-upload/file-upload.component.mjs +23 -10
- package/esm2020/lib/ipa-form/ipa-form.service.mjs +13 -5
- package/fesm2015/ng-ipa-library.mjs +52 -15
- package/fesm2015/ng-ipa-library.mjs.map +1 -1
- package/fesm2020/ng-ipa-library.mjs +57 -15
- package/fesm2020/ng-ipa-library.mjs.map +1 -1
- package/lib/generate-form/generate-form.component.d.ts +1 -0
- package/lib/ipa-form/file-upload/file-upload.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -144,10 +144,18 @@ class IPAFormService {
|
|
|
144
144
|
required: isArabic ? 'هذا الحقل مطلوب' : 'this field required',
|
|
145
145
|
pattern: `${validatorValue.message}`,
|
|
146
146
|
Email: 'خطأ في البريد الالكتروني (example@ipa.edu.sa)',
|
|
147
|
-
maxlength:
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
147
|
+
maxlength: isArabic
|
|
148
|
+
? `تجاوز عدد الحقل المسموح بها (${validatorValue.requiredLength}) حرف`
|
|
149
|
+
: `this field is more than (${validatorValue.requiredLength}) letter`,
|
|
150
|
+
minlength: isArabic
|
|
151
|
+
? `على الأقل عدد ${validatorValue.requiredLength} حرف`
|
|
152
|
+
: `this field is less than (${validatorValue.requiredLength}) letter`,
|
|
153
|
+
min: isArabic
|
|
154
|
+
? `رقم اكبر من أو يساوي ${validatorValue.min}`
|
|
155
|
+
: `number more than or equal (${validatorValue.min})`,
|
|
156
|
+
max: isArabic
|
|
157
|
+
? `رقم اصغر من أو يساوي ${validatorValue.max}`
|
|
158
|
+
: `number less than or equal (${validatorValue.min})`,
|
|
151
159
|
ngbDate: this.getNgbDatepickerErrorMsg(validatorValue),
|
|
152
160
|
checkId: 'رقم الهوية أو الاقامة غير صحيح',
|
|
153
161
|
link: 'الرابط غير صحيح (http://google.com)',
|
|
@@ -601,6 +609,7 @@ class FileUploadComponent {
|
|
|
601
609
|
// private authService: AuthService,
|
|
602
610
|
toastrService) {
|
|
603
611
|
this.toastrService = toastrService;
|
|
612
|
+
this.isArabicForm = true;
|
|
604
613
|
this.label = '';
|
|
605
614
|
this.required = false;
|
|
606
615
|
this.acceptedFiles = '';
|
|
@@ -618,7 +627,7 @@ class FileUploadComponent {
|
|
|
618
627
|
this.currentFiles = [];
|
|
619
628
|
}
|
|
620
629
|
ngOnInit() {
|
|
621
|
-
this.label = 'رفع ' + this.label;
|
|
630
|
+
this.label = this.isArabicForm ? 'رفع ' : 'Upload ' + this.label;
|
|
622
631
|
this.config = {
|
|
623
632
|
url: this.apiUrl,
|
|
624
633
|
method: this.method,
|
|
@@ -628,12 +637,19 @@ class FileUploadComponent {
|
|
|
628
637
|
maxFilesize: this.maxFileSize,
|
|
629
638
|
maxFiles: this.multiple,
|
|
630
639
|
uploadMultiple: this.multiple > 1,
|
|
631
|
-
dictInvalidFileType:
|
|
632
|
-
|
|
633
|
-
|
|
640
|
+
dictInvalidFileType: this.isArabicForm
|
|
641
|
+
? 'صيغة الملف غير مسموح بها'
|
|
642
|
+
: 'the file format is not allowed',
|
|
643
|
+
dictFileTooBig: this.isArabicForm
|
|
644
|
+
? 'الحجم تجاوز الحد المسموح'
|
|
645
|
+
: `the file size must be less than or equal (${this.maxFileSize}) MB`,
|
|
646
|
+
dictMaxFilesExceeded: this.isArabicForm
|
|
647
|
+
? 'الرجاء حذف الملفات الموجودة حاليا لتتمكن من رفع هذا الملف'
|
|
648
|
+
: 'Please delete existing files to be able to upload this file',
|
|
634
649
|
acceptedFiles: this.acceptedFiles,
|
|
635
650
|
autoProcessQueue: this.autoUpload,
|
|
636
651
|
previewTemplate: '<span></span>',
|
|
652
|
+
dictRemoveFile: '',
|
|
637
653
|
};
|
|
638
654
|
}
|
|
639
655
|
operationCompleted(e) {
|
|
@@ -648,7 +664,10 @@ class FileUploadComponent {
|
|
|
648
664
|
if (file.status === 'success') {
|
|
649
665
|
this.filesAdded.push(file);
|
|
650
666
|
}
|
|
651
|
-
|
|
667
|
+
const message = this.isArabicForm
|
|
668
|
+
? 'تم تحميل المرفقات بنجاح'
|
|
669
|
+
: 'Attachments uploaded successfully';
|
|
670
|
+
this.toastrService.success(message);
|
|
652
671
|
}
|
|
653
672
|
onUploadError(e) {
|
|
654
673
|
if (e[1]) {
|
|
@@ -681,13 +700,15 @@ class FileUploadComponent {
|
|
|
681
700
|
}
|
|
682
701
|
}
|
|
683
702
|
FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
|
|
684
|
-
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FileUploadComponent, selector: "ipa-file-upload", inputs: { label: "label", required: "required", acceptedFiles: "acceptedFiles", multiple: "multiple", maxFileSize: "maxFileSize", method: "method", autoUpload: "autoUpload", apiUrl: "apiUrl", authorization: "authorization" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, viewQueries: [{ propertyName: "dropzoneDir", first: true, predicate: DropzoneDirective, descendants: true }], ngImport: i0, template: "<div class=\"file-upload\">\r\n <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n (addedFile)=\"fileWasAdded($event)\">\r\n </div>\r\n <div class=\"upload-btn-wrapper\">\r\n <div>\r\n <div class=\"subtitle mb-2\">\r\n {{label}}\r\n <span *ngIf=\"required\" class=\"required\">*</span>\r\n </div>\r\n <hr>\r\n <span style=\"font-size: 12px;\"
|
|
703
|
+
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FileUploadComponent, selector: "ipa-file-upload", inputs: { isArabicForm: "isArabicForm", label: "label", required: "required", acceptedFiles: "acceptedFiles", multiple: "multiple", maxFileSize: "maxFileSize", method: "method", autoUpload: "autoUpload", apiUrl: "apiUrl", authorization: "authorization" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, viewQueries: [{ propertyName: "dropzoneDir", first: true, predicate: DropzoneDirective, descendants: true }], ngImport: i0, template: "<div class=\"file-upload\">\r\n <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n (addedFile)=\"fileWasAdded($event)\">\r\n </div>\r\n <div class=\"upload-btn-wrapper\">\r\n <div>\r\n <div class=\"subtitle mb-2\">\r\n {{label}}\r\n <span *ngIf=\"required\" class=\"required\">*</span>\r\n </div>\r\n <hr>\r\n <span style=\"font-size: 12px;\">{{isArabicForm? '\u0642\u0645 \u0628\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0647\u0646\u0627' : 'drag or click here'}}</span>\r\n <i class=\"fas fa-upload upload-icon mr-2\"></i>\r\n </div>\r\n <div *ngIf=\"acceptedFiles.length > 0\" class=\"allowed-extensions\">\r\n {{isArabicForm? '\u0627\u0644\u0635\u064A\u063A\u0629 \u0627\u0644\u0645\u0633\u0645\u0648\u062D \u0628\u0647\u0627:' : 'Allowed format:'}} \r\n <span class=\"extensions\">{{ acceptedFiles }}</span>\r\n </div>\r\n <div class=\"allowed-extensions\">\r\n {{isArabicForm? '\u0627\u0642\u0635\u0649 \u062D\u062C\u0645 \u0644\u0644\u0645\u0631\u0641\u0642:' : 'Attachment Size:'}}\r\n <span class=\"extensions\">{{ maxFileSize }} MB</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div id=\"attachment-status\" style=\"text-align: center; margin-top:10px;\">\r\n <span style=\"font-size: 14px; margin: auto; font-weight:bold;\" *ngFor=\"let file of currentFiles\">\r\n {{ file.name }} <i (click)=\"deleteFile(file)\" class=\"fas fa-trash\"\r\n style=\"color:firebrick; cursor: pointer;\"></i>\r\n <br>\r\n </span>\r\n <ul class=\"list-unstyled\">\r\n <li class=\"text-danger\" style=\"font-size: 12px;\" *ngFor=\"let error of errors\">{{error}}</li>\r\n </ul>\r\n</div>", styles: [".subtitle{border-bottom:none;display:block;line-height:2}.file-upload{border:dashed 1px #ccc;display:block;min-height:150px;border-radius:15px;width:350px;cursor:pointer;position:relative;margin:auto}.upload-overlay{position:absolute;width:100%;height:100%}.upload-btn-wrapper{text-align:center}.upload-icon{margin-right:5px}.list-unstyled{margin:10px!important;padding:14px!important;list-style:none}.allowed-extensions{color:#4d7297}.required{color:#dc3545;font-size:20px}\n"], directives: [{ type: i2$2.DropzoneDirective, selector: "[dropzone]", inputs: ["disabled", "dropzone"], outputs: ["init", "error", "success", "sending", "canceled", "complete", "processing", "drop", "dragStart", "dragEnd", "dragEnter", "dragOver", "dragLeave", "thumbnail", "addedFile", "addedFiles", "removedFile", "uploadProgress", "maxFilesReached", "maxFilesExceeded", "errorMultiple", "successMultiple", "sendingMultiple", "canceledMultiple", "completeMultiple", "processingMultiple", "reset", "queueComplete", "totalUploadProgress"], exportAs: ["ngxDropzone"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
685
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
686
705
|
type: Component,
|
|
687
|
-
args: [{ selector: 'ipa-file-upload', template: "<div class=\"file-upload\">\r\n <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n (addedFile)=\"fileWasAdded($event)\">\r\n </div>\r\n <div class=\"upload-btn-wrapper\">\r\n <div>\r\n <div class=\"subtitle mb-2\">\r\n {{label}}\r\n <span *ngIf=\"required\" class=\"required\">*</span>\r\n </div>\r\n <hr>\r\n <span style=\"font-size: 12px;\"
|
|
706
|
+
args: [{ selector: 'ipa-file-upload', template: "<div class=\"file-upload\">\r\n <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n (addedFile)=\"fileWasAdded($event)\">\r\n </div>\r\n <div class=\"upload-btn-wrapper\">\r\n <div>\r\n <div class=\"subtitle mb-2\">\r\n {{label}}\r\n <span *ngIf=\"required\" class=\"required\">*</span>\r\n </div>\r\n <hr>\r\n <span style=\"font-size: 12px;\">{{isArabicForm? '\u0642\u0645 \u0628\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0647\u0646\u0627' : 'drag or click here'}}</span>\r\n <i class=\"fas fa-upload upload-icon mr-2\"></i>\r\n </div>\r\n <div *ngIf=\"acceptedFiles.length > 0\" class=\"allowed-extensions\">\r\n {{isArabicForm? '\u0627\u0644\u0635\u064A\u063A\u0629 \u0627\u0644\u0645\u0633\u0645\u0648\u062D \u0628\u0647\u0627:' : 'Allowed format:'}} \r\n <span class=\"extensions\">{{ acceptedFiles }}</span>\r\n </div>\r\n <div class=\"allowed-extensions\">\r\n {{isArabicForm? '\u0627\u0642\u0635\u0649 \u062D\u062C\u0645 \u0644\u0644\u0645\u0631\u0641\u0642:' : 'Attachment Size:'}}\r\n <span class=\"extensions\">{{ maxFileSize }} MB</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div id=\"attachment-status\" style=\"text-align: center; margin-top:10px;\">\r\n <span style=\"font-size: 14px; margin: auto; font-weight:bold;\" *ngFor=\"let file of currentFiles\">\r\n {{ file.name }} <i (click)=\"deleteFile(file)\" class=\"fas fa-trash\"\r\n style=\"color:firebrick; cursor: pointer;\"></i>\r\n <br>\r\n </span>\r\n <ul class=\"list-unstyled\">\r\n <li class=\"text-danger\" style=\"font-size: 12px;\" *ngFor=\"let error of errors\">{{error}}</li>\r\n </ul>\r\n</div>", styles: [".subtitle{border-bottom:none;display:block;line-height:2}.file-upload{border:dashed 1px #ccc;display:block;min-height:150px;border-radius:15px;width:350px;cursor:pointer;position:relative;margin:auto}.upload-overlay{position:absolute;width:100%;height:100%}.upload-btn-wrapper{text-align:center}.upload-icon{margin-right:5px}.list-unstyled{margin:10px!important;padding:14px!important;list-style:none}.allowed-extensions{color:#4d7297}.required{color:#dc3545;font-size:20px}\n"] }]
|
|
688
707
|
}], ctorParameters: function () { return [{ type: i1.ToastrService }]; }, propDecorators: { dropzoneDir: [{
|
|
689
708
|
type: ViewChild,
|
|
690
709
|
args: [DropzoneDirective, { static: false }]
|
|
710
|
+
}], isArabicForm: [{
|
|
711
|
+
type: Input
|
|
691
712
|
}], label: [{
|
|
692
713
|
type: Input
|
|
693
714
|
}], required: [{
|
|
@@ -779,6 +800,7 @@ class GenerateFormComponent {
|
|
|
779
800
|
this.fileDeleted = new EventEmitter();
|
|
780
801
|
}
|
|
781
802
|
ngOnInit() {
|
|
803
|
+
this.changeDataValueForEngForm();
|
|
782
804
|
this.createForm();
|
|
783
805
|
}
|
|
784
806
|
getFormControls(formControlName) {
|
|
@@ -800,15 +822,35 @@ class GenerateFormComponent {
|
|
|
800
822
|
this.generateForm.controls[formControlName].patchValue(null);
|
|
801
823
|
this.fileDeleted.emit(event);
|
|
802
824
|
}
|
|
825
|
+
changeDataValueForEngForm() {
|
|
826
|
+
this.form.columns = this.form.columns.map((column) => {
|
|
827
|
+
return {
|
|
828
|
+
...column,
|
|
829
|
+
data: column.data?.map((item) => {
|
|
830
|
+
const value = item[column.textField];
|
|
831
|
+
return {
|
|
832
|
+
...item,
|
|
833
|
+
[column.textField]: this.isArabicForm
|
|
834
|
+
? value.split(',')[0]
|
|
835
|
+
: value.split(',')[1],
|
|
836
|
+
};
|
|
837
|
+
}),
|
|
838
|
+
};
|
|
839
|
+
});
|
|
840
|
+
}
|
|
803
841
|
createForm() {
|
|
804
842
|
this.form.columns.forEach((column) => {
|
|
805
843
|
if (column.type === 'checkbox') {
|
|
806
844
|
this.addCheckboxControl(column);
|
|
807
845
|
}
|
|
808
846
|
else {
|
|
809
|
-
this.generateForm.addControl(column.formControlName, new FormControl(null, [
|
|
847
|
+
this.generateForm.addControl(column.formControlName, new FormControl(column.type === 'file' && column.multipleFile > 1 ? [] : null, [
|
|
810
848
|
column.required ? Validators.required : Validators.nullValidator,
|
|
811
|
-
|
|
849
|
+
column.validationPattern
|
|
850
|
+
? Validators.pattern(column.validationPattern)
|
|
851
|
+
: Validators.nullValidator,
|
|
852
|
+
['select', 'radio', 'file', 'recaptcha'].indexOf(column.type) <=
|
|
853
|
+
-1
|
|
812
854
|
? Validators.maxLength(column.size)
|
|
813
855
|
: Validators.nullValidator,
|
|
814
856
|
column.type === 'number'
|
|
@@ -845,10 +887,10 @@ class GenerateFormComponent {
|
|
|
845
887
|
}
|
|
846
888
|
}
|
|
847
889
|
GenerateFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GenerateFormComponent, deps: [{ token: IPAFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
848
|
-
GenerateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"generateForm\">\r\n <ng-container *ngFor=\"let column of form.columns\">\r\n <div [ngSwitch]=\"column.type\">\r\n <!-- TEXTAREA -->\r\n <div *ngSwitchCase=\"'textArea'\">\r\n <ipa-textarea-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n [
|
|
890
|
+
GenerateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"generateForm\">\r\n <ng-container *ngFor=\"let column of form.columns\">\r\n <div [ngSwitch]=\"column.type\">\r\n <!-- TEXTAREA -->\r\n <div *ngSwitchCase=\"'textArea'\">\r\n <ipa-textarea-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n [isArabicForm]=\"isArabicForm\">\r\n </ipa-textarea-input>\r\n </div>\r\n\r\n <!-- DROP DOWN LIST -->\r\n <div *ngSwitchCase=\"'select'\">\r\n <ipa-dropdown-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\"\r\n [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n </ipa-dropdown-input>\r\n </div>\r\n\r\n <!-- CHECKBOX -->\r\n <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n type=\"checkbox\" formControlName=\"checkbox\">\r\n <label class=\"form-check-label\"\r\n [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n {{control.value[column.textField!]}}\r\n </label>\r\n </div>\r\n </ng-container>\r\n <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n {{errorMsg}}\r\n </div>\r\n </div>\r\n\r\n <!-- RADIO -->\r\n <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n <div class=\"form-check {{column.inputClasses}}\">\r\n <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\"\r\n type=\"radio\" [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n {{item[column.textField!]}}\r\n </label>\r\n </div>\r\n </ng-container>\r\n <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n {{errorMsg}}\r\n </div>\r\n </div>\r\n\r\n <!-- FILE UPLOAD -->\r\n <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n <ipa-file-upload [isArabicForm]=\"isArabicForm\" [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n [acceptedFiles]=\"column.acceptedFiles!\" [multiple]=\"column.multipleFile!\"\r\n [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\" [autoUpload]=\"column.autoUploadFile!\"\r\n [apiUrl]=\"column.apiUrl?? 'apiUrl' \" [authorization]=\"column.authorization!\" ngDefaultControl\r\n [formControlName]=\"column.formControlName\" (successUpload)=\"SuccessUpload($event)\"\r\n (fileAdded)=\"FileAdded($event, column.formControlName)\"\r\n (fileDeleted)=\"FileDeleted($event, column.formControlName)\">\r\n </ipa-file-upload>\r\n {{generateForm.controls[column.formControlName].value | json}}\r\n </div>\r\n\r\n <!-- recaptcha -->\r\n <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n formControlName=\"{{column.formControlName}}\">\r\n </ipa-recaptcha>\r\n </div>\r\n\r\n <!-- DEFAULT -->\r\n <div *ngSwitchDefault>\r\n <ipa-text-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [type]=\"column.type\" [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n [required]=\"column.required\"\r\n [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n [isArabicForm]=\"isArabicForm\">\r\n </ipa-text-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</form>", styles: [""], components: [{ type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["id", "placeholder", "label", "required", "patternErrorMsg", "pattern", "classes", "containerClasses", "isArabicForm"] }, { type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "label", "items", "textField", "valueField", "required", "firstItemLabel", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }, { type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["isArabicForm", "label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }, { type: TextInputComponent, selector: "ipa-text-input", inputs: ["id", "type", "placeholder", "label", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses", "isArabicForm"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "json": i3$1.JsonPipe } });
|
|
849
891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GenerateFormComponent, decorators: [{
|
|
850
892
|
type: Component,
|
|
851
|
-
args: [{ selector: 'ipa-generate-form', template: "<form [formGroup]=\"generateForm\">\r\n <ng-container *ngFor=\"let column of form.columns\">\r\n <div [ngSwitch]=\"column.type\">\r\n <!-- TEXTAREA -->\r\n <div *ngSwitchCase=\"'textArea'\">\r\n <ipa-textarea-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n [
|
|
893
|
+
args: [{ selector: 'ipa-generate-form', template: "<form [formGroup]=\"generateForm\">\r\n <ng-container *ngFor=\"let column of form.columns\">\r\n <div [ngSwitch]=\"column.type\">\r\n <!-- TEXTAREA -->\r\n <div *ngSwitchCase=\"'textArea'\">\r\n <ipa-textarea-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n [isArabicForm]=\"isArabicForm\">\r\n </ipa-textarea-input>\r\n </div>\r\n\r\n <!-- DROP DOWN LIST -->\r\n <div *ngSwitchCase=\"'select'\">\r\n <ipa-dropdown-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\"\r\n [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n </ipa-dropdown-input>\r\n </div>\r\n\r\n <!-- CHECKBOX -->\r\n <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n type=\"checkbox\" formControlName=\"checkbox\">\r\n <label class=\"form-check-label\"\r\n [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n {{control.value[column.textField!]}}\r\n </label>\r\n </div>\r\n </ng-container>\r\n <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n {{errorMsg}}\r\n </div>\r\n </div>\r\n\r\n <!-- RADIO -->\r\n <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n <div class=\"form-check {{column.inputClasses}}\">\r\n <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\"\r\n type=\"radio\" [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n {{item[column.textField!]}}\r\n </label>\r\n </div>\r\n </ng-container>\r\n <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n {{errorMsg}}\r\n </div>\r\n </div>\r\n\r\n <!-- FILE UPLOAD -->\r\n <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n <ipa-file-upload [isArabicForm]=\"isArabicForm\" [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n [acceptedFiles]=\"column.acceptedFiles!\" [multiple]=\"column.multipleFile!\"\r\n [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\" [autoUpload]=\"column.autoUploadFile!\"\r\n [apiUrl]=\"column.apiUrl?? 'apiUrl' \" [authorization]=\"column.authorization!\" ngDefaultControl\r\n [formControlName]=\"column.formControlName\" (successUpload)=\"SuccessUpload($event)\"\r\n (fileAdded)=\"FileAdded($event, column.formControlName)\"\r\n (fileDeleted)=\"FileDeleted($event, column.formControlName)\">\r\n </ipa-file-upload>\r\n {{generateForm.controls[column.formControlName].value | json}}\r\n </div>\r\n\r\n <!-- recaptcha -->\r\n <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n formControlName=\"{{column.formControlName}}\">\r\n </ipa-recaptcha>\r\n </div>\r\n\r\n <!-- DEFAULT -->\r\n <div *ngSwitchDefault>\r\n <ipa-text-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n [type]=\"column.type\" [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n [required]=\"column.required\"\r\n [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n [isArabicForm]=\"isArabicForm\">\r\n </ipa-text-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</form>", styles: [""] }]
|
|
852
894
|
}], ctorParameters: function () { return [{ type: IPAFormService }]; }, propDecorators: { generateForm: [{
|
|
853
895
|
type: Input
|
|
854
896
|
}], form: [{
|