ng-ipa-library 4.0.21 → 4.0.22

package/fesm2022/ng-ipa-library.mjs

@@ -1,25 +1,13 @@
-import * as i2$1 from '@angular/common';
+import * as i2$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, inject, Injector, Directive, Injectable, Component, Input, ElementRef, Self, ViewChild, EventEmitter, Output } from '@angular/core';
-import * as i2$2 from '@angular/forms';
-import { NgControl, NgModel, FormControlDirective, FormControlName, ControlContainer, FormControl, NG_VALUE_ACCESSOR, UntypedFormControl, Validators, UntypedFormArray, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Pipe, NgModule, Component, Input, Injectable, Self, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import * as i2$1 from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule, Validators, UntypedFormArray, UntypedFormGroup, FormsModule } from '@angular/forms';
 import * as i1 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
 export * from 'ngx-toastr';
-import * as i3 from 'ngx-dropzone-wrapper';
-import { DropzoneDirective, DropzoneModule } from 'ngx-dropzone-wrapper';
-import * as i2$3 from 'ngx-captcha';
-import { NgxCaptchaModule } from 'ngx-captcha';
 import momentHijri from 'moment-hijri';
-import * as i2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDatepickerI18n, NgbCalendar, NgbCalendarIslamicUmalqura, NgbCalendarGregorian, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
-export * from '@ng-bootstrap/ng-bootstrap';
-import * as i5 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-export * from '@ng-select/ng-select';
-import * as i4 from '@angular/cdk/bidi';
-import { BehaviorSubject, Observable, throwError } from 'rxjs';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -27,6 +15,17 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { ShareIconsModule } from 'ngx-sharebuttons/icons';
 import * as i1$1 from 'ngx-sharebuttons/popup';
 import { ShareButtonsPopupModule } from 'ngx-sharebuttons/popup';
+import * as i2 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerI18n, NgbCalendar, NgbCalendarIslamicUmalqura, NgbCalendarGregorian, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
+export * from '@ng-bootstrap/ng-bootstrap';
+import * as i4 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+export * from '@ng-select/ng-select';
+import { BehaviorSubject, Observable, throwError } from 'rxjs';
+import * as i2$3 from 'ngx-captcha';
+import { NgxCaptchaModule } from 'ngx-captcha';
+import * as i3 from 'ngx-dropzone-wrapper';
+import { DropzoneDirective, DropzoneModule } from 'ngx-dropzone-wrapper';
 import * as i2$4 from '@angular/common/http';
 import { HttpResponse } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
