ng-ipa-library 6.0.2 → 6.1.1

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.
@@ -351,11 +351,9 @@ class TextInputComponent {
351
351
  this.validationService = validationService;
352
352
  this.controlDir = controlDir;
353
353
  this.cd = cd;
354
+ this.isPlatformCodeDesignSystem = false;
354
355
  this.type = 'text';
355
- this.placeholder = 'please enter text';
356
- this.label = 'text input';
357
356
  this.required = false;
358
- this.patternErrorMsg = 'invalid pattern';
359
357
  this.onlyNumber = false;
360
358
  this.pattern = '';
361
359
  this.isArabicForm = true;
@@ -371,6 +369,9 @@ class TextInputComponent {
371
369
  control?.setValidators(validators);
372
370
  control?.updateValueAndValidity();
373
371
  this.formControl = control;
372
+ this.placeholder = this.placeholder
373
+ ? this.placeholder
374
+ : this.label ? 'اكتب ' + this.label : '';
374
375
  }
375
376
  onChange(event) { }
376
377
  onTouched() { }
@@ -399,24 +400,26 @@ class TextInputComponent {
399
400
  return this.errorMsg;
400
401
  }
401
402
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
402
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextInputComponent, isStandalone: false, 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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
403
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextInputComponent, isStandalone: false, selector: "ipa-text-input", inputs: { isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", id: "id", type: "type", label: "label", placeholder: "placeholder", 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: "<!-- none platform code design system -->\r\n<div class=\"form-floating {{containerClasses}}\" [ngClass]=\"{'d-none': isPlatformCodeDesignSystem}\">\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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>\r\n<!-- platform code design system -->\r\n<div class=\"{{containerClasses}}\" [ngClass]=\"{'d-none': !isPlatformCodeDesignSystem}\">\r\n <label class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <input #input id=\"{{id}}\" class=\"form-control p-2 {{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}\">\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
403
404
  }
404
405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextInputComponent, decorators: [{
405
406
  type: Component,
406
- args: [{ selector: 'ipa-text-input', standalone: false, 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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>" }]
407
+ args: [{ selector: 'ipa-text-input', standalone: false, template: "<!-- none platform code design system -->\r\n<div class=\"form-floating {{containerClasses}}\" [ngClass]=\"{'d-none': isPlatformCodeDesignSystem}\">\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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>\r\n<!-- platform code design system -->\r\n<div class=\"{{containerClasses}}\" [ngClass]=\"{'d-none': !isPlatformCodeDesignSystem}\">\r\n <label class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <input #input id=\"{{id}}\" class=\"form-control p-2 {{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}\">\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>" }]
407
408
  }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
408
409
  type: Self
409
410
  }] }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
410
411
  type: ViewChild,
411
412
  args: ['input', { static: true }]
413
+ }], isPlatformCodeDesignSystem: [{
414
+ type: Input
412
415
  }], id: [{
413
416
  type: Input
414
417
  }], type: [{
415
418
  type: Input
416
- }], placeholder: [{
417
- type: Input
418
419
  }], label: [{
419
420
  type: Input
421
+ }], placeholder: [{
422
+ type: Input
420
423
  }], required: [{
421
424
  type: Input
422
425
  }], patternErrorMsg: [{
@@ -439,10 +442,8 @@ class TextareaInputComponent {
439
442
  this.controlDir = controlDir;
440
443
  this.cd = cd;
441
444
  this.input = new ElementRef(null);
442
- this.placeholder = 'please enter text';
443
- this.label = 'textarea input';
445
+ this.isPlatformCodeDesignSystem = false;
444
446
  this.required = false;
445
- this.patternErrorMsg = 'invalid pattern';
446
447
  this.isArabicForm = true;
447
448
  this.formControl = new UntypedFormControl('');
448
449
  this.controlDir.valueAccessor = this;
@@ -456,6 +457,9 @@ class TextareaInputComponent {
456
457
  control?.setValidators(validators);
457
458
  control?.updateValueAndValidity();
458
459
  this.formControl = control;
460
+ this.placeholder = this.placeholder
461
+ ? this.placeholder
462
+ : this.label ? 'اكتب ' + this.label : '';
459
463
  }
460
464
  onChange(event) { }
461
465
  onTouched() { }
@@ -473,22 +477,24 @@ class TextareaInputComponent {
473
477
  return this.errorMsg;
474
478
  }
475
479
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextareaInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
476
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextareaInputComponent, isStandalone: false, 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()\" style=\"height: 135px;\"\r\n [ngClass]=\"{\r\n 'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,\r\n '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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>\r\n", styles: [".form-floating label{min-width:100%}.form-floating label:before{content:\"\";position:absolute;top:.9em;z-index:-1;width:110%;height:2em;background-color:#fff;box-shadow:0 -1px #fff}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.95;color:gray}@media (max-width: 1699px){.form-floating label:before{width:107%!important}}@media (max-width: 770px){.form-floating label:before{width:97%!important}}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
480
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextareaInputComponent, isStandalone: false, selector: "ipa-textarea-input", inputs: { isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", id: "id", label: "label", placeholder: "placeholder", 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: "<!-- none platform code design system -->\r\n<div class=\"form-floating {{containerClasses}}\" [ngClass]=\"{'d-none': isPlatformCodeDesignSystem}\">\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()\" style=\"height: 135px;\"\r\n [ngClass]=\"{\r\n 'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,\r\n '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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>\r\n<!-- platform code design system -->\r\n<div class=\"{{containerClasses}}\" [ngClass]=\"{'d-none': !isPlatformCodeDesignSystem}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\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()\" style=\"height: 135px;\"\r\n [ngClass]=\"{\r\n 'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n </textarea>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [".form-floating label{min-width:100%}.form-floating label:before{content:\"\";position:absolute;top:.9em;z-index:-1;width:110%;height:2em;background-color:#fff;box-shadow:0 -1px #fff}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.95;color:gray}@media (max-width: 1699px){.form-floating label:before{width:107%!important}}@media (max-width: 770px){.form-floating label:before{width:97%!important}}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
477
481
  }
478
482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextareaInputComponent, decorators: [{
479
483
  type: Component,
480
- args: [{ selector: 'ipa-textarea-input', standalone: false, 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()\" style=\"height: 135px;\"\r\n [ngClass]=\"{\r\n 'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,\r\n '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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>\r\n", styles: [".form-floating label{min-width:100%}.form-floating label:before{content:\"\";position:absolute;top:.9em;z-index:-1;width:110%;height:2em;background-color:#fff;box-shadow:0 -1px #fff}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.95;color:gray}@media (max-width: 1699px){.form-floating label:before{width:107%!important}}@media (max-width: 770px){.form-floating label:before{width:97%!important}}\n"] }]
484
+ args: [{ selector: 'ipa-textarea-input', standalone: false, template: "<!-- none platform code design system -->\r\n<div class=\"form-floating {{containerClasses}}\" [ngClass]=\"{'d-none': isPlatformCodeDesignSystem}\">\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()\" style=\"height: 135px;\"\r\n [ngClass]=\"{\r\n 'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,\r\n '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}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>\r\n<!-- platform code design system -->\r\n<div class=\"{{containerClasses}}\" [ngClass]=\"{'d-none': !isPlatformCodeDesignSystem}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\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()\" style=\"height: 135px;\"\r\n [ngClass]=\"{\r\n 'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n </textarea>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [".form-floating label{min-width:100%}.form-floating label:before{content:\"\";position:absolute;top:.9em;z-index:-1;width:110%;height:2em;background-color:#fff;box-shadow:0 -1px #fff}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.95;color:gray}@media (max-width: 1699px){.form-floating label:before{width:107%!important}}@media (max-width: 770px){.form-floating label:before{width:97%!important}}\n"] }]
481
485
  }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
482
486
  type: Self
483
487
  }] }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
484
488
  type: ViewChild,
485
489
  args: ['input', { static: true }]
486
- }], id: [{
490
+ }], isPlatformCodeDesignSystem: [{
487
491
  type: Input
488
- }], placeholder: [{
492
+ }], id: [{
489
493
  type: Input
490
494
  }], label: [{
491
495
  type: Input
496
+ }], placeholder: [{
497
+ type: Input
492
498
  }], required: [{
493
499
  type: Input
494
500
  }], patternErrorMsg: [{
@@ -507,6 +513,7 @@ class DropdownInputComponent {
507
513
  constructor(validationService, controlDir) {
508
514
  this.validationService = validationService;
509
515
  this.controlDir = controlDir;
516
+ this.isPlatformCodeDesignSystem = false;
510
517
  this.label = 'text input';
511
518
  this.items = [];
512
519
  this.required = false;
@@ -523,6 +530,10 @@ class DropdownInputComponent {
523
530
  control?.setValidators(validators);
524
531
  control?.updateValueAndValidity();
525
532
  this.formControl = control;
533
+ document.addEventListener('DOMContentLoaded', () => {
534
+ if (this.isPlatformCodeDesignSystem)
535
+ this.initCustomDropdowns();
536
+ });
526
537
  }
527
538
  onChange(event) { }
528
539
  onTouched() { }
@@ -540,12 +551,56 @@ class DropdownInputComponent {
540
551
  this.errorMsg = this.validationService.getErrorMessage(this.formControl, '', this.isArabicForm);
541
552
  return this.errorMsg;
542
553
  }
554
+ initCustomDropdowns() {
555
+ // Select all custom wrappers
556
+ const wrappers = document.querySelectorAll('.custom-dropdown-wrapper-' + this.id);
557
+ console.log(wrappers);
558
+ wrappers.forEach((wrapper) => {
559
+ // Find parent container
560
+ const parent = wrapper.closest('.form-group') || wrapper.parentElement;
561
+ if (!parent)
562
+ return;
563
+ // Locate Elements
564
+ const hiddenSelect = parent.querySelector('select');
565
+ const dropdownButton = wrapper.querySelector('.dropdown-toggle');
566
+ const dropdownButtonSpan = dropdownButton.querySelector('span') || dropdownButton;
567
+ const dropdownItems = wrapper.querySelectorAll('.dropdown-item');
568
+ if (!hiddenSelect || !dropdownButton)
569
+ return;
570
+ // Sync visual state with hidden select on load
571
+ if (hiddenSelect.selectedIndex > -1) {
572
+ const selectedOption = hiddenSelect.options[hiddenSelect.selectedIndex];
573
+ dropdownButtonSpan.textContent = selectedOption.text;
574
+ // Set active class
575
+ dropdownItems.forEach((item) => {
576
+ const isActive = item.getAttribute('data-value') === hiddenSelect.value;
577
+ item.classList.toggle('active', isActive);
578
+ });
579
+ }
580
+ // Handle Item Click
581
+ dropdownItems.forEach((item) => {
582
+ item.addEventListener('click', (e) => {
583
+ e.preventDefault();
584
+ const value = item.getAttribute('data-value');
585
+ const text = item.textContent.trim();
586
+ // Update UI
587
+ dropdownButtonSpan.textContent = text || `اختر ${this.label}`;
588
+ dropdownItems.forEach((i) => i.classList.remove('active'));
589
+ item.classList.add('active');
590
+ // Update Data
591
+ hiddenSelect.value = value;
592
+ // Trigger Change Event
593
+ hiddenSelect.dispatchEvent(new Event('change', { bubbles: true }));
594
+ });
595
+ });
596
+ });
597
+ }
543
598
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
544
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DropdownInputComponent, isStandalone: false, selector: "ipa-dropdown-input", inputs: { id: "id", label: "label", items: "items", textField: "textField", valueField: "valueField", required: "required", firstItemLabel: "firstItemLabel", 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 *ngIf=\"firstItemLabel\" value=\"\">{{firstItemLabel}}</option>\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}\r\n </option>\r\n </select>\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{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: [""], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
599
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DropdownInputComponent, isStandalone: false, selector: "ipa-dropdown-input", inputs: { id: "id", isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", label: "label", items: "items", textField: "textField", valueField: "valueField", required: "required", firstItemLabel: "firstItemLabel", 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: "<!-- none platform code design system -->\r\n<div class=\"form-floating {{containerClasses}}\" [ngClass]=\"{'d-none': isPlatformCodeDesignSystem}\">\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 *ngIf=\"firstItemLabel\" value=\"\">{{firstItemLabel}}</option>\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}\r\n </option>\r\n </select>\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{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>\r\n<!-- platform code design system -->\r\n<div class=\"form-group w-100 position-relative {{containerClasses}}\" [ngClass]=\"{'d-none': !isPlatformCodeDesignSystem}\">\r\n <div class=\"d-flex gap-1 mb-2\">\r\n <label class=\"form-label mb-0\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n </div>\r\n <!-- Standard hidden select -->\r\n <select #select id=\"{{id}}\" class=\"form-select d-none\" [required]=\"required\" [formControl]=\"formControl\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n <option *ngIf=\"firstItemLabel\" value=\"\">{{firstItemLabel}}</option>\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}\r\n </option>\r\n </select>\r\n <!-- Custom Dropdown Wrapper -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}} {{containerClasses}}\">\r\n <button class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center {{classes}}\" type=\"button\"\r\n data-bs-toggle=\"dropdown\" aria-expanded=\"false\" [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n <span class=\"selected-text\">\u0627\u062E\u062A\u0631 {{label}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-100\" style=\"max-height: 500px; overflow-y: auto;\">\r\n <li *ngFor=\"let item of items\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\"\r\n [attr.data-value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"invalid-feedback ms-3\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
545
600
  }
546
601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownInputComponent, decorators: [{
547
602
  type: Component,
548
- args: [{ selector: 'ipa-dropdown-input', standalone: false, 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 *ngIf=\"firstItemLabel\" value=\"\">{{firstItemLabel}}</option>\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}\r\n </option>\r\n </select>\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{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>" }]
603
+ args: [{ selector: 'ipa-dropdown-input', standalone: false, template: "<!-- none platform code design system -->\r\n<div class=\"form-floating {{containerClasses}}\" [ngClass]=\"{'d-none': isPlatformCodeDesignSystem}\">\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 *ngIf=\"firstItemLabel\" value=\"\">{{firstItemLabel}}</option>\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}\r\n </option>\r\n </select>\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{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>\r\n<!-- platform code design system -->\r\n<div class=\"form-group w-100 position-relative {{containerClasses}}\" [ngClass]=\"{'d-none': !isPlatformCodeDesignSystem}\">\r\n <div class=\"d-flex gap-1 mb-2\">\r\n <label class=\"form-label mb-0\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}}</label>\r\n </div>\r\n <!-- Standard hidden select -->\r\n <select #select id=\"{{id}}\" class=\"form-select d-none\" [required]=\"required\" [formControl]=\"formControl\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n <option *ngIf=\"firstItemLabel\" value=\"\">{{firstItemLabel}}</option>\r\n <option *ngFor=\"let item of items\"\r\n [value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}\r\n </option>\r\n </select>\r\n <!-- Custom Dropdown Wrapper -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}} {{containerClasses}}\">\r\n <button class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center {{classes}}\" type=\"button\"\r\n data-bs-toggle=\"dropdown\" aria-expanded=\"false\" [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n <span class=\"selected-text\">\u0627\u062E\u062A\u0631 {{label}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-100\" style=\"max-height: 500px; overflow-y: auto;\">\r\n <li *ngFor=\"let item of items\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\"\r\n [attr.data-value]=\"valueField ? fromGenerateForm ? item[textField] : item[valueField] : item\">\r\n {{textField ? item[textField] : item}}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"invalid-feedback ms-3\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n</div>" }]
549
604
  }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
550
605
  type: Self
551
606
  }] }], propDecorators: { input: [{
@@ -553,6 +608,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
553
608
  args: ['select', { static: true }]
554
609
  }], id: [{
555
610
  type: Input
611
+ }], isPlatformCodeDesignSystem: [{
612
+ type: Input
556
613
  }], label: [{
557
614
  type: Input
558
615
  }], items: [{
@@ -822,6 +879,7 @@ class GenerateFormComponent {
822
879
  constructor(validationService) {
823
880
  this.validationService = validationService;
824
881
  this.isArabicForm = true;
882
+ this.isPlatformCodeDesignSystem = false;
825
883
  this.recaptchaSize = 'normal';
826
884
  this.lang = 'ar';
827
885
  this.recaptchaType = 'image';
@@ -928,17 +986,19 @@ class GenerateFormComponent {
928
986
  return selectedItems.length > 0 ? selectedItems : null;
929
987
  }
930
988
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GenerateFormComponent, deps: [{ token: IPAFormService }], target: i0.ɵɵFactoryTarget.Component }); }
931
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GenerateFormComponent, isStandalone: false, 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!\" [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!\" [classes]=\"column.inputClasses!\"\r\n [containerClasses]=\"column.containerClasses!\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" type=\"radio\"\r\n [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\" [required]=\"column.required\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n (successUpload)=\"SuccessUpload($event)\" (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]=\"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\" [type]=\"column.type\"\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!\" [isArabicForm]=\"isArabicForm\">\r\n </ipa-text-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: TextInputComponent, selector: "ipa-text-input", inputs: ["id", "type", "placeholder", "label", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["id", "placeholder", "label", "required", "patternErrorMsg", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "label", "items", "textField", "valueField", "required", "firstItemLabel", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }, { kind: "component", type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["isArabicForm", "label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { kind: "component", type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }] }); }
989
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GenerateFormComponent, isStandalone: false, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", 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 [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [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!\" [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 [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [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!\" [classes]=\"column.inputClasses!\"\r\n [containerClasses]=\"column.containerClasses!\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" type=\"radio\"\r\n [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\" [required]=\"column.required\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n (successUpload)=\"SuccessUpload($event)\" (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]=\"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 [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\" [type]=\"column.type\"\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!\" [isArabicForm]=\"isArabicForm\">\r\n </ipa-text-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: TextInputComponent, selector: "ipa-text-input", inputs: ["isPlatformCodeDesignSystem", "id", "type", "label", "placeholder", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["isPlatformCodeDesignSystem", "id", "label", "placeholder", "required", "patternErrorMsg", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "isPlatformCodeDesignSystem", "label", "items", "textField", "valueField", "required", "firstItemLabel", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }, { kind: "component", type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["isArabicForm", "label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { kind: "component", type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }] }); }
932
990
  }
