ng-ipa-library 1.2.10 → 1.3.2
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 +18 -14
- package/esm2020/lib/ipa-form/datepicker/datepicker.component.mjs +6 -3
- package/esm2020/lib/ipa-form/dropdown-input/dropdown-input.component.mjs +10 -4
- package/esm2020/lib/ipa-form/ipa-form.service.mjs +5 -5
- package/esm2020/lib/ipa-form/recaptcha/recaptcha.component.mjs +1 -1
- package/esm2020/lib/ipa-form/text-input/text-input.component.mjs +13 -6
- package/esm2020/lib/ipa-form/textarea-input/textarea-input.component.mjs +13 -6
- package/esm2020/lib/models/generateForm.model.mjs +1 -1
- package/fesm2015/ng-ipa-library.mjs +59 -32
- package/fesm2015/ng-ipa-library.mjs.map +1 -1
- package/fesm2020/ng-ipa-library.mjs +59 -32
- package/fesm2020/ng-ipa-library.mjs.map +1 -1
- package/lib/generate-form/generate-form.component.d.ts +4 -3
- package/lib/ipa-form/datepicker/datepicker.component.d.ts +2 -1
- package/lib/ipa-form/dropdown-input/dropdown-input.component.d.ts +3 -1
- package/lib/ipa-form/ipa-form.service.d.ts +1 -1
- package/lib/ipa-form/recaptcha/recaptcha.component.d.ts +1 -1
- package/lib/ipa-form/text-input/text-input.component.d.ts +8 -5
- package/lib/ipa-form/textarea-input/textarea-input.component.d.ts +8 -5
- package/lib/models/generateForm.model.d.ts +4 -2
- package/package.json +1 -1
|
@@ -105,11 +105,11 @@ class IPAFormService {
|
|
|
105
105
|
}
|
|
106
106
|
return isValid || !value ? null : { checkId: true };
|
|
107
107
|
}
|
|
108
|
-
getErrorMessage(control, patternErrorMsg = '') {
|
|
108
|
+
getErrorMessage(control, patternErrorMsg = '', isArabic) {
|
|
109
109
|
for (const propertyName in control?.errors) {
|
|
110
110
|
if (control?.errors.hasOwnProperty(propertyName) &&
|
|
111
111
|
(control.touched || control.dirty)) {
|
|
112
|
-
return this.getValidatorErrorMessage(propertyName, control.errors[propertyName], patternErrorMsg);
|
|
112
|
+
return this.getValidatorErrorMessage(propertyName, control.errors[propertyName], patternErrorMsg, isArabic);
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
return null;
|
|
@@ -136,12 +136,12 @@ class IPAFormService {
|
|
|
136
136
|
momentHijri.locale('en');
|
|
137
137
|
return momentHijri().format('iYYYY/iMM/iDD');
|
|
138
138
|
}
|
|
139
|
-
getValidatorErrorMessage(validatorName, validatorValue, patternErrorMsg) {
|
|
139
|
+
getValidatorErrorMessage(validatorName, validatorValue, patternErrorMsg, isArabic) {
|
|
140
140
|
if (validatorName === 'pattern') {
|
|
141
141
|
validatorValue = this.addPatternMsg(validatorValue, patternErrorMsg);
|
|
142
142
|
}
|
|
143
143
|
const config = {
|
|
144
|
-
required: 'هذا الحقل مطلوب',
|
|
144
|
+
required: isArabic ? 'هذا الحقل مطلوب' : 'this field required',
|
|
145
145
|
pattern: `${validatorValue.message}`,
|
|
146
146
|
Email: 'خطأ في البريد الالكتروني (example@ipa.edu.sa)',
|
|
147
147
|
maxlength: `تجاوز عدد الحقل المسموح بها (${validatorValue.requiredLength}) حرف`,
|
|
@@ -309,9 +309,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
309
309
|
}], ctorParameters: function () { return [{ type: i2.NgbDateParserFormatter }]; } });
|
|
310
310
|
|
|
311
311
|
class TextInputComponent {
|
|
312
|
-
constructor(validationService, controlDir) {
|
|
312
|
+
constructor(validationService, controlDir, cd) {
|
|
313
313
|
this.validationService = validationService;
|
|
314
314
|
this.controlDir = controlDir;
|
|
315
|
+
this.cd = cd;
|
|
315
316
|
this.type = 'text';
|
|
316
317
|
this.placeholder = 'please enter text';
|
|
317
318
|
this.label = 'text input';
|
|
@@ -319,9 +320,13 @@ class TextInputComponent {
|
|
|
319
320
|
this.patternErrorMsg = 'invalid pattern';
|
|
320
321
|
this.onlyNumber = false;
|
|
321
322
|
this.pattern = '';
|
|
323
|
+
this.isArabicForm = true;
|
|
322
324
|
this.formControl = new FormControl('');
|
|
323
325
|
this.controlDir.valueAccessor = this;
|
|
324
326
|
}
|
|
327
|
+
ngAfterContentChecked() {
|
|
328
|
+
this.cd.detectChanges();
|
|
329
|
+
}
|
|
325
330
|
ngOnInit() {
|
|
326
331
|
const control = this.controlDir.control;
|
|
327
332
|
const validators = control?.validator ? [control.validator] : [];
|
|
@@ -352,18 +357,18 @@ class TextInputComponent {
|
|
|
352
357
|
}
|
|
353
358
|
}
|
|
354
359
|
get errorMessage() {
|
|
355
|
-
this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg);
|
|
360
|
+
this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
|
|
356
361
|
return this.errorMsg;
|
|
357
362
|
}
|
|
358
363
|
}
|
|
359
|
-
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextInputComponent, selector: "ipa-text-input", inputs: { id: "id", type: "type", placeholder: "placeholder", label: "label", required: "required", patternErrorMsg: "patternErrorMsg", onlyNumber: "onlyNumber", pattern: "pattern", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n (blur)=\"onTouched()\" (input)=\"checkIsNumber($event)\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], directives: [{ 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: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
364
|
+
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
365
|
+
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextInputComponent, selector: "ipa-text-input", inputs: { id: "id", type: "type", placeholder: "placeholder", label: "label", required: "required", patternErrorMsg: "patternErrorMsg", onlyNumber: "onlyNumber", pattern: "pattern", classes: "classes", containerClasses: "containerClasses", isArabicForm: "isArabicForm" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n (blur)=\"onTouched()\" (input)=\"checkIsNumber($event)\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], directives: [{ 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: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
361
366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
362
367
|
type: Component,
|
|
363
368
|
args: [{ selector: 'ipa-text-input', template: "<div class=\"form-floating {{containerClasses}}\">\r\n <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n (blur)=\"onTouched()\" (input)=\"checkIsNumber($event)\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""] }]
|
|
364
369
|
}], ctorParameters: function () { return [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
|
|
365
370
|
type: Self
|
|
366
|
-
}] }]; }, propDecorators: { input: [{
|
|
371
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
|
|
367
372
|
type: ViewChild,
|
|
368
373
|
args: ['input', { static: true }]
|
|
369
374
|
}], id: [{
|
|
@@ -386,20 +391,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
386
391
|
type: Input
|
|
387
392
|
}], containerClasses: [{
|
|
388
393
|
type: Input
|
|
394
|
+
}], isArabicForm: [{
|
|
395
|
+
type: Input
|
|
389
396
|
}] } });
|
|
390
397
|
|
|
391
398
|
class TextareaInputComponent {
|
|
392
|
-
constructor(validationService, controlDir) {
|
|
399
|
+
constructor(validationService, controlDir, cd) {
|
|
393
400
|
this.validationService = validationService;
|
|
394
401
|
this.controlDir = controlDir;
|
|
402
|
+
this.cd = cd;
|
|
395
403
|
this.input = new ElementRef(null);
|
|
396
404
|
this.placeholder = 'please enter text';
|
|
397
405
|
this.label = 'textarea input';
|
|
398
406
|
this.required = false;
|
|
399
407
|
this.patternErrorMsg = 'invalid pattern';
|
|
408
|
+
this.isArabicForm = true;
|
|
400
409
|
this.formControl = new FormControl('');
|
|
401
410
|
this.controlDir.valueAccessor = this;
|
|
402
411
|
}
|
|
412
|
+
ngAfterContentChecked() {
|
|
413
|
+
this.cd.detectChanges();
|
|
414
|
+
}
|
|
403
415
|
ngOnInit() {
|
|
404
416
|
const control = this.controlDir.control;
|
|
405
417
|
const validators = control?.validator ? [control.validator] : [];
|
|
@@ -419,18 +431,18 @@ class TextareaInputComponent {
|
|
|
419
431
|
this.onTouched = fn;
|
|
420
432
|
}
|
|
421
433
|
get errorMessage() {
|
|
422
|
-
this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg);
|
|
434
|
+
this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
|
|
423
435
|
return this.errorMsg;
|
|
424
436
|
}
|
|
425
437
|
}
|
|
426
|
-
TextareaInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextareaInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
-
TextareaInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: { id: "id", placeholder: "placeholder", label: "label", required: "required", patternErrorMsg: "patternErrorMsg", pattern: "pattern", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n <textarea #input id=\"{{id}}\" class=\"form-control {{classes}}\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n (blur)=\"onTouched()\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n </textarea>\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], directives: [{ 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: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
438
|
+
TextareaInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextareaInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
439
|
+
TextareaInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: { id: "id", placeholder: "placeholder", label: "label", required: "required", patternErrorMsg: "patternErrorMsg", pattern: "pattern", classes: "classes", containerClasses: "containerClasses", isArabicForm: "isArabicForm" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n <textarea #input id=\"{{id}}\" class=\"form-control {{classes}}\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n (blur)=\"onTouched()\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n </textarea>\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], directives: [{ 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: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
428
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextareaInputComponent, decorators: [{
|
|
429
441
|
type: Component,
|
|
430
442
|
args: [{ selector: 'ipa-textarea-input', template: "<div class=\"form-floating {{containerClasses}}\">\r\n <textarea #input id=\"{{id}}\" class=\"form-control {{classes}}\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n (blur)=\"onTouched()\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n </textarea>\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""] }]
|
|
431
443
|
}], ctorParameters: function () { return [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
|
|
432
444
|
type: Self
|
|
433
|
-
}] }]; }, propDecorators: { input: [{
|
|
445
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
|
|
434
446
|
type: ViewChild,
|
|
435
447
|
args: ['input', { static: true }]
|
|
436
448
|
}], id: [{
|
|
@@ -449,6 +461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
449
461
|
type: Input
|
|
450
462
|
}], containerClasses: [{
|
|
451
463
|
type: Input
|
|
464
|
+
}], isArabicForm: [{
|
|
465
|
+
type: Input
|
|
452
466
|
}] } });
|
|
453
467
|
|
|
454
468
|
class DropdownInputComponent {
|
|
@@ -460,6 +474,8 @@ class DropdownInputComponent {
|
|
|
460
474
|
this.required = false;
|
|
461
475
|
this.searchable = false;
|
|
462
476
|
this.notFoundText = 'لا يوجد بيانات';
|
|
477
|
+
this.isArabicForm = true;
|
|
478
|
+
this.fromGenerateForm = false;
|
|
463
479
|
this.formControl = new FormControl('');
|
|
464
480
|
this.controlDir.valueAccessor = this;
|
|
465
481
|
}
|
|
@@ -484,15 +500,15 @@ class DropdownInputComponent {
|
|
|
484
500
|
this.onTouched = fn;
|
|
485
501
|
}
|
|
486
502
|
get errorMessage() {
|
|
487
|
-
this.errorMsg = this.validationService.getErrorMessage(this.formControl);
|
|
503
|
+
this.errorMsg = this.validationService.getErrorMessage(this.formControl, '', this.isArabicForm);
|
|
488
504
|
return this.errorMsg;
|
|
489
505
|
}
|
|
490
506
|
}
|
|
491
507
|
DropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DropdownInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
DropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: { id: "id", label: "label", items: "items", textField: "textField", valueField: "valueField", required: "required", searchable: "searchable", notFoundText: "notFoundText", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\"
|
|
508
|
+
DropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: { id: "id", label: "label", items: "items", textField: "textField", valueField: "valueField", required: "required", searchable: "searchable", notFoundText: "notFoundText", classes: "classes", containerClasses: "containerClasses", isArabicForm: "isArabicForm", fromGenerateForm: "fromGenerateForm" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n <!-- searchable is false -->\r\n <ng-container *ngIf=\"!searchable\">\r\n <select #select id=\"{{id}}\" class=\"form-select {{classes}}\" [required]=\"required\" [formControl]=\"formControl\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': \r\n (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}</option>\r\n </select>\r\n <label for=\"{{id}}\">{{label}}</label>\r\n </ng-container>\r\n\r\n <!-- searchable is true -->\r\n <ng-select *ngIf=\"searchable\" #select dir=\"rtl\" class=\"{{classes}}\" [formControl]=\"formControl\" [items]=\"items\"\r\n [placeholder]=\"label\" [notFoundText]=\"notFoundText\" [required]=\"required\"\r\n [bindValue]=\"fromGenerateForm? textField : valueField\" [bindLabel]=\"textField\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': \r\n (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n </ng-select>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], components: [{ type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
|
|
493
509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DropdownInputComponent, decorators: [{
|
|
494
510
|
type: Component,
|
|
495
|
-
args: [{ selector: 'ipa-dropdown-input', template: "<div class=\"form-floating {{containerClasses}}\"
|
|
511
|
+
args: [{ selector: 'ipa-dropdown-input', template: "<div class=\"form-floating {{containerClasses}}\">\r\n <!-- searchable is false -->\r\n <ng-container *ngIf=\"!searchable\">\r\n <select #select id=\"{{id}}\" class=\"form-select {{classes}}\" [required]=\"required\" [formControl]=\"formControl\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': \r\n (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}</option>\r\n </select>\r\n <label for=\"{{id}}\">{{label}}</label>\r\n </ng-container>\r\n\r\n <!-- searchable is true -->\r\n <ng-select *ngIf=\"searchable\" #select dir=\"rtl\" class=\"{{classes}}\" [formControl]=\"formControl\" [items]=\"items\"\r\n [placeholder]=\"label\" [notFoundText]=\"notFoundText\" [required]=\"required\"\r\n [bindValue]=\"fromGenerateForm? textField : valueField\" [bindLabel]=\"textField\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': \r\n (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\">\r\n </ng-select>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""] }]
|
|
496
512
|
}], ctorParameters: function () { return [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
|
|
497
513
|
type: Self
|
|
498
514
|
}] }]; }, propDecorators: { input: [{
|
|
@@ -518,6 +534,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
518
534
|
type: Input
|
|
519
535
|
}], containerClasses: [{
|
|
520
536
|
type: Input
|
|
537
|
+
}], isArabicForm: [{
|
|
538
|
+
type: Input
|
|
539
|
+
}], fromGenerateForm: [{
|
|
540
|
+
type: Input
|
|
521
541
|
}] } });
|
|
522
542
|
|
|
523
543
|
class LoaderService {
|
|
@@ -745,6 +765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
745
765
|
class GenerateFormComponent {
|
|
746
766
|
constructor(validationService) {
|
|
747
767
|
this.validationService = validationService;
|
|
768
|
+
this.isArabicForm = true;
|
|
748
769
|
this.recaptchaSize = 'normal';
|
|
749
770
|
this.lang = 'ar';
|
|
750
771
|
this.recaptchaType = 'image';
|
|
@@ -758,12 +779,12 @@ class GenerateFormComponent {
|
|
|
758
779
|
ngOnInit() {
|
|
759
780
|
this.createForm();
|
|
760
781
|
}
|
|
761
|
-
|
|
762
|
-
return this.generateForm.get('items');
|
|
782
|
+
getFormControls(formControlName) {
|
|
783
|
+
return this.generateForm.get('items' + formControlName);
|
|
763
784
|
}
|
|
764
785
|
getErrorMessage(formControlName) {
|
|
765
786
|
const formControl = this.generateForm.controls[formControlName];
|
|
766
|
-
this.errorMsg = this.validationService.getErrorMessage(formControl);
|
|
787
|
+
this.errorMsg = this.validationService.getErrorMessage(formControl, '', this.isArabicForm);
|
|
767
788
|
return this.errorMsg;
|
|
768
789
|
}
|
|
769
790
|
SuccessUpload(event) {
|
|
@@ -783,7 +804,7 @@ class GenerateFormComponent {
|
|
|
783
804
|
this.addCheckboxControl(column);
|
|
784
805
|
}
|
|
785
806
|
else {
|
|
786
|
-
this.generateForm.addControl(column.
|
|
807
|
+
this.generateForm.addControl(column.formControlName, new FormControl(null, [
|
|
787
808
|
column.required ? Validators.required : Validators.nullValidator,
|
|
788
809
|
['select', 'radio', 'file', 'recaptcha'].indexOf(column.type) <= -1
|
|
789
810
|
? Validators.maxLength(column.size)
|
|
@@ -800,18 +821,19 @@ class GenerateFormComponent {
|
|
|
800
821
|
return new FormGroup({
|
|
801
822
|
[column.valueField]: new FormControl(item[column.valueField]),
|
|
802
823
|
[column.textField]: new FormControl(item[column.textField]),
|
|
803
|
-
checkbox: new FormControl(false
|
|
824
|
+
checkbox: new FormControl(false),
|
|
804
825
|
});
|
|
805
826
|
}));
|
|
806
|
-
this.generateForm.addControl(column.
|
|
807
|
-
this.generateForm.addControl('items', checkboxGroup);
|
|
827
|
+
this.generateForm.addControl(column.formControlName, new FormControl(null, column.required ? Validators.required : Validators.nullValidator));
|
|
828
|
+
this.generateForm.addControl('items' + column.formControlName, checkboxGroup);
|
|
808
829
|
checkboxGroup.valueChanges.subscribe((value) => {
|
|
809
|
-
|
|
810
|
-
|
|
830
|
+
let selectedItems = this.getCheckboxSelectedValues(value);
|
|
831
|
+
if (selectedItems) {
|
|
832
|
+
this.generateForm.controls[column.formControlName].patchValue(selectedItems.map((x) => x[column.textField]));
|
|
811
833
|
}
|
|
812
834
|
else {
|
|
813
|
-
this.generateForm.controls[column.
|
|
814
|
-
this.generateForm.controls[column.
|
|
835
|
+
this.generateForm.controls[column.formControlName].patchValue(null);
|
|
836
|
+
this.generateForm.controls[column.formControlName].markAsTouched();
|
|
815
837
|
}
|
|
816
838
|
});
|
|
817
839
|
}
|
|
@@ -821,14 +843,16 @@ class GenerateFormComponent {
|
|
|
821
843
|
}
|
|
822
844
|
}
|
|
823
845
|
GenerateFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GenerateFormComponent, deps: [{ token: IPAFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
824
|
-
GenerateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", 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.
|
|
846
|
+
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 [pattern]=\"column.validationPattern!\"\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 [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 </div>\r\n\r\n <!-- recaptcha -->\r\n <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"lang\" [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\" [pattern]=\"column.validationPattern!\"\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", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }, { type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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]" }] });
|
|
825
847
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GenerateFormComponent, decorators: [{
|
|
826
848
|
type: Component,
|
|
827
|
-
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.
|
|
849
|
+
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 [pattern]=\"column.validationPattern!\"\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 [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 </div>\r\n\r\n <!-- recaptcha -->\r\n <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"lang\" [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\" [pattern]=\"column.validationPattern!\"\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: [""] }]
|
|
828
850
|
}], ctorParameters: function () { return [{ type: IPAFormService }]; }, propDecorators: { generateForm: [{
|
|
829
851
|
type: Input
|
|
830
852
|
}], form: [{
|
|
831
853
|
type: Input
|
|
854
|
+
}], isArabicForm: [{
|
|
855
|
+
type: Input
|
|
832
856
|
}], siteKey: [{
|
|
833
857
|
type: Input
|
|
834
858
|
}], recaptchaSize: [{
|
|
@@ -857,6 +881,7 @@ class DatepickerComponent {
|
|
|
857
881
|
this.label = 'datepicker';
|
|
858
882
|
this.patternErrorMsg = 'invalid pattern';
|
|
859
883
|
this.required = false;
|
|
884
|
+
this.isArabicForm = true;
|
|
860
885
|
this.today = this.calendar.getToday();
|
|
861
886
|
this.formControl = new FormControl('');
|
|
862
887
|
this.controlDir.valueAccessor = this;
|
|
@@ -887,12 +912,12 @@ class DatepickerComponent {
|
|
|
887
912
|
this.datepicker.close();
|
|
888
913
|
}
|
|
889
914
|
get errorMessage() {
|
|
890
|
-
this.errorMsg = this.ipaFormService.getErrorMessage(this.formControl, this.patternErrorMsg);
|
|
915
|
+
this.errorMsg = this.ipaFormService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
|
|
891
916
|
return this.errorMsg;
|
|
892
917
|
}
|
|
893
918
|
}
|
|
894
919
|
DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatepickerComponent, deps: [{ token: IPAFormService }, { token: i2.NgbCalendar }, { token: i2$1.NgControl, self: true }, { token: i2.NgbInputDatepickerConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|
895
|
-
DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DatepickerComponent, selector: "ipa-datepicker", inputs: { id: "id", label: "label", patternErrorMsg: "patternErrorMsg", required: "required", maxDate: "maxDate", minDate: "minDate", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n title=\"{{label}}\">\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
920
|
+
DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DatepickerComponent, selector: "ipa-datepicker", inputs: { id: "id", label: "label", patternErrorMsg: "patternErrorMsg", required: "required", maxDate: "maxDate", minDate: "minDate", classes: "classes", containerClasses: "containerClasses", isArabicForm: "isArabicForm" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n title=\"{{label}}\">\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
896
921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
897
922
|
type: Component,
|
|
898
923
|
args: [{ selector: 'ipa-datepicker', template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n title=\"{{label}}\">\r\n <label for=\"{{id}}\">{{label}}</label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"] }]
|
|
@@ -917,6 +942,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
917
942
|
type: Input
|
|
918
943
|
}], containerClasses: [{
|
|
919
944
|
type: Input
|
|
945
|
+
}], isArabicForm: [{
|
|
946
|
+
type: Input
|
|
920
947
|
}] } });
|
|
921
948
|
|
|
922
949
|
const WEEKDAYS$1 = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
|