@@ -59,63 +58,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-class HostControlDirectiveDirective {
+class ShareButtonComponent {
     constructor() {
-        this.injector = inject(Injector);
+        this.title = '';
+        this.description = '';
+        this.btnLabel = '';
     }
-    ngOnInit() {
-        const ngControl = this.injector.get(NgControl, null, {
-            self: true,
-            optional: true,
-        });
-        if (ngControl instanceof NgModel) {
-            this.control = ngControl.control;
-            this.subscription = this.control.valueChanges.subscribe((value) => {
-                if (ngControl.model !== value || ngControl.viewModel !== value) {
-                    ngControl.viewToModelUpdate(value);
-                }
-            });
-        }
-        else if (ngControl instanceof FormControlDirective) {
-            this.control = ngControl.control;
-        }
-        else if (ngControl instanceof FormControlName) {
-            const container = this.injector.get(ControlContainer)
-                .control;
-            this.control = container.controls[ngControl.name];
-        }
-        else {
-            this.control = new FormControl();
+    ngAfterViewInit() {
+        const elements = document.getElementsByClassName('sb-show-icon');
+        if (!elements[0].getAttribute('id')) {
+            elements[0].setAttribute('type', 'button');
+            elements[0].setAttribute('id', 'IPAShareBtn');
+            const label = document.createElement('label');
+            label.innerHTML = this.btnLabel;
+            label.classList.add('sm-share-title');
+            label.classList.add('me-1');
+            elements[0].before(label);
         }
     }
-    writeValue() { }
-    registerOnChange() { }
-    registerOnTouched() { }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HostControlDirectiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: HostControlDirectiveDirective, isStandalone: true, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useExisting: HostControlDirectiveDirective,
-            },
-        ], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ShareButtonComponent, 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipa-share-button', 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>" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], btnLabel: [{
+                type: Input
+            }] } });
+
+class ShareButtonModule {
+    constructor(library) {
+        library.addIconPacks(fas);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, deps: [{ token: i1$2.FaIconLibrary }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, declarations: [ShareButtonComponent], imports: [ShareIconsModule,
+            ShareButtonsPopupModule,
+            OverlayModule,
+            FontAwesomeModule], exports: [ShareButtonComponent,
+            ShareIconsModule,
+            ShareButtonsPopupModule,
+            OverlayModule,
+            FontAwesomeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, imports: [ShareIconsModule,
+            ShareButtonsPopupModule,
+            OverlayModule,
+            FontAwesomeModule, ShareIconsModule,
+            ShareButtonsPopupModule,
+            OverlayModule,
+            FontAwesomeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HostControlDirectiveDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, decorators: [{
+            type: NgModule,
             args: [{
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: HostControlDirectiveDirective,
-                        },
+                    declarations: [ShareButtonComponent],
+                    imports: [
+                        ShareIconsModule,
+                        ShareButtonsPopupModule,
+                        OverlayModule,
+                        FontAwesomeModule,
                     ],
+                    exports: [
+                        ShareButtonComponent,
+                        ShareIconsModule,
+                        ShareButtonsPopupModule,
+                        OverlayModule,
+                        FontAwesomeModule,
+                    ]
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i1$2.FaIconLibrary }] });
 
 class IPAFormService {
     constructor(parserFormatter) {
@@ -404,8 +418,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
         }], ctorParameters: () => [{ type: i2.NgbDateParserFormatter }] });
 
 class TextInputComponent {
-    constructor(validationService, cd) {
+    constructor(validationService, controlDir, cd) {
         this.validationService = validationService;
+        this.controlDir = controlDir;
         this.cd = cd;
         this.type = 'text';
         this.placeholder = 'please enter text';
@@ -415,34 +430,57 @@ class TextInputComponent {
         this.onlyNumber = false;
         this.pattern = '';
         this.isArabicForm = true;
-        this.formControl = inject(HostControlDirectiveDirective);
+        this.formControl = new UntypedFormControl('');
+        this.controlDir.valueAccessor = this;
     }
     ngAfterContentChecked() {
         this.cd.detectChanges();
     }
-    ngOnInit() { }
+    ngOnInit() {
+        const control = this.controlDir.control;
+        const validators = control?.validator ? [control.validator] : [];
+        control?.setValidators(validators);
+        control?.updateValueAndValidity();
+        this.formControl = control;
+    }
+    onChange(event) { }
+    onTouched() { }
+    writeValue(obj) {
+        this.input.nativeElement.value = obj || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
     checkIsNumber(event) {
         if (this.onlyNumber) {
-            const initialValue = this.formControl.control.value;
+            const initialValue = this.formControl.value;
             const newValue = initialValue.replace(/[^0-9]*/g, '');
-            this.formControl.control.patchValue(newValue);
-            this.formControl.control.markAsPristine();
-            if (initialValue !== this.formControl.control.value) {
+            this.formControl.patchValue(newValue);
+            this.formControl.markAsPristine();
+            if (initialValue !== this.formControl.value) {
                 event.stopPropagation();
             }
         }
     }
     get errorMessage() {
-        this.errorMsg = this.validationService.getErrorMessage(this.formControl.control, this.patternErrorMsg, this.isArabicForm);
+        this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
         return this.errorMsg;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TextInputComponent, deps: [{ token: IPAFormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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" }, hostDirectives: [{ directive: HostControlDirectiveDirective }], ngImport: i0, template: "<div class=\"form-floating {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    class=\"form-control {{ classes }}\"\r\n    [type]=\"type\"\r\n    [required]=\"required\"\r\n    pattern=\"{{ pattern }}\"\r\n    placeholder=\"{{ placeholder }}\"\r\n    [formControl]=\"formControl.control\"\r\n    (input)=\"checkIsNumber($event)\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control.invalid &&\r\n        (formControl.control.dirty || formControl.control.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n  />\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>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TextInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TextInputComponent, isStandalone: true, 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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-text-input', hostDirectives: [HostControlDirectiveDirective], template: "<div class=\"form-floating {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    class=\"form-control {{ classes }}\"\r\n    [type]=\"type\"\r\n    [required]=\"required\"\r\n    pattern=\"{{ pattern }}\"\r\n    placeholder=\"{{ placeholder }}\"\r\n    [formControl]=\"formControl.control\"\r\n    (input)=\"checkIsNumber($event)\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control.invalid &&\r\n        (formControl.control.dirty || formControl.control.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n  />\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>\r\n" }]
-        }], ctorParameters: () => [{ type: IPAFormService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+            args: [{ selector: 'ipa-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule], 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>" }]
+        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
+                    type: Self
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], id: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -505,13 +543,13 @@ class TextareaInputComponent {
         this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
         return this.errorMsg;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TextareaInputComponent, deps: [{ token: IPAFormService }, { token: i2$2.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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()\" 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}}\">{{label}}</label>\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TextareaInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TextareaInputComponent, isStandalone: true, 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}}\">{{label}}</label>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
-            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()\" 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}}\">{{label}}</label>\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"] }]
-        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$2.NgControl, decorators: [{
+            args: [{ selector: 'ipa-textarea-input', standalone: true, imports: [CommonModule, ReactiveFormsModule], 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}}\">{{label}}</label>\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"] }]
+        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
@@ -573,13 +611,13 @@ class DropdownInputComponent {
         this.errorMsg = this.validationService.getErrorMessage(this.formControl, '', this.isArabicForm);
         return this.errorMsg;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DropdownInputComponent, deps: [{ token: IPAFormService }, { token: i2$2.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DropdownInputComponent, 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}}\">{{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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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: ["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", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DropdownInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DropdownInputComponent, isStandalone: true, 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}}\">{{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: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.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", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
-            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 *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}}\">{{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>" }]
-        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$2.NgControl, decorators: [{
+            args: [{ selector: 'ipa-dropdown-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgSelectModule], 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}}\">{{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>" }]
+        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }] }], propDecorators: { input: [{
                 type: ViewChild,
@@ -657,7 +695,7 @@ class LoaderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LoaderComponent, deps: [{ token: LoaderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LoaderComponent, selector: "ipa-loader", inputs: { isLocal: "isLocal" }, ngImport: i0, template: "<div id=\"cover-spin\" *ngIf=\"loading && isLocal\">\r\n  <div class=\"spinner\"></div>\r\n</div>\r\n", styles: ["#cover-spin{display:flex}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LoaderComponent, selector: "ipa-loader", inputs: { isLocal: "isLocal" }, ngImport: i0, template: "<div id=\"cover-spin\" *ngIf=\"loading && isLocal\">\r\n  <div class=\"spinner\"></div>\r\n</div>\r\n", styles: ["#cover-spin{display:flex}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
@@ -666,6 +704,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }] } });
 
+class RecaptchaComponent {
+    constructor(controlDir) {
+        this.controlDir = controlDir;
+        this.siteKey = '6LefJQYdAAAAAIlxmfkjNlWidMk8VukIZcs6lO5e';
+        this.recaptchaSize = 'normal';
+        this.lang = 'ar';
+        this.recaptchaType = 'image';
+        this.theme = 'light';
+        this.useGlobalDomain = true;
+        this.formControl = new UntypedFormControl('');
+        this.controlDir.valueAccessor = this;
+    }
+    ngOnInit() {
+        const control = this.controlDir.control;
+        const validators = control?.validator ? [control.validator] : [];
+        control?.setValidators(validators);
+        control?.updateValueAndValidity();
+        this.formControl = control;
+    }
+    onChange(event) { }
+    onTouched() { }
+    writeValue(obj) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RecaptchaComponent, deps: [{ token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RecaptchaComponent, isStandalone: true, selector: "ipa-recaptcha", inputs: { siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, ngImport: i0, template: "<ngx-recaptcha2 [siteKey]=\"siteKey\" [size]=\"recaptchaSize\" [hl]=\"lang\" [theme]=\"theme\" [type]=\"recaptchaType\"\n    [useGlobalDomain]=\"useGlobalDomain\" [formControl]=\"formControl\">\n</ngx-recaptcha2>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxCaptchaModule }, { kind: "component", type: i2$3.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RecaptchaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipa-recaptcha', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgxCaptchaModule], template: "<ngx-recaptcha2 [siteKey]=\"siteKey\" [size]=\"recaptchaSize\" [hl]=\"lang\" [theme]=\"theme\" [type]=\"recaptchaType\"\n    [useGlobalDomain]=\"useGlobalDomain\" [formControl]=\"formControl\">\n</ngx-recaptcha2>" }]
+        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
+                    type: Self
+                }] }], propDecorators: { siteKey: [{
+                type: Input
+            }], recaptchaSize: [{
+                type: Input
+            }], lang: [{
+                type: Input
+            }], recaptchaType: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], useGlobalDomain: [{
+                type: Input
+            }] } });
+
 class FileUploadComponent {
     constructor(
     // private authService: AuthService,
@@ -765,11 +853,11 @@ class FileUploadComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1.ToastrService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FileUploadComponent, selector: "ipa-file-upload", inputs: { isArabicForm: "isArabicForm", label: "label", required: "required", acceptedFiles: "acceptedFiles", multiple: "multiple", maxFileSize: "maxFileSize", method: "method", autoUpload: "autoUpload", apiUrl: "apiUrl", authorization: "authorization" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, viewQueries: [{ propertyName: "dropzoneDir", first: true, predicate: DropzoneDirective, descendants: true }], ngImport: i0, template: "<div class=\"file-upload\">\r\n    <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n        (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n        (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n        [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n        (addedFile)=\"fileWasAdded($event)\">\r\n    </div>\r\n    <div class=\"upload-btn-wrapper\">\r\n        <div>\r\n            <div class=\"subtitle mb-2\">\r\n                {{label}}\r\n                <span *ngIf=\"required\" class=\"required\">*</span>\r\n            </div>\r\n            <hr>\r\n            <span style=\"font-size: 12px;\">{{isArabicForm? '\u0642\u0645 \u0628\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0647\u0646\u0627' : 'drag or click here'}}</span>\r\n            <i class=\"fas fa-upload upload-icon mr-2\"></i>\r\n        </div>\r\n        <div *ngIf=\"acceptedFiles.length > 0\" class=\"allowed-extensions\">\r\n           {{isArabicForm? '\u0627\u0644\u0635\u064A\u063A\u0629 \u0627\u0644\u0645\u0633\u0645\u0648\u062D \u0628\u0647\u0627:' : 'Allowed format:'}} \r\n            <span class=\"extensions\">{{ acceptedFiles }}</span>\r\n        </div>\r\n        <div class=\"allowed-extensions\">\r\n            {{isArabicForm? '\u0627\u0642\u0635\u0649 \u062D\u062C\u0645 \u0644\u0644\u0645\u0631\u0641\u0642:' : 'Attachment Size:'}}\r\n            <span class=\"extensions\">{{ maxFileSize }} MB</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div id=\"attachment-status\" style=\"text-align: center; margin-top:10px;\">\r\n    <span style=\"font-size: 14px; margin: auto; font-weight:bold;\" *ngFor=\"let file of currentFiles\">\r\n        {{ file.name }} <i (click)=\"deleteFile(file)\" class=\"fas fa-trash\"\r\n            style=\"color:firebrick; cursor: pointer;\"></i>\r\n        <br>\r\n    </span>\r\n    <ul class=\"list-unstyled\">\r\n        <li class=\"text-danger\" style=\"font-size: 12px;\" *ngFor=\"let error of errors\">{{error}}</li>\r\n    </ul>\r\n</div>", styles: [".subtitle{border-bottom:none;display:block;line-height:2}.file-upload{border:dashed 1px #ccc;display:block;min-height:150px;border-radius:15px;width:350px;cursor:pointer;position:relative;margin:auto}.upload-overlay{position:absolute;width:100%;height:100%}.upload-btn-wrapper{text-align:center}.upload-icon{margin-right:5px}.list-unstyled{margin:10px!important;padding:14px!important;list-style:none}.allowed-extensions{color:#4d7297}.required{color:#dc3545;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DropzoneDirective, selector: "[dropzone]", inputs: ["disabled", "dropzone"], outputs: ["init", "error", "success", "sending", "canceled", "complete", "processing", "drop", "dragStart", "dragEnd", "dragEnter", "dragOver", "dragLeave", "thumbnail", "addedFile", "addedFiles", "removedFile", "uploadProgress", "maxFilesReached", "maxFilesExceeded", "errorMultiple", "successMultiple", "sendingMultiple", "canceledMultiple", "completeMultiple", "processingMultiple", "reset", "queueComplete", "totalUploadProgress"], exportAs: ["ngxDropzone"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FileUploadComponent, isStandalone: true, selector: "ipa-file-upload", inputs: { isArabicForm: "isArabicForm", label: "label", required: "required", acceptedFiles: "acceptedFiles", multiple: "multiple", maxFileSize: "maxFileSize", method: "method", autoUpload: "autoUpload", apiUrl: "apiUrl", authorization: "authorization" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, viewQueries: [{ propertyName: "dropzoneDir", first: true, predicate: DropzoneDirective, descendants: true }], ngImport: i0, template: "<div class=\"file-upload\">\r\n    <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n        (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n        (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n        [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n        (addedFile)=\"fileWasAdded($event)\">\r\n    </div>\r\n    <div class=\"upload-btn-wrapper\">\r\n        <div>\r\n            <div class=\"subtitle mb-2\">\r\n                {{label}}\r\n                <span *ngIf=\"required\" class=\"required\">*</span>\r\n            </div>\r\n            <hr>\r\n            <span style=\"font-size: 12px;\">{{isArabicForm? '\u0642\u0645 \u0628\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0647\u0646\u0627' : 'drag or click here'}}</span>\r\n            <i class=\"fas fa-upload upload-icon mr-2\"></i>\r\n        </div>\r\n        <div *ngIf=\"acceptedFiles.length > 0\" class=\"allowed-extensions\">\r\n           {{isArabicForm? '\u0627\u0644\u0635\u064A\u063A\u0629 \u0627\u0644\u0645\u0633\u0645\u0648\u062D \u0628\u0647\u0627:' : 'Allowed format:'}} \r\n            <span class=\"extensions\">{{ acceptedFiles }}</span>\r\n        </div>\r\n        <div class=\"allowed-extensions\">\r\n            {{isArabicForm? '\u0627\u0642\u0635\u0649 \u062D\u062C\u0645 \u0644\u0644\u0645\u0631\u0641\u0642:' : 'Attachment Size:'}}\r\n            <span class=\"extensions\">{{ maxFileSize }} MB</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div id=\"attachment-status\" style=\"text-align: center; margin-top:10px;\">\r\n    <span style=\"font-size: 14px; margin: auto; font-weight:bold;\" *ngFor=\"let file of currentFiles\">\r\n        {{ file.name }} <i (click)=\"deleteFile(file)\" class=\"fas fa-trash\"\r\n            style=\"color:firebrick; cursor: pointer;\"></i>\r\n        <br>\r\n    </span>\r\n    <ul class=\"list-unstyled\">\r\n        <li class=\"text-danger\" style=\"font-size: 12px;\" *ngFor=\"let error of errors\">{{error}}</li>\r\n    </ul>\r\n</div>", styles: [".subtitle{border-bottom:none;display:block;line-height:2}.file-upload{border:dashed 1px #ccc;display:block;min-height:150px;border-radius:15px;width:350px;cursor:pointer;position:relative;margin:auto}.upload-overlay{position:absolute;width:100%;height:100%}.upload-btn-wrapper{text-align:center}.upload-icon{margin-right:5px}.list-unstyled{margin:10px!important;padding:14px!important;list-style:none}.allowed-extensions{color:#4d7297}.required{color:#dc3545;font-size:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DropzoneModule }, { kind: "directive", type: i3.DropzoneDirective, selector: "[dropzone]", inputs: ["disabled", "dropzone"], outputs: ["init", "error", "success", "sending", "canceled", "complete", "processing", "drop", "dragStart", "dragEnd", "dragEnter", "dragOver", "dragLeave", "thumbnail", "addedFile", "addedFiles", "removedFile", "uploadProgress", "maxFilesReached", "maxFilesExceeded", "errorMultiple", "successMultiple", "sendingMultiple", "canceledMultiple", "completeMultiple", "processingMultiple", "reset", "queueComplete", "totalUploadProgress"], exportAs: ["ngxDropzone"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-file-upload', template: "<div class=\"file-upload\">\r\n    <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n        (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n        (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n        [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n        (addedFile)=\"fileWasAdded($event)\">\r\n    </div>\r\n    <div class=\"upload-btn-wrapper\">\r\n        <div>\r\n            <div class=\"subtitle mb-2\">\r\n                {{label}}\r\n                <span *ngIf=\"required\" class=\"required\">*</span>\r\n            </div>\r\n            <hr>\r\n            <span style=\"font-size: 12px;\">{{isArabicForm? '\u0642\u0645 \u0628\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0647\u0646\u0627' : 'drag or click here'}}</span>\r\n            <i class=\"fas fa-upload upload-icon mr-2\"></i>\r\n        </div>\r\n        <div *ngIf=\"acceptedFiles.length > 0\" class=\"allowed-extensions\">\r\n           {{isArabicForm? '\u0627\u0644\u0635\u064A\u063A\u0629 \u0627\u0644\u0645\u0633\u0645\u0648\u062D \u0628\u0647\u0627:' : 'Allowed format:'}} \r\n            <span class=\"extensions\">{{ acceptedFiles }}</span>\r\n        </div>\r\n        <div class=\"allowed-extensions\">\r\n            {{isArabicForm? '\u0627\u0642\u0635\u0649 \u062D\u062C\u0645 \u0644\u0644\u0645\u0631\u0641\u0642:' : 'Attachment Size:'}}\r\n            <span class=\"extensions\">{{ maxFileSize }} MB</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div id=\"attachment-status\" style=\"text-align: center; margin-top:10px;\">\r\n    <span style=\"font-size: 14px; margin: auto; font-weight:bold;\" *ngFor=\"let file of currentFiles\">\r\n        {{ file.name }} <i (click)=\"deleteFile(file)\" class=\"fas fa-trash\"\r\n            style=\"color:firebrick; cursor: pointer;\"></i>\r\n        <br>\r\n    </span>\r\n    <ul class=\"list-unstyled\">\r\n        <li class=\"text-danger\" style=\"font-size: 12px;\" *ngFor=\"let error of errors\">{{error}}</li>\r\n    </ul>\r\n</div>", styles: [".subtitle{border-bottom:none;display:block;line-height:2}.file-upload{border:dashed 1px #ccc;display:block;min-height:150px;border-radius:15px;width:350px;cursor:pointer;position:relative;margin:auto}.upload-overlay{position:absolute;width:100%;height:100%}.upload-btn-wrapper{text-align:center}.upload-icon{margin-right:5px}.list-unstyled{margin:10px!important;padding:14px!important;list-style:none}.allowed-extensions{color:#4d7297}.required{color:#dc3545;font-size:20px}\n"] }]
+            args: [{ selector: 'ipa-file-upload', standalone: true, imports: [CommonModule, ReactiveFormsModule, DropzoneModule], template: "<div class=\"file-upload\">\r\n    <div class=\"upload-overlay\" [dropzone]=\"config\" (error)=\"onUploadError($event)\"\r\n        (queueComplete)=\"operationCompleted($event)\" (success)=\"onUploadSuccess($event)\" (dragenter)=\"dragEnter = true\"\r\n        (dragLeave)=\"dragEnter = false\" (drop)=\"dragEnter = false\" (dragEnd)=\"dragEnter = false\"\r\n        [class.active-border]=\"dragEnter\" (sending)=\"sending($event)\" (reset)=\"reset($event)\"\r\n        (addedFile)=\"fileWasAdded($event)\">\r\n    </div>\r\n    <div class=\"upload-btn-wrapper\">\r\n        <div>\r\n            <div class=\"subtitle mb-2\">\r\n                {{label}}\r\n                <span *ngIf=\"required\" class=\"required\">*</span>\r\n            </div>\r\n            <hr>\r\n            <span style=\"font-size: 12px;\">{{isArabicForm? '\u0642\u0645 \u0628\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0647\u0646\u0627' : 'drag or click here'}}</span>\r\n            <i class=\"fas fa-upload upload-icon mr-2\"></i>\r\n        </div>\r\n        <div *ngIf=\"acceptedFiles.length > 0\" class=\"allowed-extensions\">\r\n           {{isArabicForm? '\u0627\u0644\u0635\u064A\u063A\u0629 \u0627\u0644\u0645\u0633\u0645\u0648\u062D \u0628\u0647\u0627:' : 'Allowed format:'}} \r\n            <span class=\"extensions\">{{ acceptedFiles }}</span>\r\n        </div>\r\n        <div class=\"allowed-extensions\">\r\n            {{isArabicForm? '\u0627\u0642\u0635\u0649 \u062D\u062C\u0645 \u0644\u0644\u0645\u0631\u0641\u0642:' : 'Attachment Size:'}}\r\n            <span class=\"extensions\">{{ maxFileSize }} MB</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div id=\"attachment-status\" style=\"text-align: center; margin-top:10px;\">\r\n    <span style=\"font-size: 14px; margin: auto; font-weight:bold;\" *ngFor=\"let file of currentFiles\">\r\n        {{ file.name }} <i (click)=\"deleteFile(file)\" class=\"fas fa-trash\"\r\n            style=\"color:firebrick; cursor: pointer;\"></i>\r\n        <br>\r\n    </span>\r\n    <ul class=\"list-unstyled\">\r\n        <li class=\"text-danger\" style=\"font-size: 12px;\" *ngFor=\"let error of errors\">{{error}}</li>\r\n    </ul>\r\n</div>", styles: [".subtitle{border-bottom:none;display:block;line-height:2}.file-upload{border:dashed 1px #ccc;display:block;min-height:150px;border-radius:15px;width:350px;cursor:pointer;position:relative;margin:auto}.upload-overlay{position:absolute;width:100%;height:100%}.upload-btn-wrapper{text-align:center}.upload-icon{margin-right:5px}.list-unstyled{margin:10px!important;padding:14px!important;list-style:none}.allowed-extensions{color:#4d7297}.required{color:#dc3545;font-size:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1.ToastrService }], propDecorators: { dropzoneDir: [{
                 type: ViewChild,
                 args: [DropzoneDirective, { static: false }]
@@ -801,56 +889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }] } });
 
-class RecaptchaComponent {
-    constructor(controlDir) {
-        this.controlDir = controlDir;
-        this.siteKey = '6LefJQYdAAAAAIlxmfkjNlWidMk8VukIZcs6lO5e';
-        this.recaptchaSize = 'normal';
-        this.lang = 'ar';
-        this.recaptchaType = 'image';
-        this.theme = 'light';
-        this.useGlobalDomain = true;
-        this.formControl = new UntypedFormControl('');
-        this.controlDir.valueAccessor = this;
-    }
-    ngOnInit() {
-        const control = this.controlDir.control;
-        const validators = control?.validator ? [control.validator] : [];
-        control?.setValidators(validators);
-        control?.updateValueAndValidity();
-        this.formControl = control;
-    }
-    onChange(event) { }
-    onTouched() { }
-    writeValue(obj) { }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RecaptchaComponent, deps: [{ token: i2$2.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: { siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, ngImport: i0, template: "<ngx-recaptcha2 [siteKey]=\"siteKey\" [size]=\"recaptchaSize\" [hl]=\"lang\" [theme]=\"theme\" [type]=\"recaptchaType\"\n    [useGlobalDomain]=\"useGlobalDomain\" [formControl]=\"formControl\">\n</ngx-recaptcha2>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RecaptchaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ipa-recaptcha', template: "<ngx-recaptcha2 [siteKey]=\"siteKey\" [size]=\"recaptchaSize\" [hl]=\"lang\" [theme]=\"theme\" [type]=\"recaptchaType\"\n    [useGlobalDomain]=\"useGlobalDomain\" [formControl]=\"formControl\">\n</ngx-recaptcha2>" }]
-        }], ctorParameters: () => [{ type: i2$2.NgControl, decorators: [{
-                    type: Self
-                }] }], propDecorators: { siteKey: [{
-                type: Input
-            }], recaptchaSize: [{
-                type: Input
-            }], lang: [{
-                type: Input
-            }], recaptchaType: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], useGlobalDomain: [{
-                type: Input
-            }] } });
-
 class GenerateFormComponent {
     constructor(validationService) {
         this.validationService = validationService;
@@ -961,7 +999,7 @@ class GenerateFormComponent {
         return selectedItems.length > 0 ? selectedItems : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GenerateFormComponent, deps: [{ token: IPAFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"generateForm\">\r\n    <ng-container *ngFor=\"let column of form.columns\">\r\n        <div [ngSwitch]=\"column.type\">\r\n            <!-- TEXTAREA -->\r\n            <div *ngSwitchCase=\"'textArea'\">\r\n                <ipa-textarea-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n                    [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n                    [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n                    [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n                    [isArabicForm]=\"isArabicForm\">\r\n                </ipa-textarea-input>\r\n            </div>\r\n\r\n            <!-- DROP DOWN LIST -->\r\n            <div *ngSwitchCase=\"'select'\">\r\n                <ipa-dropdown-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n                    [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n                    [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n                    [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\"\r\n                    [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n                    [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n                </ipa-dropdown-input>\r\n            </div>\r\n\r\n            <!-- CHECKBOX -->\r\n            <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n                <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n                <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n                    *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n                    <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n                        <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n                            type=\"checkbox\" formControlName=\"checkbox\">\r\n                        <label class=\"form-check-label\"\r\n                            [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n                            {{control.value[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RADIO -->\r\n            <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n                <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n                <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n                    <div class=\"form-check {{column.inputClasses}}\">\r\n                        <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\"\r\n                            type=\"radio\" [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n                        <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n                            {{item[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- FILE UPLOAD -->\r\n            <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n                <ipa-file-upload [isArabicForm]=\"isArabicForm\" [required]=\"column.required\" [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]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n                    [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n                    formControlName=\"{{column.formControlName}}\">\r\n                </ipa-recaptcha>\r\n            </div>\r\n\r\n            <!-- DEFAULT -->\r\n            <div *ngSwitchDefault>\r\n                <ipa-text-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n                    [type]=\"column.type\" [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n                    [required]=\"column.required\"\r\n                    [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n                    [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n                    [isArabicForm]=\"isArabicForm\">\r\n                </ipa-text-input>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$2.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"generateForm\">\r\n    <ng-container *ngFor=\"let column of form.columns\">\r\n        <div [ngSwitch]=\"column.type\">\r\n            <!-- TEXTAREA -->\r\n            <div *ngSwitchCase=\"'textArea'\">\r\n                <ipa-textarea-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n                    [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n                    [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n                    [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n                    [isArabicForm]=\"isArabicForm\">\r\n                </ipa-textarea-input>\r\n            </div>\r\n\r\n            <!-- DROP DOWN LIST -->\r\n            <div *ngSwitchCase=\"'select'\">\r\n                <ipa-dropdown-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n                    [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n                    [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n                    [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\"\r\n                    [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n                    [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n                </ipa-dropdown-input>\r\n            </div>\r\n\r\n            <!-- CHECKBOX -->\r\n            <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n                <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n                <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n                    *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n                    <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n                        <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n                            type=\"checkbox\" formControlName=\"checkbox\">\r\n                        <label class=\"form-check-label\"\r\n                            [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n                            {{control.value[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RADIO -->\r\n            <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n                <label>{{isArabicForm? column.arabicLabel : column.englishLabel}}</label>\r\n                <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n                    <div class=\"form-check {{column.inputClasses}}\">\r\n                        <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\"\r\n                            type=\"radio\" [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n                        <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n                            {{item[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- FILE UPLOAD -->\r\n            <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n                <ipa-file-upload [isArabicForm]=\"isArabicForm\" [required]=\"column.required\" [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]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n                    [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n                    formControlName=\"{{column.formControlName}}\">\r\n                </ipa-recaptcha>\r\n            </div>\r\n\r\n            <!-- DEFAULT -->\r\n            <div *ngSwitchDefault>\r\n                <ipa-text-input [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n                    [type]=\"column.type\" [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n                    [required]=\"column.required\"\r\n                    [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n                    [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\"\r\n                    [isArabicForm]=\"isArabicForm\">\r\n                </ipa-text-input>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</form>", styles: [""], 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: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["id", "placeholder", "label", "required", "patternErrorMsg", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: TextInputComponent, selector: "ipa-text-input", inputs: ["id", "type", "placeholder", "label", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }, { 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: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "label", "items", "textField", "valueField", "required", "firstItemLabel", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GenerateFormComponent, decorators: [{
             type: Component,
@@ -993,23 +1031,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }] } });
 
 class DatepickerComponent {
-    constructor(ipaFormService, calendar, config, cd) {
+    constructor(ipaFormService, calendar, controlDir, config, cd) {
         this.ipaFormService = ipaFormService;
         this.calendar = calendar;
+        this.controlDir = controlDir;
         this.cd = cd;
         this.label = 'datepicker';
         this.patternErrorMsg = 'invalid pattern';
         this.required = false;
         this.isArabicForm = true;
         this.today = this.calendar.getToday();
-        this.formControl = inject(HostControlDirectiveDirective);
+        this.formControl = new UntypedFormControl('');
+        this.controlDir.valueAccessor = this;
         config.container = null;
         config.placement = 'bottom-center';
     }
     ngAfterContentChecked() {
         this.cd.detectChanges();
     }
-    ngOnInit() { }
+    ngOnInit() {
+        const control = this.controlDir.control;
+        const validators = control?.validator ? [control.validator] : [];
+        if (this.isHijriDatepicker)
+            validators.push(IPAFormService.validHijriDate);
+        control?.setValidators(validators);
+        control?.updateValueAndValidity();
+        this.formControl = control;
+    }
+    onChange(event) { }
+    onTouched() { }
+    writeValue(obj) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
     openDatepicker(event) {
         if (!this.datepicker.isOpen()) {
             setTimeout(() => {
@@ -1022,7 +1079,7 @@ class DatepickerComponent {
         this.datepicker.close();
     }
     get errorMessage() {
-        this.errorMsg = this.ipaFormService.getErrorMessage(this.formControl.control, this.patternErrorMsg, this.isArabicForm);
+        this.errorMsg = this.ipaFormService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
         return this.errorMsg;
     }
     changeDatepickerTitles() {
@@ -1058,13 +1115,15 @@ class DatepickerComponent {
             selectList.item(1).title = 'Select year';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatepickerComponent, deps: [{ token: IPAFormService }, { token: i2.NgbCalendar }, { token: i2.NgbInputDatepickerConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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 }], hostDirectives: [{ directive: HostControlDirectiveDirective }], ngImport: i0, template: "<div class=\"form-floating input-group {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control?.invalid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n    class=\"form-control {{ classes }}\"\r\n    [formControl]=\"formControl.control\"\r\n    [firstDayOfWeek]=\"7\"\r\n    ngbDatepicker\r\n    #d=\"ngbDatepicker\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"{{ label }}\"\r\n  />\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\r\n      type=\"button\"\r\n      class=\"btn btn-primary btn-sm m-2\"\r\n      style=\"width: auto; float: right\"\r\n      (click)=\"\r\n        formControl.control.patchValue(today); d.navigateTo(today); d.close()\r\n      \"\r\n    >\r\n      \u0627\u0644\u064A\u0648\u0645\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-secondary btn-sm m-2\"\r\n      style=\"width: auto; float: left\"\r\n      (click)=\"formControl.control.patchValue(null); d.close()\"\r\n    >\r\n      \u0645\u0633\u062D\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n", 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"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatepickerComponent, deps: [{ token: IPAFormService }, { token: i2.NgbCalendar }, { token: i2$1.NgControl, self: true }, { token: i2.NgbInputDatepickerConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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        placeholder=\"{{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);d.close()\">\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"], 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-datepicker', hostDirectives: [HostControlDirectiveDirective], template: "<div class=\"form-floating input-group {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control?.invalid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n    class=\"form-control {{ classes }}\"\r\n    [formControl]=\"formControl.control\"\r\n    [firstDayOfWeek]=\"7\"\r\n    ngbDatepicker\r\n    #d=\"ngbDatepicker\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"{{ label }}\"\r\n  />\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\r\n      type=\"button\"\r\n      class=\"btn btn-primary btn-sm m-2\"\r\n      style=\"width: auto; float: right\"\r\n      (click)=\"\r\n        formControl.control.patchValue(today); d.navigateTo(today); d.close()\r\n      \"\r\n    >\r\n      \u0627\u0644\u064A\u0648\u0645\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-secondary btn-sm m-2\"\r\n      style=\"width: auto; float: left\"\r\n      (click)=\"formControl.control.patchValue(null); d.close()\"\r\n    >\r\n      \u0645\u0633\u062D\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n", 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"] }]
-        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2.NgbInputDatepickerConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
+            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        placeholder=\"{{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);d.close()\">\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"] }]
+        }], ctorParameters: () => [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2$1.NgControl, decorators: [{
+                    type: Self
+                }] }, { type: i2.NgbInputDatepickerConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
                 type: ViewChild,
                 args: ['d']
             }], id: [{
@@ -1131,14 +1190,14 @@ class HijriDatepickerComponent extends DatepickerComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: HijriDatepickerComponent, selector: "ipa-hijri-datepicker", providers: [
             { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
             { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control?.invalid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n    class=\"form-control {{ classes }}\"\r\n    [formControl]=\"formControl.control\"\r\n    [firstDayOfWeek]=\"7\"\r\n    ngbDatepicker\r\n    #d=\"ngbDatepicker\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"{{ label }}\"\r\n  />\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\r\n      type=\"button\"\r\n      class=\"btn btn-primary btn-sm m-2\"\r\n      style=\"width: auto; float: right\"\r\n      (click)=\"\r\n        formControl.control.patchValue(today); d.navigateTo(today); d.close()\r\n      \"\r\n    >\r\n      \u0627\u0644\u064A\u0648\u0645\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-secondary btn-sm m-2\"\r\n      style=\"width: auto; float: left\"\r\n      (click)=\"formControl.control.patchValue(null); d.close()\"\r\n    >\r\n      \u0645\u0633\u062D\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n", 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"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
+        ], usesInheritance: 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        placeholder=\"{{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);d.close()\">\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"], 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-hijri-datepicker', providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
                         { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-                    ], template: "<div class=\"form-floating input-group {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control?.invalid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n    class=\"form-control {{ classes }}\"\r\n    [formControl]=\"formControl.control\"\r\n    [firstDayOfWeek]=\"7\"\r\n    ngbDatepicker\r\n    #d=\"ngbDatepicker\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"{{ label }}\"\r\n  />\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\r\n      type=\"button\"\r\n      class=\"btn btn-primary btn-sm m-2\"\r\n      style=\"width: auto; float: right\"\r\n      (click)=\"\r\n        formControl.control.patchValue(today); d.navigateTo(today); d.close()\r\n      \"\r\n    >\r\n      \u0627\u0644\u064A\u0648\u0645\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-secondary btn-sm m-2\"\r\n      style=\"width: auto; float: left\"\r\n      (click)=\"formControl.control.patchValue(null); d.close()\"\r\n    >\r\n      \u0645\u0633\u062D\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n", 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"] }]
+                    ], 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        placeholder=\"{{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);d.close()\">\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"] }]
         }] });
 
 const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