933
991
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GenerateFormComponent, decorators: [{
934
992
  type: Component,
935
- args: [{ selector: 'ipa-generate-form', standalone: false, 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!\" [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!\" [classes]=\"column.inputClasses!\"\r\n [containerClasses]=\"column.containerClasses!\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" type=\"radio\"\r\n [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\" [required]=\"column.required\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n (successUpload)=\"SuccessUpload($event)\" (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]=\"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\" [type]=\"column.type\"\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!\" [isArabicForm]=\"isArabicForm\">\r\n </ipa-text-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</form>\r\n" }]
993
+ args: [{ selector: 'ipa-generate-form', standalone: false, 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 [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [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!\" [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 [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [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!\" [classes]=\"column.inputClasses!\"\r\n [containerClasses]=\"column.containerClasses!\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" [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>\r\n <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n </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\" type=\"radio\"\r\n [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\" [required]=\"column.required\"\r\n [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n (successUpload)=\"SuccessUpload($event)\" (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]=\"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 [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\" [type]=\"column.type\"\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!\" [isArabicForm]=\"isArabicForm\">\r\n </ipa-text-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</form>\r\n" }]
936
994
  }], ctorParameters: () => [{ type: IPAFormService }], propDecorators: { generateForm: [{
937
995
  type: Input
938
996
  }], form: [{
939
997
  type: Input
940
998
  }], isArabicForm: [{
941
999
  type: Input
1000
+ }], isPlatformCodeDesignSystem: [{
1001
+ type: Input
942
1002
  }], siteKey: [{
943
1003
  type: Input
944
1004
  }], recaptchaSize: [{
@@ -1188,21 +1248,34 @@ class ShareButtonComponent {
1188
1248
  this.title = '';
1189
1249
  this.description = '';
1190
1250
  this.btnLabel = '';
1251
+ this.isPlatformCodeDesignSystem = false;
1191
1252
  }
1192
1253
  ngAfterViewInit() {
1193
1254
  const elements = document.getElementsByClassName('sb-show-icon');
1194
1255
  if (!elements[0].getAttribute('id')) {
1195
- elements[0].setAttribute('type', 'button');
1196
- elements[0].setAttribute('id', 'IPAShareBtn');
1197
- const label = document.createElement('label');
1198
- label.innerHTML = this.btnLabel;
1199
- label.classList.add('sm-share-title');
1200
- label.classList.add('me-1');
1201
- elements[0].before(label);
1256
+ if (!this.isPlatformCodeDesignSystem) {
1257
+ elements[0].setAttribute('type', 'button');
1258
+ elements[0].setAttribute('id', 'IPAShareBtn');
1259
+ const label = document.createElement('label');
1260
+ label.innerHTML = this.btnLabel;
1261
+ label.classList.add('sm-share-title');
1262
+ label.classList.add('me-1');
1263
+ elements[0].before(label);
1264
+ }
1265
+ else {
1266
+ elements[0].setAttribute('type', 'button');
1267
+ elements[0].innerHTML = this.btnLabel;
1268
+ elements[0].classList.add('mb-2', 'tp-link');
1269
+ const img = document.createElement('img');
1270
+ img.src =
1271
+ '/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/share-08.svg';
1272
+ img.classList.add('link-text-icon');
1273
+ elements[0].appendChild(img);
1274
+ }
1202
1275
  }
1203
1276
  }
1204
1277
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1205
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ShareButtonComponent, isStandalone: false, selector: "ipa-share-button", inputs: { title: "title", description: "description", btnLabel: "btnLabel" }, ngImport: i0, template: "<share-popup-button [title]=\"title\" [description]=\"description\" [icon]=\"'share-alt'\"\r\n [include]=\"['facebook','twitter','linkedin','telegram','whatsapp','copy']\">\r\n</share-popup-button>", styles: [""], dependencies: [{ kind: "component", type: i1$1.SharePopupComponent, selector: "share-popup-button", inputs: ["theme", "icon", "text", "include", "exclude", "closeIcon", "url", "title", "description", "image", "tags", "autoSetMeta", "show", "showIcon", "showText", "disabled", "hasBackdrop", "backdropClass"], outputs: ["opened", "closed", "popupClosed"] }] }); }
1278
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ShareButtonComponent, isStandalone: false, selector: "ipa-share-button", inputs: { title: "title", description: "description", btnLabel: "btnLabel", isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem" }, ngImport: i0, template: "<share-popup-button [title]=\"title\" [description]=\"description\" [icon]=\"'share-alt'\"\r\n [include]=\"['facebook','twitter','linkedin','telegram','whatsapp','copy']\">\r\n</share-popup-button>", styles: [""], dependencies: [{ kind: "component", type: i1$1.SharePopupComponent, selector: "share-popup-button", inputs: ["theme", "icon", "text", "include", "exclude", "closeIcon", "url", "title", "description", "image", "tags", "autoSetMeta", "show", "showIcon", "showText", "disabled", "hasBackdrop", "backdropClass"], outputs: ["opened", "closed", "popupClosed"] }] }); }
1206
1279
  }
1207
1280
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShareButtonComponent, decorators: [{
1208
1281
  type: Component,
@@ -1213,6 +1286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1213
1286
  type: Input
1214
1287
  }], btnLabel: [{
1215
1288
  type: Input
1289
+ }], isPlatformCodeDesignSystem: [{
1290
+ type: Input
1216
1291
  }] } });
1217
1292
 
1218
1293
  class ShareButtonModule {
@@ -1904,6 +1979,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1904
1979
  }]
1905
1980
  }], ctorParameters: () => [] });
1906
1981
 
1982
+ class BreadcrumbsV2Service {
1983
+ constructor() { }
1984
+ setPageTitle(text) {
1985
+ const titleEl = document.querySelector('.page-title .container');
1986
+ if (titleEl) {
1987
+ titleEl.textContent = text;
1988
+ }
1989
+ }
1990
+ addBreadcrumb(nodeName, imgClasses = 'path_arrow', linkClasses = 'path-item') {
1991
+ const elements = document
1992
+ .getElementById('path')
1993
+ ?.querySelector('.container')?.children;
1994
+ //get last child
1995
+ const lastIndex = elements?.item(elements.length - 1);
1996
+ const innerHTML = lastIndex.innerHTML;
1997
+ //add new link
1998
+ const link = this.createLink(innerHTML, location.pathname, linkClasses);
1999
+ //add arrow img
2000
+ const arrowImg = this.createImg(imgClasses);
2001
+ //add new span
2002
+ const newSpan = this.createSpan(nodeName);
2003
+ lastIndex.after(link, arrowImg, newSpan);
2004
+ lastIndex.remove();
2005
+ }
2006
+ addBreadcrumbList(nodeList, imgClasses = 'path_arrow', linkClasses = 'path-item') {
2007
+ const elements = document
2008
+ .getElementById('path')
2009
+ ?.querySelector('.container')?.children;
2010
+ //get last child
2011
+ const lastIndex = elements?.item(elements.length - 1);
2012
+ const innerHTML = lastIndex.innerHTML;
2013
+ lastIndex.innerHTML = '';
2014
+ //add new link
2015
+ const link = this.createLink(innerHTML, location.pathname, linkClasses);
2016
+ //add arrow img
2017
+ const arrowImg = this.createImg(imgClasses);
2018
+ lastIndex.after(link, arrowImg);
2019
+ lastIndex.remove();
2020
+ for (let i = 0; i < nodeList.length; i++) {
2021
+ const lastIndex = elements?.item(elements.length - 1);
2022
+ if (nodeList[i].nodeUrl) {
2023
+ const newSpan = document.createElement('span');
2024
+ //add new link
2025
+ const link = this.createLink(nodeList[i].nodeName, nodeList[i].nodeUrl, linkClasses);
2026
+ //add arrow img
2027
+ const arrowImg = this.createImg(imgClasses);
2028
+ lastIndex.after(link, arrowImg);
2029
+ }
2030
+ else {
2031
+ const newSpan = this.createSpan(nodeList[i].nodeName);
2032
+ lastIndex.after(newSpan);
2033
+ }
2034
+ }
2035
+ }
2036
+ createBreadcrumbs(nodeList, imgClasses = 'path_arrow', linkClasses = 'path-item') {
2037
+ const currentDiv = document.getElementById('path')?.querySelector('.container');
2038
+ currentDiv.innerHTML = '';
2039
+ //add first link
2040
+ const firstLink = this.createLink(nodeList[0].nodeName, nodeList[0].nodeUrl, linkClasses);
2041
+ currentDiv.appendChild(firstLink);
2042
+ //add arrow img
2043
+ const firstArrowImg = this.createImg(imgClasses);
2044
+ currentDiv.appendChild(firstArrowImg);
2045
+ //add rest of nodes
2046
+ for (let i = 1; i < nodeList.length; i++) {
2047
+ if (nodeList[i].nodeUrl) {
2048
+ //add new link
2049
+ const link = this.createLink(nodeList[i].nodeName, nodeList[i].nodeUrl, linkClasses);
2050
+ //add arrow img
2051
+ const arrowImg = this.createImg(imgClasses);
2052
+ currentDiv.appendChild(link);
2053
+ currentDiv.appendChild(arrowImg);
2054
+ }
2055
+ else {
2056
+ //add last span
2057
+ const span = this.createSpan(nodeList[i].nodeName);
2058
+ currentDiv.appendChild(span);
2059
+ }
2060
+ }
2061
+ }
2062
+ removeLastBreadcrumb() {
2063
+ const elements = document
2064
+ .getElementById('path')
2065
+ ?.querySelector('.container')?.children;
2066
+ elements?.item(elements.length - 1)?.remove();
2067
+ elements?.item(elements.length - 1)?.remove();
2068
+ this.setCurrentNode(elements);
2069
+ }
2070
+ removeBreadcrumbByNodeName(nodeName) {
2071
+ const elements = document
2072
+ .getElementById('path')
2073
+ ?.querySelector('.container')?.children;
2074
+ let index = -1;
2075
+ for (let i = 0; i < elements?.length; i++) {
2076
+ const span = elements?.item(i);
2077
+ if (span?.textContent?.trim() === nodeName) {
2078
+ index = i;
2079
+ break;
2080
+ }
2081
+ }
2082
+ const lastNode = elements?.length - 1 === index;
2083
+ if (index !== -1 && !lastNode) {
2084
+ elements?.item(index)?.remove();
2085
+ elements?.item(index)?.remove();
2086
+ }
2087
+ else {
2088
+ elements?.item(index)?.remove();
2089
+ elements?.item(index - 1)?.remove();
2090
+ }
2091
+ if (lastNode) {
2092
+ this.setCurrentNode(elements);
2093
+ }
2094
+ }
2095
+ removeLastBreadcrumbsByLength(length) {
2096
+ const elements = document
2097
+ .getElementById('path')
2098
+ ?.querySelector('.container')?.children;
2099
+ while (length > 0) {
2100
+ elements?.item(elements.length - 1)?.remove();
2101
+ elements?.item(elements.length - 1)?.remove();
2102
+ length--;
2103
+ }
2104
+ if (elements?.length > 0) {
2105
+ this.setCurrentNode(elements);
2106
+ }
2107
+ }
2108
+ createLink(innerHTML, href, classes) {
2109
+ const link = document.createElement('a');
2110
+ link.innerHTML = ' ' + innerHTML;
2111
+ link.href = href ?? '';
2112
+ link.classList.add(...[classes]);
2113
+ return link;
2114
+ }
2115
+ createSpan(innerHTML) {
2116
+ const span = document.createElement('span');
2117
+ span.innerHTML = ' ' + innerHTML;
2118
+ return span;
2119
+ }
2120
+ createImg(classes, src = 'https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/path.svg') {
2121
+ const img = document.createElement('img');
2122
+ img.src = src;
2123
+ img.classList.add(...[classes]);
2124
+ return img;
2125
+ }
2126
+ setCurrentNode(spans) {
2127
+ const lastSpan = spans?.item(spans.length - 1);
2128
+ const span = this.createSpan(lastSpan.innerHTML);
2129
+ lastSpan.replaceWith(span);
2130
+ }
2131
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbsV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2132
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbsV2Service, providedIn: 'root' }); }
2133
+ }
2134
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbsV2Service, decorators: [{
2135
+ type: Injectable,
2136
+ args: [{
2137
+ providedIn: 'root',
2138
+ }]
2139
+ }], ctorParameters: () => [] });
2140
+
1907
2141
  /*
1908
2142
  * Public API Surface of ipa-library
1909
2143
  */
@@ -1913,5 +2147,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1913
2147
  * Generated bundle index. Do not edit.
1914
2148
  */
1915
2149
 
1916
- export { AuthService, BreadcrumbsService, CommonService, DropdownInputComponent, ErrorInterceptor, ErrorService, FileUploadComponent, GenerateFormComponent, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, IPAFormService, LoaderComponent, LoaderService, LoadingInterceptor, NgIPALibraryModule, PipesModule, RecaptchaComponent, ShareButtonComponent, ShareButtonModule, TextInputComponent, TextareaInputComponent, TokenInterceptor, TokenService, myIPATokenInterceptor };
2150
+ export { AuthService, BreadcrumbsService, BreadcrumbsV2Service, CommonService, DropdownInputComponent, ErrorInterceptor, ErrorService, FileUploadComponent, GenerateFormComponent, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, IPAFormService, LoaderComponent, LoaderService, LoadingInterceptor, NgIPALibraryModule, PipesModule, RecaptchaComponent, ShareButtonComponent, ShareButtonModule, TextInputComponent, TextareaInputComponent, TokenInterceptor, TokenService, myIPATokenInterceptor };
1917
2151
  //# sourceMappingURL=ng-ipa-library.mjs.map