@@ -1185,175 +1244,94 @@ class GregorianDatepickerComponent extends DatepickerComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GregorianDatepickerComponent, selector: "ipa-gregorian-datepicker", providers: [
             { provide: NgbCalendar, useClass: NgbCalendarGregorian },
             { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control?.invalid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n    class=\"form-control {{ classes }}\"\r\n    [formControl]=\"formControl.control\"\r\n    [firstDayOfWeek]=\"7\"\r\n    ngbDatepicker\r\n    #d=\"ngbDatepicker\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"{{ label }}\"\r\n  />\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\r\n      type=\"button\"\r\n      class=\"btn btn-primary btn-sm m-2\"\r\n      style=\"width: auto; float: right\"\r\n      (click)=\"\r\n        formControl.control.patchValue(today); d.navigateTo(today); d.close()\r\n      \"\r\n    >\r\n      \u0627\u0644\u064A\u0648\u0645\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-secondary btn-sm m-2\"\r\n      style=\"width: auto; float: left\"\r\n      (click)=\"formControl.control.patchValue(null); d.close()\"\r\n    >\r\n      \u0645\u0633\u062D\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n", 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"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
+        ], usesInheritance: 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        placeholder=\"{{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);d.close()\">\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"], 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-gregorian-datepicker', providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarGregorian },
                         { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-                    ], template: "<div class=\"form-floating input-group {{ containerClasses }}\">\r\n  <input\r\n    id=\"{{ id }}\"\r\n    [ngClass]=\"{\r\n      'is-invalid is-invalid:focus':\r\n        formControl.control?.invalid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        errorMsg,\r\n      'is-valid is-valid:focus':\r\n        formControl.control?.valid &&\r\n        (formControl.control?.dirty || formControl.control?.touched) &&\r\n        (errorMsg || formControl.control.value)\r\n    }\"\r\n    class=\"form-control {{ classes }}\"\r\n    [formControl]=\"formControl.control\"\r\n    [firstDayOfWeek]=\"7\"\r\n    ngbDatepicker\r\n    #d=\"ngbDatepicker\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"{{ label }}\"\r\n  />\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\r\n      type=\"button\"\r\n      class=\"btn btn-primary btn-sm m-2\"\r\n      style=\"width: auto; float: right\"\r\n      (click)=\"\r\n        formControl.control.patchValue(today); d.navigateTo(today); d.close()\r\n      \"\r\n    >\r\n      \u0627\u0644\u064A\u0648\u0645\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-secondary btn-sm m-2\"\r\n      style=\"width: auto; float: left\"\r\n      (click)=\"formControl.control.patchValue(null); d.close()\"\r\n    >\r\n      \u0645\u0633\u062D\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n", 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"] }]
+                    ], 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        placeholder=\"{{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);d.close()\">\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"] }]
         }] });
 
-class ShareButtonComponent {
-    constructor() {
-        this.title = '';
-        this.description = '';
-        this.btnLabel = '';
-    }
-    ngAfterViewInit() {
-        const elements = document.getElementsByClassName('sb-show-icon');
-        if (!elements[0].getAttribute('id')) {
-            elements[0].setAttribute('type', 'button');
-            elements[0].setAttribute('id', 'IPAShareBtn');
-            const label = document.createElement('label');
-            label.innerHTML = this.btnLabel;
-            label.classList.add('sm-share-title');
-            label.classList.add('me-1');
-            elements[0].before(label);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ShareButtonComponent, 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ipa-share-button', 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>" }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], btnLabel: [{
-                type: Input
-            }] } });
-
-class ShareButtonModule {
-    constructor(library) {
-        library.addIconPacks(fas);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, deps: [{ token: i1$2.FaIconLibrary }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, declarations: [ShareButtonComponent], imports: [ShareIconsModule,
-            ShareButtonsPopupModule,
-            OverlayModule,
-            FontAwesomeModule], exports: [ShareButtonComponent,
-            ShareIconsModule,
-            ShareButtonsPopupModule,
-            OverlayModule,
-            FontAwesomeModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, imports: [ShareIconsModule,
-            ShareButtonsPopupModule,
-            OverlayModule,
-            FontAwesomeModule, ShareIconsModule,
-            ShareButtonsPopupModule,
-            OverlayModule,
-            FontAwesomeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ShareButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ShareButtonComponent],
-                    imports: [
-                        ShareIconsModule,
-                        ShareButtonsPopupModule,
-                        OverlayModule,
-                        FontAwesomeModule,
-                    ],
-                    exports: [
-                        ShareButtonComponent,
-                        ShareIconsModule,
-                        ShareButtonsPopupModule,
-                        OverlayModule,
-                        FontAwesomeModule,
-                    ]
-                }]
-        }], ctorParameters: () => [{ type: i1$2.FaIconLibrary }] });
-
 class NgIPALibraryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgIPALibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgIPALibraryModule, declarations: [TextInputComponent,
-            TextareaInputComponent,
-            DropdownInputComponent,
-            LoaderComponent,
-            GenerateFormComponent,
-            FileUploadComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgIPALibraryModule, declarations: [GenerateFormComponent,
             DatepickerComponent,
             HijriDatepickerComponent,
             GregorianDatepickerComponent,
-            RecaptchaComponent], imports: [CommonModule,
+            LoaderComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             ToastrModule,
-            DropzoneModule,
-            NgxCaptchaModule,
             PipesModule,
             NgbDatepickerModule,
             ShareButtonModule,
-            NgSelectModule,
-            HostControlDirectiveDirective], exports: [TextInputComponent,
+            TextareaInputComponent,
+            TextInputComponent,
+            RecaptchaComponent,
+            FileUploadComponent,
+            DropdownInputComponent], exports: [PipesModule,
+            ShareButtonModule,
+            TextInputComponent,
             TextareaInputComponent,
             DropdownInputComponent,
-            LoaderComponent,
             GenerateFormComponent,
             FileUploadComponent,
-            PipesModule,
             HijriDatepickerComponent,
             GregorianDatepickerComponent,
-            ShareButtonModule,
             RecaptchaComponent,
-            HostControlDirectiveDirective] }); }
+            LoaderComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgIPALibraryModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             ToastrModule,
-            DropzoneModule,
-            NgxCaptchaModule,
             PipesModule,
             NgbDatepickerModule,
             ShareButtonModule,
-            NgSelectModule, PipesModule,
+            TextareaInputComponent,
+            TextInputComponent,
+            RecaptchaComponent,
+            FileUploadComponent,
+            DropdownInputComponent, PipesModule,
             ShareButtonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgIPALibraryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        TextInputComponent,
-                        TextareaInputComponent,
-                        DropdownInputComponent,
-                        LoaderComponent,
                         GenerateFormComponent,
-                        FileUploadComponent,
                         DatepickerComponent,
                         HijriDatepickerComponent,
                         GregorianDatepickerComponent,
-                        RecaptchaComponent,
+                        LoaderComponent,
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         ToastrModule,
-                        DropzoneModule,
-                        NgxCaptchaModule,
                         PipesModule,
                         NgbDatepickerModule,
                         ShareButtonModule,
-                        NgSelectModule,
-                        HostControlDirectiveDirective,
+                        TextareaInputComponent,
+                        TextInputComponent,
+                        RecaptchaComponent,
+                        FileUploadComponent,
+                        DropdownInputComponent,
                     ],
                     exports: [
+                        PipesModule,
+                        ShareButtonModule,
                         TextInputComponent,
                         TextareaInputComponent,
                         DropdownInputComponent,
-                        LoaderComponent,
                         GenerateFormComponent,
                         FileUploadComponent,
-                        PipesModule,
                         HijriDatepickerComponent,
                         GregorianDatepickerComponent,
-                        ShareButtonModule,
                         RecaptchaComponent,
-                        HostControlDirectiveDirective,
+                        LoaderComponent,
                     ],
                 }]
         }] });
@@ -1906,5 +1884,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, BreadcrumbsService, CommonService, DropdownInputComponent, ErrorInterceptor, ErrorService, FileUploadComponent, GenerateFormComponent, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HostControlDirectiveDirective, IPAFormService, LoaderComponent, LoaderService, LoadingInterceptor, NgIPALibraryModule, PipesModule, RecaptchaComponent, ShareButtonComponent, ShareButtonModule, TextInputComponent, TextareaInputComponent, TokenInterceptor, TokenService, myIPATokenInterceptor };
+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 };
 //# sourceMappingURL=ng-ipa-library.mjs.map