ngx-gccb 0.18.0 → 0.20.0

package/fesm2022/ngx-gccb.mjs

@@ -2,15 +2,15 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, ElementRef, input, Directive, Input, HostListener, Renderer2, ViewContainerRef, effect, HostBinding, EventEmitter, Output, TemplateRef, output, Component, computed, Pipe, viewChild, model, contentChildren, Injectable } from '@angular/core';
+import { inject, ElementRef, input, Input, HostListener, Directive, output, Component, computed, NgZone, Renderer2, effect, HostBinding, Pipe, viewChild, ViewContainerRef, TemplateRef, model, contentChildren, EventEmitter, Output, Injectable } from '@angular/core';
 import dayjs from 'dayjs';
-import { createPopper } from '@popperjs/core';
 import * as i2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { debounceTime } from 'rxjs';
 import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { createPopper } from '@popperjs/core';
 
 const NgxFadeRightAnimation = trigger('ngxFadeRightAnimation', [
     transition(':enter', [
@@ -28,29 +28,6 @@ const NgxFadeAnimation = trigger('ngxFadeAnimation', [
     transition(':leave', [animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' }))]),
 ]);
 
-class NgxAutofocusDirective {
-    constructor() {
-        this.ngZone = inject(NgZone);
-        this.el = inject(ElementRef);
-        this.ngxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "ngxAutofocus" }] : []));
-    }
-    ngAfterViewInit() {
-        if (this.ngxAutofocus()) {
-            this.ngZone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.el.nativeElement.focus();
-                }, 0);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxAutofocusDirective, isStandalone: true, selector: "[ngxAutofocus]", inputs: { ngxAutofocus: { classPropertyName: "ngxAutofocus", publicName: "ngxAutofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxAutofocusDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngxAutofocus]' }]
-        }] });
-
 class NgxButtonDirective {
     constructor() {
         this.elementRef = inject((ElementRef));
@@ -91,10 +68,10 @@ class NgxButtonDirective {
         }
         this.elementRef.nativeElement.classList.add('flex-shrink-0');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxButtonDirective, isStandalone: true, selector: "button[ngxButton]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ngxButton: { classPropertyName: "ngxButton", publicName: "ngxButton", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus($event)", "blur": "onblur($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NgxButtonDirective, isStandalone: true, selector: "button[ngxButton]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ngxButton: { classPropertyName: "ngxButton", publicName: "ngxButton", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus($event)", "blur": "onblur($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxButtonDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'button[ngxButton]' }]
         }], propDecorators: { onFocus: [{
@@ -112,279 +89,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 type: Input
             }] } });
 
-class NgxCardBodyDirective {
+class CalendarComponent {
     constructor() {
-        this.elementRef = inject((ElementRef));
+        this.onDaySelected = output();
+        this.currentMonth = dayjs();
+        this.weeks = [];
+        this.selectedDay = null;
+        this.hoveredDay = null;
     }
     ngOnInit() {
-        this.elementRef.nativeElement.classList.add('card-body');
+        this.generateCalendar();
+    }
+    onSelectDay(day) {
+        this.selectedDay = day;
+        this.onDaySelected.emit(this.selectedDay);
+    }
+    generateCalendar() {
+        const startOfMonth = this.currentMonth.startOf('month');
+        const endOfMonth = this.currentMonth.endOf('month');
+        const startDate = startOfMonth.startOf('week');
+        const endDate = endOfMonth.endOf('week');
+        let date = startDate.clone();
+        const calendar = [];
+        while (date.isBefore(endDate, 'day')) {
+            const week = [];
+            for (let i = 0; i < 7; i++) {
+                week.push(date.clone());
+                date = date.add(1, 'day');
+            }
+            calendar.push(week);
+        }
+        this.weeks = calendar;
+    }
+    previousMonth() {
+        this.currentMonth = this.currentMonth.subtract(1, 'month');
+        this.generateCalendar();
+    }
+    nextMonth() {
+        this.currentMonth = this.currentMonth.add(1, 'month');
+        this.generateCalendar();
+    }
+    isToday(date) {
+        return date.isSame(dayjs(), 'day');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxCardBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxCardBodyDirective, isStandalone: true, selector: "[ngxCardBody]", ngImport: i0 }); }
+    isCurrentMonth(date) {
+        return date.isSame(this.currentMonth, 'month');
+    }
+    isSelected(day) {
+        return this.selectedDay?.isSame(day, 'day') || false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: CalendarComponent, isStandalone: true, selector: "ngx-calendar", outputs: { onDaySelected: "onDaySelected" }, ngImport: i0, template: "<div class=\"container my-3\">\n\t<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t\t<button ngxButton variant=\"outline\" (click)=\"previousMonth()\">\u00AB</button>\n\t\t<h4 class=\"m-0\">\n\t\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t\t</h4>\n\t\t<button ngxButton variant=\"outline\" (click)=\"nextMonth()\">\u00BB</button>\n\t</div>\n\n\t<div class=\"table-responsive\">\n\t\t<table class=\"table table-bordered text-center\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t@for (day of ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']; track day) {\n\t\t\t\t\t\t<th>{{ day }}</th>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t@for (week of weeks; track $index) {\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t@for (day of week; track day.date()) {\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\tclass=\"day\"\n\t\t\t\t\t\t\t\t[class.bg-light]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t\t[class.bg-dark-subtle]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t\t[class.text-white]=\"isToday(day) && !(isSelected(day) || day === hoveredDay)\"\n\t\t\t\t\t\t\t\t[class.bg-primary]=\"isToday(day)\"\n\t\t\t\t\t\t\t\t(click)=\"onSelectDay(day)\"\n\t\t\t\t\t\t\t\t(mouseover)=\"hoveredDay = day\"\n\t\t\t\t\t\t\t\t(mouseout)=\"hoveredDay = null\">\n\t\t\t\t\t\t\t\t{{ day.date() }}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t}\n\t\t\t\t\t</tr>\n\t\t\t\t}\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n</div>\n", styles: [".day:hover{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxButtonDirective, selector: "button[ngxButton]", inputs: ["type", "ngxButton", "variant", "size"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxCardBodyDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngxCardBody]' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-calendar', imports: [CommonModule, NgxButtonDirective], template: "<div class=\"container my-3\">\n\t<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t\t<button ngxButton variant=\"outline\" (click)=\"previousMonth()\">\u00AB</button>\n\t\t<h4 class=\"m-0\">\n\t\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t\t</h4>\n\t\t<button ngxButton variant=\"outline\" (click)=\"nextMonth()\">\u00BB</button>\n\t</div>\n\n\t<div class=\"table-responsive\">\n\t\t<table class=\"table table-bordered text-center\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t@for (day of ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']; track day) {\n\t\t\t\t\t\t<th>{{ day }}</th>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t@for (week of weeks; track $index) {\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t@for (day of week; track day.date()) {\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\tclass=\"day\"\n\t\t\t\t\t\t\t\t[class.bg-light]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t\t[class.bg-dark-subtle]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t\t[class.text-white]=\"isToday(day) && !(isSelected(day) || day === hoveredDay)\"\n\t\t\t\t\t\t\t\t[class.bg-primary]=\"isToday(day)\"\n\t\t\t\t\t\t\t\t(click)=\"onSelectDay(day)\"\n\t\t\t\t\t\t\t\t(mouseover)=\"hoveredDay = day\"\n\t\t\t\t\t\t\t\t(mouseout)=\"hoveredDay = null\">\n\t\t\t\t\t\t\t\t{{ day.date() }}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t}\n\t\t\t\t\t</tr>\n\t\t\t\t}\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n</div>\n", styles: [".day:hover{cursor:pointer}\n"] }]
         }] });
 
-class NgxCardHeaderDirective {
-    constructor() {
-        this.elementRef = inject((ElementRef));
+class NgxFormGroup extends UntypedFormGroup {
+}
+class NgxFormControl extends UntypedFormControl {
+    constructor(formState, validatorOrOpts, asyncValidator, config) {
+        super(formState, validatorOrOpts, asyncValidator);
+        this.config = config;
     }
-    ngOnInit() {
-        this.elementRef.nativeElement.classList.add('card-header');
+    updateSelecOptions(options) {
+        if (this.config?.selectConfig?.options) {
+            this.config.selectConfig.options = [...options];
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxCardHeaderDirective, isStandalone: true, selector: "[ngxCardHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxCardHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngxCardHeader]' }]
+
+class NgxFormErrorsComponent {
+    constructor() {
+        this.isDirty = input(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
+        this.errors = input(null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        this.errorMessages = computed(() => {
+            const result = [];
+            if (this.isDirty() && this.errors()) {
+                for (const key in this.errors()) {
+                    if (this.errorMessageDictionary[key]) {
+                        result.push(this.errorMessageDictionary[key](this.errors()));
+                    }
+                }
+            }
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+        this.errorMessageDictionary = {
+            required: () => 'Field is required',
+            requiredTrue: () => 'Field is required',
+            email: () => 'Invalid E-Mail',
+            min: (errors) => `At least ${errors['min']?.requiredLength} characters are required`,
+            minlength: (errors) => `At least ${errors['minlength']?.requiredLength} characters are required`,
+            max: (errors) => `Maximum of ${errors['max']?.requiredLength} characters exceeded`,
+            maxlength: (errors) => `Maximum of ${errors['maxlength']?.requiredLength} characters exceeded`,
+            pattern: () => `Input does not match pattern`,
+            dateAfterInvalid: (errors) => `Date must be after ${errors?.['startDateValue']}`,
+            match: () => `Input does not match!`,
+            timeAfterError: (errors) => `The time must be after ${errors?.['timeAfterError']}`,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NgxFormErrorsComponent, isStandalone: true, selector: "ngx-form-errors", inputs: { isDirty: { classPropertyName: "isDirty", publicName: "isDirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		@if (errorMessages()) {
+			<div class="invalid-feedback d-block">
+				@for (errorMessage of errorMessages(); track $index) {
+					<div>{{ errorMessage }}</div>
+				}
+			</div>
+		}
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormErrorsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-form-errors',
+                    template: `
+		@if (errorMessages()) {
+			<div class="invalid-feedback d-block">
+				@for (errorMessage of errorMessages(); track $index) {
+					<div>{{ errorMessage }}</div>
+				}
+			</div>
+		}
+	`,
+                    imports: [CommonModule],
+                }]
         }] });
 
-class NgxCardDirective {
+class NgxAutofocusDirective {
     constructor() {
-        this.elementRef = inject((ElementRef));
+        this.ngZone = inject(NgZone);
+        this.el = inject(ElementRef);
+        this.ngxAutofocus = input(false, ...(ngDevMode ? [{ debugName: "ngxAutofocus" }] : []));
     }
-    ngOnInit() {
-        this.elementRef.nativeElement.classList.add('card');
+    ngAfterViewInit() {
+        if (this.ngxAutofocus()) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.el.nativeElement.focus();
+                }, 0);
+            });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxCardDirective, isStandalone: true, selector: "[ngxCard]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NgxAutofocusDirective, isStandalone: true, selector: "[ngxAutofocus]", inputs: { ngxAutofocus: { classPropertyName: "ngxAutofocus", publicName: "ngxAutofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxCardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxAutofocusDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ngxCard]' }]
+            args: [{ selector: '[ngxAutofocus]' }]
         }] });
 
-class NgxColDirective {
+class NgxFormGroupDirective {
     constructor() {
-        this.el = inject(ElementRef);
-        this.span = 'col';
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.validateOnChange = input(true, ...(ngDevMode ? [{ debugName: "validateOnChange" }] : []));
     }
-    set col(val) {
-        if (val) {
-            this.span = val;
-        }
+    validateForm() {
+        Object.keys(this.formGroup().controls).forEach(key => {
+            const control = this.formGroup().get(key);
+            if (control instanceof NgxFormControl || control instanceof FormControl) {
+                this.formGroup().get(key)?.markAsTouched({ onlySelf: true });
+                this.formGroup().get(key)?.markAsDirty({ onlySelf: true });
+                this.formGroup().get(key)?.updateValueAndValidity({ onlySelf: true });
+            }
+            else if (control instanceof NgxFormGroup || control instanceof FormGroup) {
+                Object.keys(control.controls).forEach(subKey => {
+                    control.get(subKey)?.markAsTouched({ onlySelf: true });
+                    control.get(subKey)?.markAsDirty({ onlySelf: true });
+                    control.get(subKey)?.updateValueAndValidity({ onlySelf: true });
+                });
+            }
+        });
     }
-    ngAfterViewInit() {
-        this.el.nativeElement.classList.add(this.span);
+    resetForm() {
+        this.formGroup().setErrors({});
+        this.formGroup().reset();
+        Object.keys(this.formGroup().controls).forEach(key => {
+            this.formGroup().get(key)?.markAsUntouched({ onlySelf: true });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxColDirective, isStandalone: true, selector: "[ngxCol]", inputs: { col: "col" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NgxFormGroupDirective, isStandalone: true, selector: "[ngxFormGroup]", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, validateOnChange: { classPropertyName: "validateOnChange", publicName: "validateOnChange", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngxFormGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxColDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormGroupDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ngxCol]' }]
-        }], propDecorators: { col: [{
-                type: Input
-            }] } });
+            args: [{
+                    selector: '[ngxFormGroup]',
+                    exportAs: 'ngxFormGroup',
+                }]
+        }] });
 
-class NgxDropdownDirective {
+class NgxFormInputDirective {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.ngxDropdown = input.required(...(ngDevMode ? [{ debugName: "ngxDropdown" }] : []));
-        this.placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
-        // adaptivePosition: InputSignal<boolean> = input(true);
-        // fallbackPlacements: InputSignal<Placement[]> = input<Placement[]>(['top-end', 'bottom-end', 'right', 'left']);
-        this.dropdownElement = null;
-        this.dropdownMenuContentElement = null;
-        this.isDropdownVisible = false;
+        this.elementRef = inject((ElementRef));
+        this.renderer2 = inject(Renderer2);
+        this.ngxFormInput = input.required(...(ngDevMode ? [{ debugName: "ngxFormInput" }] : []));
+        this.formControl = input(...(ngDevMode ? [undefined, { debugName: "formControl" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.isFloatingLabel = input(true, ...(ngDevMode ? [{ debugName: "isFloatingLabel" }] : []));
+        effect(() => {
+            const fc = this.formControl();
+            if (fc && this.type() === 'checkbox') {
+                const native = this.elementRef.nativeElement;
+                native.checked = fc.value === true;
+            }
+            this.checkIsValid();
+        });
     }
     ngOnInit() {
-        if (!this.dropdownElement) {
-            this.dropdownElement = this.renderer.createElement('div');
-            this.renderer.addClass(this.dropdownElement, 'dropdown');
-            const parent = this.elementRef.nativeElement.parentNode;
-            this.renderer.insertBefore(parent, this.dropdownElement, this.elementRef.nativeElement);
-            this.renderer.appendChild(this.dropdownElement, this.elementRef.nativeElement);
+        if (this.type() === 'select') {
+            this.elementRef.nativeElement.classList.add('form-select');
         }
-    }
-    toggleDropdown() {
-        if (this.isDropdownVisible) {
-            this.hide();
+        else if (this.type() === 'checkbox') {
+            this.elementRef.nativeElement.classList.add('form-check-input');
         }
         else {
-            this.show();
+            this.elementRef.nativeElement.classList.add('form-control');
         }
-    }
-    onDocumentClick(event) {
-        if (this.isDropdownVisible &&
-            this.dropdownElement &&
-            !this.dropdownElement.contains(event.target) &&
-            !this.elementRef.nativeElement.contains(event.target)) {
-            this.hide();
-        }
-    }
-    show() {
-        if (!this.dropdownMenuContentElement && this.dropdownElement) {
-            const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.ngxDropdown());
-            embeddedViewRef.detectChanges();
-            this.dropdownMenuContentElement = embeddedViewRef.rootNodes[0];
-            this.renderer.appendChild(this.dropdownElement, this.dropdownMenuContentElement);
-            this.addDropdownLinksListener();
-            this.popperInstance = createPopper(this.dropdownElement, this.dropdownMenuContentElement, {
-                placement: this.placement(),
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: ({ placement }) => {
-                                if (placement.startsWith('bottom')) {
-                                    return [1, -(this.dropdownElement?.offsetHeight + 1)];
-                                }
-                                if (placement.startsWith('top')) {
-                                    return [1, -(this.dropdownElement?.offsetHeight + 1)];
-                                }
-                                if (placement.startsWith('left')) {
-                                    return [
-                                        this.dropdownElement?.offsetHeight,
-                                        -this.dropdownElement?.offsetWidth,
-                                    ];
-                                }
-                                return [1, 1];
-                            },
-                        },
-                    },
-                    // {
-                    // 	name: 'flip',
-                    // 	options: {
-                    // 		fallbackPlacements: this.adaptivePosition() ? this.fallbackPlacements() : [],
-                    // 		boundary: 'viewport',
-                    // 		padding: 0,
-                    // 	},
-                    // },
-                    {
-                        name: 'preventOverflow',
-                        options: {
-                            boundary: 'viewport',
-                            padding: 0,
-                            tether: false,
-                        },
-                    },
-                ],
-            });
-        }
-        this.isDropdownVisible = true;
-    }
-    hide() {
-        if (this.dropdownMenuContentElement) {
-            this.viewContainerRef.clear();
-            this.dropdownMenuContentElement = null;
-            this.popperInstance?.destroy();
-        }
-        this.isDropdownVisible = false;
-    }
-    addDropdownLinksListener() {
-        const links = this.dropdownMenuContentElement?.querySelectorAll('.dropdown-item');
-        links?.forEach(link => {
-            this.renderer.listen(link, 'click', () => {
-                this.hide();
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxDropdownDirective, isStandalone: true, selector: "[ngxDropdown]", inputs: { ngxDropdown: { classPropertyName: "ngxDropdown", publicName: "ngxDropdown", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleDropdown()", "document:click": "onDocumentClick($event)" } }, exportAs: ["ngxDropdown"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxDropdownDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngxDropdown]', exportAs: 'ngxDropdown' }]
-        }], propDecorators: { toggleDropdown: [{
-                type: HostListener,
-                args: ['click']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class NgxFormGroup extends UntypedFormGroup {
-}
-class NgxFormControl extends UntypedFormControl {
-    constructor(formState, validatorOrOpts, asyncValidator, customConfig) {
-        super(formState, validatorOrOpts, asyncValidator);
-        this.customConfig = customConfig;
-    }
-    updateSelecOptions(options) {
-        if (this.customConfig?.selectConfig?.options) {
-            this.customConfig.selectConfig.options = [...options];
-        }
-    }
-}
-
-class NgxFormGroupDirective {
-    constructor() {
-        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
-        this.validateOnChange = input(true, ...(ngDevMode ? [{ debugName: "validateOnChange" }] : []));
-    }
-    validateForm() {
-        Object.keys(this.formGroup().controls).forEach(key => {
-            const control = this.formGroup().get(key);
-            if (control instanceof NgxFormControl || control instanceof FormControl) {
-                this.formGroup().get(key)?.markAsTouched({ onlySelf: true });
-                this.formGroup().get(key)?.markAsDirty({ onlySelf: true });
-                this.formGroup().get(key)?.updateValueAndValidity({ onlySelf: true });
-            }
-            else if (control instanceof NgxFormGroup || control instanceof FormGroup) {
-                Object.keys(control.controls).forEach(subKey => {
-                    control.get(subKey)?.markAsTouched({ onlySelf: true });
-                    control.get(subKey)?.markAsDirty({ onlySelf: true });
-                    control.get(subKey)?.updateValueAndValidity({ onlySelf: true });
-                });
-            }
-        });
-    }
-    resetForm() {
-        this.formGroup().setErrors({});
-        this.formGroup().reset();
-        Object.keys(this.formGroup().controls).forEach(key => {
-            this.formGroup().get(key)?.markAsUntouched({ onlySelf: true });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxFormGroupDirective, isStandalone: true, selector: "[ngxFormGroup]", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, validateOnChange: { classPropertyName: "validateOnChange", publicName: "validateOnChange", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngxFormGroup"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxFormGroup]',
-                    exportAs: 'ngxFormGroup',
-                }]
-        }] });
-
-class NgxFormInputDirective {
-    constructor() {
-        this.elementRef = inject((ElementRef));
-        this.renderer2 = inject(Renderer2);
-        this.ngxFormInput = input.required(...(ngDevMode ? [{ debugName: "ngxFormInput" }] : []));
-        this.formControl = input(...(ngDevMode ? [undefined, { debugName: "formControl" }] : []));
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
-        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
-        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
-        this.isFloatingLabel = input(true, ...(ngDevMode ? [{ debugName: "isFloatingLabel" }] : []));
-        effect(() => {
-            const fc = this.formControl();
-            if (fc && this.type() === 'checkbox') {
-                const native = this.elementRef.nativeElement;
-                native.checked = fc.value === true;
-            }
-            this.checkIsValid();
-        });
-    }
-    ngOnInit() {
-        if (this.type() === 'select') {
-            this.elementRef.nativeElement.classList.add('form-select');
-        }
-        else if (this.type() === 'checkbox') {
-            this.elementRef.nativeElement.classList.add('form-check-input');
-        }
-        else {
-            this.elementRef.nativeElement.classList.add('form-control');
-        }
-        if (this.type()) {
-            this.elementRef.nativeElement.setAttribute('type', this.type());
+        if (this.type()) {
+            this.elementRef.nativeElement.setAttribute('type', this.type());
         }
         this.elementRef.nativeElement.setAttribute('placeholder', this.placeholder() ?? (this.name() || this.ngxFormInput()));
         if (this.id() ?? (this.name() || this.ngxFormInput())) {
@@ -413,10 +340,10 @@ class NgxFormInputDirective {
             this.elementRef.nativeElement.classList.remove('is-invalid');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxFormInputDirective, isStandalone: true, selector: "[ngxFormInput]", inputs: { ngxFormInput: { classPropertyName: "ngxFormInput", publicName: "ngxFormInput", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isFloatingLabel: { classPropertyName: "isFloatingLabel", publicName: "isFloatingLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NgxFormInputDirective, isStandalone: true, selector: "[ngxFormInput]", inputs: { ngxFormInput: { classPropertyName: "ngxFormInput", publicName: "ngxFormInput", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isFloatingLabel: { classPropertyName: "isFloatingLabel", publicName: "isFloatingLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormInputDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ngxFormInput]' }]
         }], ctorParameters: () => [] });
@@ -425,10 +352,10 @@ class NgxFormLabelDirective {
     constructor() {
         this.elementClass = 'form-label';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxFormLabelDirective, isStandalone: true, selector: "label[ngxFormLabel]", host: { properties: { "class": "this.elementClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxFormLabelDirective, isStandalone: true, selector: "label[ngxFormLabel]", host: { properties: { "class": "this.elementClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormLabelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'label[ngxFormLabel]' }]
         }], propDecorators: { elementClass: [{
@@ -436,30 +363,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 args: ['class']
             }] } });
 
-class NgxFormSelectDirective {
+class AppIsFormControlPipe {
+    transform(value) {
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AppIsFormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AppIsFormControlPipe, isStandalone: true, name: "appIsFormControl" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AppIsFormControlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'appIsFormControl' }]
+        }] });
+
+class NgxIsFormGroupPipe {
+    transform(value) {
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxIsFormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: NgxIsFormGroupPipe, isStandalone: true, name: "ngxIsFormGroup" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxIsFormGroupPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxIsFormGroup' }]
+        }] });
+
+class NgxFormComponent {
     constructor() {
-        this.elementRef = inject((ElementRef));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.formGroupDirective = viewChild(NgxFormGroupDirective, ...(ngDevMode ? [{ debugName: "formGroupDirective" }] : []));
+        this.onValidated = output();
+        this.keepOriginalOrder = () => 0;
     }
-    set formInputInvalid(val) {
-        if (val === true) {
-            this.elementRef.nativeElement.classList.add('is-invalid');
-        }
-        else {
-            this.elementRef.nativeElement.classList.remove('is-invalid');
-        }
+    isFormControl(control) {
+        return control instanceof NgxFormControl;
     }
-    ngOnInit() {
-        this.elementRef.nativeElement.classList.add('form-select');
+    validate() {
+        this.formGroupDirective()?.validateForm();
+        this.onValidated.emit();
+    }
+    reset() {
+        this.formGroupDirective()?.resetForm();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxFormSelectDirective, isStandalone: true, selector: "select[ngxFormSelect]", inputs: { formInputInvalid: "formInputInvalid" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onValidated: "onValidated" }, viewQueries: [{ propertyName: "formGroupDirective", first: true, predicate: NgxFormGroupDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form ngxFormGroup #formGroupDirective=\"ngxFormGroup\" [formGroup]=\"formGroup()\">\n\t@for (control of formGroup().controls | keyvalue: keepOriginalOrder; track $index) {\n\t\t@if (isFormControl(control.value)) {\n\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: control }\" />\n\t\t} @else {\n\t\t\t<div ngxFormGroup [formGroup]=\"control.value | ngxIsFormGroup\" class=\"row\">\n\t\t\t\t@for (\n\t\t\t\t\tsubControl of (control.value | ngxIsFormGroup).controls | keyvalue: keepOriginalOrder;\n\t\t\t\t\ttrack $index\n\t\t\t\t) {\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: subControl }\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t}\n</form>\n\n<ng-template #formField let-control=\"control\">\n\t@if (control.value | appIsFormControl; as typedControl) {\n\t\t<div class=\"mb-3\">\n\t\t\t<!-- <label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ typedControl.customConfig?.label }}\n\t\t</label> -->\n\n\t\t\t@switch (typedControl.config?.type) {\n\t\t\t\t@case ('textarea') {\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[rows]=\"typedControl.config?.textareaConfig?.rows || 4\">\n\t\t\t\t\t</textarea>\n\t\t\t\t}\n\n\t\t\t\t@case ('select') {\n\t\t\t\t\t<select\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"select\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\">\n\t\t\t\t\t\t<option value=\"\" disabled selected>Select your option</option>\n\t\t\t\t\t\t@for (option of typedControl.config?.selectConfig?.options; track option.value) {\n\t\t\t\t\t\t\t<option [value]=\"option.value\" [disabled]=\"option.disabled\">\n\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t}\n\t\t\t\t\t</select>\n\t\t\t\t}\n\n\t\t\t\t@case ('checkbox') {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\n\t\t\t\t@default {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\t[type]=\"typedControl.config?.type || 'text'\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[autocomplete]=\"typedControl.config?.type === 'password' ? 'new-password' : undefined\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t\t{{ typedControl.config?.label }}\n\t\t\t</label>\n\n\t\t\t@if (typedControl.config?.hint) {\n\t\t\t\t<small class=\"text-muted\">\n\t\t\t\t\t{{ typedControl.config?.hint }}\n\t\t\t\t</small>\n\t\t\t}\n\n\t\t\t<ngx-form-errors [errors]=\"control.value.errors\" [isDirty]=\"control.value.dirty\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxFormGroupDirective, selector: "[ngxFormGroup]", inputs: ["formGroup", "validateOnChange"], exportAs: ["ngxFormGroup"] }, { kind: "directive", type: NgxFormLabelDirective, selector: "label[ngxFormLabel]" }, { kind: "component", type: NgxFormErrorsComponent, selector: "ngx-form-errors", inputs: ["isDirty", "errors"] }, { kind: "directive", type: NgxFormInputDirective, selector: "[ngxFormInput]", inputs: ["ngxFormInput", "formControl", "id", "name", "type", "placeholder", "isFloatingLabel"] }, { kind: "directive", type: NgxAutofocusDirective, selector: "[ngxAutofocus]", inputs: ["ngxAutofocus"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AppIsFormControlPipe, name: "appIsFormControl" }, { kind: "pipe", type: NgxIsFormGroupPipe, name: "ngxIsFormGroup" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormSelectDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'select[ngxFormSelect]' }]
-        }], propDecorators: { formInputInvalid: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-form', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgxFormGroupDirective,
+                        NgxFormLabelDirective,
+                        NgxFormErrorsComponent,
+                        NgxFormInputDirective,
+                        AppIsFormControlPipe,
+                        NgxIsFormGroupPipe,
+                        NgxAutofocusDirective,
+                    ], template: "<form ngxFormGroup #formGroupDirective=\"ngxFormGroup\" [formGroup]=\"formGroup()\">\n\t@for (control of formGroup().controls | keyvalue: keepOriginalOrder; track $index) {\n\t\t@if (isFormControl(control.value)) {\n\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: control }\" />\n\t\t} @else {\n\t\t\t<div ngxFormGroup [formGroup]=\"control.value | ngxIsFormGroup\" class=\"row\">\n\t\t\t\t@for (\n\t\t\t\t\tsubControl of (control.value | ngxIsFormGroup).controls | keyvalue: keepOriginalOrder;\n\t\t\t\t\ttrack $index\n\t\t\t\t) {\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: subControl }\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t}\n</form>\n\n<ng-template #formField let-control=\"control\">\n\t@if (control.value | appIsFormControl; as typedControl) {\n\t\t<div class=\"mb-3\">\n\t\t\t<!-- <label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ typedControl.customConfig?.label }}\n\t\t</label> -->\n\n\t\t\t@switch (typedControl.config?.type) {\n\t\t\t\t@case ('textarea') {\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[rows]=\"typedControl.config?.textareaConfig?.rows || 4\">\n\t\t\t\t\t</textarea>\n\t\t\t\t}\n\n\t\t\t\t@case ('select') {\n\t\t\t\t\t<select\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"select\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\">\n\t\t\t\t\t\t<option value=\"\" disabled selected>Select your option</option>\n\t\t\t\t\t\t@for (option of typedControl.config?.selectConfig?.options; track option.value) {\n\t\t\t\t\t\t\t<option [value]=\"option.value\" [disabled]=\"option.disabled\">\n\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t}\n\t\t\t\t\t</select>\n\t\t\t\t}\n\n\t\t\t\t@case ('checkbox') {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\n\t\t\t\t@default {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\t[type]=\"typedControl.config?.type || 'text'\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[autocomplete]=\"typedControl.config?.type === 'password' ? 'new-password' : undefined\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t\t{{ typedControl.config?.label }}\n\t\t\t</label>\n\n\t\t\t@if (typedControl.config?.hint) {\n\t\t\t\t<small class=\"text-muted\">\n\t\t\t\t\t{{ typedControl.config?.hint }}\n\t\t\t\t</small>\n\t\t\t}\n\n\t\t\t<ngx-form-errors [errors]=\"control.value.errors\" [isDirty]=\"control.value.dirty\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class NgxLoadingIndicatorComponent {
+    constructor() {
+        this.faSpinner = faSpinner;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: NgxLoadingIndicatorComponent, isStandalone: true, selector: "ngx-loading-indicator", ngImport: i0, template: "<fa-icon animation=\"spin\" size=\"2x\" [icon]=\"faSpinner\" />\n", styles: [":host{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#495057}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxLoadingIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-loading-indicator', imports: [FontAwesomeModule], template: "<fa-icon animation=\"spin\" size=\"2x\" [icon]=\"faSpinner\" />\n", styles: [":host{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#495057}\n"] }]
+        }] });
+
+class BaseModalComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: BaseModalComponent, isStandalone: true, selector: "ngx-base-modal", ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-base-modal',
+                    template: ``,
+                }]
+        }] });
 
 class NgxIconButtonDirective {
     constructor() {
@@ -480,10 +465,10 @@ class NgxIconButtonDirective {
     ngOnInit() {
         this.elementRef.nativeElement.classList.add('btn', 'icon-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxIconButtonDirective, isStandalone: true, selector: "button[ngxIconButton]", inputs: { appIconButton: ["ngxIconButton", "appIconButton"], shadow: "shadow" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxIconButtonDirective, isStandalone: true, selector: "button[ngxIconButton]", inputs: { appIconButton: ["ngxIconButton", "appIconButton"], shadow: "shadow" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxIconButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxIconButtonDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'button[ngxIconButton]' }]
         }], propDecorators: { appIconButton: [{
@@ -493,80 +478,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 type: Input
             }] } });
 
-class NgxListGroupItemAvatarDirective {
-    constructor() {
-        this.elementRef = inject((ElementRef));
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.classList.add('list-group-item-avatar');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxListGroupItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxListGroupItemAvatarDirective, isStandalone: true, selector: "[ngxListGroupItemAvatar]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxListGroupItemAvatarDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngxListGroupItemAvatar]' }]
-        }] });
-
-class NgxListGroupItemDirective {
+class NgxTooltipDirective {
     constructor() {
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject((ElementRef));
-        this._isActive = false;
-        this.onOutsideClick = new EventEmitter();
-    }
-    set isActive(val) {
-        this._isActive = val;
-        if (val) {
-            this.elementRef.nativeElement.classList.add('focus-active');
-        }
-        else {
-            this.elementRef.nativeElement.classList.remove('focus-active');
-        }
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.classList.add('list-group-item');
-        this.elementRef.nativeElement.classList.add('list-group-item-action');
-        this.elementRef.nativeElement.classList.add('d-flex', 'flex-row', 'align-items-center');
-        this.renderer.listen('window', 'click', (e) => {
-            if (e.target !== this.elementRef.nativeElement) {
-                this._isActive = false;
-                this.elementRef.nativeElement.classList.remove('focus-active');
-                this.onOutsideClick.next();
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxListGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxListGroupItemDirective, isStandalone: true, selector: "li[ngxListGroupItem]", inputs: { isActive: "isActive" }, outputs: { onOutsideClick: "onOutsideClick" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxListGroupItemDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'li[ngxListGroupItem]' }]
-        }], propDecorators: { isActive: [{
-                type: Input
-            }], onOutsideClick: [{
-                type: Output
-            }] } });
-
-class NgxListGroupDirective {
-    constructor() {
-        this.elementRef = inject((ElementRef));
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.classList.add('list-group');
-        this.elementRef.nativeElement.classList.add('list-group-flush');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxListGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: NgxListGroupDirective, isStandalone: true, selector: "ul[ngxListGroup]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxListGroupDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ul[ngxListGroup]' }]
-        }] });
-
-class NgxTooltipDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
+        this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.viewContainerRef = inject(ViewContainerRef);
         this.ngxTooltip = input.required(...(ngDevMode ? [{ debugName: "ngxTooltip" }] : []));
@@ -752,10 +666,10 @@ class NgxTooltipDirective {
             this.show();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: NgxTooltipDirective, isStandalone: true, selector: "[ngxTooltip]", inputs: { ngxTooltip: { classPropertyName: "ngxTooltip", publicName: "ngxTooltip", isSignal: true, isRequired: true, transformFunction: null }, ngxTooltipClass: { classPropertyName: "ngxTooltipClass", publicName: "ngxTooltipClass", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipPlacement: { classPropertyName: "ngxTooltipPlacement", publicName: "ngxTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipIsShow: { classPropertyName: "ngxTooltipIsShow", publicName: "ngxTooltipIsShow", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipXOffset: { classPropertyName: "ngxTooltipXOffset", publicName: "ngxTooltipXOffset", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipYOffset: { classPropertyName: "ngxTooltipYOffset", publicName: "ngxTooltipYOffset", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipDelay: { classPropertyName: "ngxTooltipDelay", publicName: "ngxTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipTriggers: { classPropertyName: "ngxTooltipTriggers", publicName: "ngxTooltipTriggers", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipSize: { classPropertyName: "ngxTooltipSize", publicName: "ngxTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipZIndex: { classPropertyName: "ngxTooltipZIndex", publicName: "ngxTooltipZIndex", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipAdaptivePosition: { classPropertyName: "ngxTooltipAdaptivePosition", publicName: "ngxTooltipAdaptivePosition", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipFallbackPlacements: { classPropertyName: "ngxTooltipFallbackPlacements", publicName: "ngxTooltipFallbackPlacements", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onHover()", "mouseleave": "onLeave()", "pointerenter": "onPointerEnter()", "pointerout": "onPointerOut()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "click": "onClick($event)", "document:click": "onDocumentClick($event)" } }, exportAs: ["ngxTooltip"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NgxTooltipDirective, isStandalone: true, selector: "[ngxTooltip]", inputs: { ngxTooltip: { classPropertyName: "ngxTooltip", publicName: "ngxTooltip", isSignal: true, isRequired: true, transformFunction: null }, ngxTooltipClass: { classPropertyName: "ngxTooltipClass", publicName: "ngxTooltipClass", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipPlacement: { classPropertyName: "ngxTooltipPlacement", publicName: "ngxTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipIsShow: { classPropertyName: "ngxTooltipIsShow", publicName: "ngxTooltipIsShow", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipXOffset: { classPropertyName: "ngxTooltipXOffset", publicName: "ngxTooltipXOffset", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipYOffset: { classPropertyName: "ngxTooltipYOffset", publicName: "ngxTooltipYOffset", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipDelay: { classPropertyName: "ngxTooltipDelay", publicName: "ngxTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipTriggers: { classPropertyName: "ngxTooltipTriggers", publicName: "ngxTooltipTriggers", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipSize: { classPropertyName: "ngxTooltipSize", publicName: "ngxTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipZIndex: { classPropertyName: "ngxTooltipZIndex", publicName: "ngxTooltipZIndex", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipAdaptivePosition: { classPropertyName: "ngxTooltipAdaptivePosition", publicName: "ngxTooltipAdaptivePosition", isSignal: true, isRequired: false, transformFunction: null }, ngxTooltipFallbackPlacements: { classPropertyName: "ngxTooltipFallbackPlacements", publicName: "ngxTooltipFallbackPlacements", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onHover()", "mouseleave": "onLeave()", "pointerenter": "onPointerEnter()", "pointerout": "onPointerOut()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "click": "onClick($event)", "document:click": "onDocumentClick($event)" } }, exportAs: ["ngxTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ngxTooltip]', exportAs: 'ngxTooltip' }]
         }], ctorParameters: () => [], propDecorators: { onHover: [{
@@ -784,216 +698,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-class CalendarComponent {
-    constructor() {
-        this.onDaySelected = output();
-        this.currentMonth = dayjs();
-        this.weeks = [];
-        this.selectedDay = null;
-        this.hoveredDay = null;
-    }
-    ngOnInit() {
-        this.generateCalendar();
-    }
-    onSelectDay(day) {
-        this.selectedDay = day;
-        this.onDaySelected.emit(this.selectedDay);
-    }
-    generateCalendar() {
-        const startOfMonth = this.currentMonth.startOf('month');
-        const endOfMonth = this.currentMonth.endOf('month');
-        const startDate = startOfMonth.startOf('week');
-        const endDate = endOfMonth.endOf('week');
-        let date = startDate.clone();
-        const calendar = [];
-        while (date.isBefore(endDate, 'day')) {
-            const week = [];
-            for (let i = 0; i < 7; i++) {
-                week.push(date.clone());
-                date = date.add(1, 'day');
-            }
-            calendar.push(week);
-        }
-        this.weeks = calendar;
-    }
-    previousMonth() {
-        this.currentMonth = this.currentMonth.subtract(1, 'month');
-        this.generateCalendar();
-    }
-    nextMonth() {
-        this.currentMonth = this.currentMonth.add(1, 'month');
-        this.generateCalendar();
-    }
-    isToday(date) {
-        return date.isSame(dayjs(), 'day');
-    }
-    isCurrentMonth(date) {
-        return date.isSame(this.currentMonth, 'month');
-    }
-    isSelected(day) {
-        return this.selectedDay?.isSame(day, 'day') || false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CalendarComponent, isStandalone: true, selector: "ngx-calendar", outputs: { onDaySelected: "onDaySelected" }, ngImport: i0, template: "<div class=\"container my-3\">\n\t<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t\t<button ngxButton variant=\"outline\" (click)=\"previousMonth()\">\u00AB</button>\n\t\t<h4 class=\"m-0\">\n\t\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t\t</h4>\n\t\t<button ngxButton variant=\"outline\" (click)=\"nextMonth()\">\u00BB</button>\n\t</div>\n\n\t<div class=\"table-responsive\">\n\t\t<table class=\"table table-bordered text-center\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t@for (day of ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']; track day) {\n\t\t\t\t\t\t<th>{{ day }}</th>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t@for (week of weeks; track $index) {\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t@for (day of week; track day.date()) {\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\tclass=\"day\"\n\t\t\t\t\t\t\t\t[class.bg-light]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t\t[class.bg-dark-subtle]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t\t[class.text-white]=\"isToday(day) && !(isSelected(day) || day === hoveredDay)\"\n\t\t\t\t\t\t\t\t[class.bg-primary]=\"isToday(day)\"\n\t\t\t\t\t\t\t\t(click)=\"onSelectDay(day)\"\n\t\t\t\t\t\t\t\t(mouseover)=\"hoveredDay = day\"\n\t\t\t\t\t\t\t\t(mouseout)=\"hoveredDay = null\">\n\t\t\t\t\t\t\t\t{{ day.date() }}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t}\n\t\t\t\t\t</tr>\n\t\t\t\t}\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n</div>\n", styles: [".day:hover{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxButtonDirective, selector: "button[ngxButton]", inputs: ["type", "ngxButton", "variant", "size"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-calendar', imports: [CommonModule, NgxButtonDirective], template: "<div class=\"container my-3\">\n\t<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t\t<button ngxButton variant=\"outline\" (click)=\"previousMonth()\">\u00AB</button>\n\t\t<h4 class=\"m-0\">\n\t\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t\t</h4>\n\t\t<button ngxButton variant=\"outline\" (click)=\"nextMonth()\">\u00BB</button>\n\t</div>\n\n\t<div class=\"table-responsive\">\n\t\t<table class=\"table table-bordered text-center\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t@for (day of ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']; track day) {\n\t\t\t\t\t\t<th>{{ day }}</th>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t@for (week of weeks; track $index) {\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t@for (day of week; track day.date()) {\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\tclass=\"day\"\n\t\t\t\t\t\t\t\t[class.bg-light]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t\t[class.bg-dark-subtle]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t\t[class.text-white]=\"isToday(day) && !(isSelected(day) || day === hoveredDay)\"\n\t\t\t\t\t\t\t\t[class.bg-primary]=\"isToday(day)\"\n\t\t\t\t\t\t\t\t(click)=\"onSelectDay(day)\"\n\t\t\t\t\t\t\t\t(mouseover)=\"hoveredDay = day\"\n\t\t\t\t\t\t\t\t(mouseout)=\"hoveredDay = null\">\n\t\t\t\t\t\t\t\t{{ day.date() }}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t}\n\t\t\t\t\t</tr>\n\t\t\t\t}\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n</div>\n", styles: [".day:hover{cursor:pointer}\n"] }]
-        }] });
-
-class NgxFormErrorsComponent {
-    constructor() {
-        this.isDirty = input(false, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
-        this.errors = input(null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
-        this.errorMessages = computed(() => {
-            const result = [];
-            if (this.isDirty() && this.errors()) {
-                for (const key in this.errors()) {
-                    if (this.errorMessageDictionary[key]) {
-                        result.push(this.errorMessageDictionary[key](this.errors()));
-                    }
-                }
-            }
-            return result;
-        }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
-        this.errorMessageDictionary = {
-            required: () => 'Field is required',
-            requiredTrue: () => 'Field is required',
-            email: () => 'Invalid E-Mail',
-            min: (errors) => `At least ${errors['min']?.requiredLength} characters are required`,
-            minlength: (errors) => `At least ${errors['minlength']?.requiredLength} characters are required`,
-            max: (errors) => `Maximum of ${errors['max']?.requiredLength} characters exceeded`,
-            maxlength: (errors) => `Maximum of ${errors['maxlength']?.requiredLength} characters exceeded`,
-            pattern: () => `Input does not match pattern`,
-            dateAfterInvalid: (errors) => `Date must be after ${errors?.['startDateValue']}`,
-            match: () => `Input does not match!`,
-            timeAfterError: (errors) => `The time must be after ${errors?.['timeAfterError']}`,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: NgxFormErrorsComponent, isStandalone: true, selector: "ngx-form-errors", inputs: { isDirty: { classPropertyName: "isDirty", publicName: "isDirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-		@if (errorMessages()) {
-			<div class="invalid-feedback d-block">
-				@for (errorMessage of errorMessages(); track $index) {
-					<div>{{ errorMessage }}</div>
-				}
-			</div>
-		}
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormErrorsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngx-form-errors',
-                    template: `
-		@if (errorMessages()) {
-			<div class="invalid-feedback d-block">
-				@for (errorMessage of errorMessages(); track $index) {
-					<div>{{ errorMessage }}</div>
-				}
-			</div>
-		}
-	`,
-                    imports: [CommonModule],
-                }]
-        }] });
-
-class NgxFormControlPipe {
-    transform(value) {
-        return value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: NgxFormControlPipe, isStandalone: true, name: "ngxAsFormControl" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormControlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxAsFormControl' }]
-        }] });
-
-class AppIsFormControlPipe {
-    transform(value) {
-        return value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AppIsFormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: AppIsFormControlPipe, isStandalone: true, name: "appIsFormControl" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AppIsFormControlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'appIsFormControl' }]
-        }] });
-
-class NgxIsFormGroupPipe {
-    transform(value) {
-        return value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxIsFormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: NgxIsFormGroupPipe, isStandalone: true, name: "ngxIsFormGroup" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxIsFormGroupPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxIsFormGroup' }]
-        }] });
-
-class NgxFormComponent {
-    constructor() {
-        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
-        this.formGroupDir = viewChild(NgxFormGroupDirective, ...(ngDevMode ? [{ debugName: "formGroupDir" }] : []));
-        this.onValidated = output();
-        this.keepOriginalOrder = () => 0;
-    }
-    isFormControl(control) {
-        return control instanceof NgxFormControl;
-    }
-    validate() {
-        this.formGroupDir()?.validateForm();
-        this.onValidated.emit();
-    }
-    reset() {
-        this.formGroupDir()?.resetForm();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onValidated: "onValidated" }, viewQueries: [{ propertyName: "formGroupDir", first: true, predicate: NgxFormGroupDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form ngxFormGroup #formGroupDir=\"ngxFormGroup\" [formGroup]=\"formGroup()\">\n\t@for (control of formGroup().controls | keyvalue: keepOriginalOrder; track $index) {\n\t\t@if (isFormControl(control.value)) {\n\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: control }\" />\n\t\t} @else {\n\t\t\t<div ngxFormGroup [formGroup]=\"control.value | ngxIsFormGroup\" class=\"row\">\n\t\t\t\t@for (\n\t\t\t\t\tsubControl of (control.value | ngxIsFormGroup).controls | keyvalue: keepOriginalOrder;\n\t\t\t\t\ttrack $index\n\t\t\t\t) {\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: subControl }\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t}\n</form>\n\n<ng-template #formField let-control=\"control\">\n\t<div class=\"mb-3\">\n\t\t<!-- <label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ (control.value | appIsFormControl).customConfig?.label }}\n\t\t</label> -->\n\n\t\t@switch ((control.value | appIsFormControl).customConfig?.type) {\n\t\t\t@case ('textarea') {\n\t\t\t\t<textarea\n\t\t\t\t\tngxFormInput\n\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[placeholder]=\"(control.value | appIsFormControl).customConfig?.placeholder\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t[rows]=\"(control.value | appIsFormControl).customConfig?.textareaConfig?.rows || 4\">\n\t\t\t\t</textarea>\n\t\t\t}\n\n\t\t\t@case ('select') {\n\t\t\t\t<select\n\t\t\t\t\tngxFormInput\n\t\t\t\t\ttype=\"select\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t(keydown.enter)=\"validate()\">\n\t\t\t\t\t<option value=\"\" disabled selected>Select your option</option>\n\t\t\t\t\t@for (\n\t\t\t\t\t\toption of (control.value | appIsFormControl).customConfig?.selectConfig?.options;\n\t\t\t\t\t\ttrack option.value\n\t\t\t\t\t) {\n\t\t\t\t\t\t<option [value]=\"option.value\" [disabled]=\"option.disabled\">\n\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t</select>\n\t\t\t}\n\n\t\t\t@case ('checkbox') {\n\t\t\t\t<input\n\t\t\t\t\tngxFormInput\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t}\n\n\t\t\t@default {\n\t\t\t\t<input\n\t\t\t\t\tngxFormInput\n\t\t\t\t\t[type]=\"(control.value | appIsFormControl).customConfig?.type || 'text'\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[placeholder]=\"(control.value | appIsFormControl).customConfig?.placeholder\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t[autocomplete]=\"\n\t\t\t\t\t\t(control.value | appIsFormControl).customConfig?.type === 'password'\n\t\t\t\t\t\t\t? 'new-password'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\"\n\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t}\n\t\t}\n\n\t\t<!-- @if ((control.value | appIsFormControl).customConfig?.type !== 'textarea') { -->\n\t\t<label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ (control.value | appIsFormControl).customConfig?.label }}\n\t\t</label>\n\t\t<!-- } -->\n\n\t\t@if ((control.value | appIsFormControl).customConfig?.hint) {\n\t\t\t<small class=\"text-muted\">\n\t\t\t\t{{ (control.value | appIsFormControl).customConfig?.hint }}\n\t\t\t</small>\n\t\t}\n\n\t\t<ngx-form-errors [errors]=\"control.value.errors\" [isDirty]=\"control.value.dirty\" />\n\t</div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxFormGroupDirective, selector: "[ngxFormGroup]", inputs: ["formGroup", "validateOnChange"], exportAs: ["ngxFormGroup"] }, { kind: "directive", type: NgxFormLabelDirective, selector: "label[ngxFormLabel]" }, { kind: "component", type: NgxFormErrorsComponent, selector: "ngx-form-errors", inputs: ["isDirty", "errors"] }, { kind: "directive", type: NgxFormInputDirective, selector: "[ngxFormInput]", inputs: ["ngxFormInput", "formControl", "id", "name", "type", "placeholder", "isFloatingLabel"] }, { kind: "directive", type: NgxAutofocusDirective, selector: "[ngxAutofocus]", inputs: ["ngxAutofocus"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgxFormControlPipe, name: "ngxAsFormControl" }, { kind: "pipe", type: AppIsFormControlPipe, name: "appIsFormControl" }, { kind: "pipe", type: NgxIsFormGroupPipe, name: "ngxIsFormGroup" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-form', imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        NgxFormControlPipe,
-                        NgxFormGroupDirective,
-                        NgxFormLabelDirective,
-                        NgxFormErrorsComponent,
-                        NgxFormInputDirective,
-                        AppIsFormControlPipe,
-                        NgxIsFormGroupPipe,
-                        NgxAutofocusDirective,
-                    ], template: "<form ngxFormGroup #formGroupDir=\"ngxFormGroup\" [formGroup]=\"formGroup()\">\n\t@for (control of formGroup().controls | keyvalue: keepOriginalOrder; track $index) {\n\t\t@if (isFormControl(control.value)) {\n\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: control }\" />\n\t\t} @else {\n\t\t\t<div ngxFormGroup [formGroup]=\"control.value | ngxIsFormGroup\" class=\"row\">\n\t\t\t\t@for (\n\t\t\t\t\tsubControl of (control.value | ngxIsFormGroup).controls | keyvalue: keepOriginalOrder;\n\t\t\t\t\ttrack $index\n\t\t\t\t) {\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: subControl }\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t}\n</form>\n\n<ng-template #formField let-control=\"control\">\n\t<div class=\"mb-3\">\n\t\t<!-- <label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ (control.value | appIsFormControl).customConfig?.label }}\n\t\t</label> -->\n\n\t\t@switch ((control.value | appIsFormControl).customConfig?.type) {\n\t\t\t@case ('textarea') {\n\t\t\t\t<textarea\n\t\t\t\t\tngxFormInput\n\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[placeholder]=\"(control.value | appIsFormControl).customConfig?.placeholder\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t[rows]=\"(control.value | appIsFormControl).customConfig?.textareaConfig?.rows || 4\">\n\t\t\t\t</textarea>\n\t\t\t}\n\n\t\t\t@case ('select') {\n\t\t\t\t<select\n\t\t\t\t\tngxFormInput\n\t\t\t\t\ttype=\"select\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t(keydown.enter)=\"validate()\">\n\t\t\t\t\t<option value=\"\" disabled selected>Select your option</option>\n\t\t\t\t\t@for (\n\t\t\t\t\t\toption of (control.value | appIsFormControl).customConfig?.selectConfig?.options;\n\t\t\t\t\t\ttrack option.value\n\t\t\t\t\t) {\n\t\t\t\t\t\t<option [value]=\"option.value\" [disabled]=\"option.disabled\">\n\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t</select>\n\t\t\t}\n\n\t\t\t@case ('checkbox') {\n\t\t\t\t<input\n\t\t\t\t\tngxFormInput\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t}\n\n\t\t\t@default {\n\t\t\t\t<input\n\t\t\t\t\tngxFormInput\n\t\t\t\t\t[type]=\"(control.value | appIsFormControl).customConfig?.type || 'text'\"\n\t\t\t\t\t[ngxAutofocus]=\"(control.value | appIsFormControl).customConfig?.autofocus || false\"\n\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t[placeholder]=\"(control.value | appIsFormControl).customConfig?.placeholder\"\n\t\t\t\t\t[formControl]=\"control.value | ngxAsFormControl\"\n\t\t\t\t\t[autocomplete]=\"\n\t\t\t\t\t\t(control.value | appIsFormControl).customConfig?.type === 'password'\n\t\t\t\t\t\t\t? 'new-password'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\"\n\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t}\n\t\t}\n\n\t\t<!-- @if ((control.value | appIsFormControl).customConfig?.type !== 'textarea') { -->\n\t\t<label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ (control.value | appIsFormControl).customConfig?.label }}\n\t\t</label>\n\t\t<!-- } -->\n\n\t\t@if ((control.value | appIsFormControl).customConfig?.hint) {\n\t\t\t<small class=\"text-muted\">\n\t\t\t\t{{ (control.value | appIsFormControl).customConfig?.hint }}\n\t\t\t</small>\n\t\t}\n\n\t\t<ngx-form-errors [errors]=\"control.value.errors\" [isDirty]=\"control.value.dirty\" />\n\t</div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }] });
-
-class NgxLoadingIndicatorComponent {
-    constructor() {
-        this.faSpinner = faSpinner;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: NgxLoadingIndicatorComponent, isStandalone: true, selector: "ngx-loading-indicator", ngImport: i0, template: "<fa-icon animation=\"spin\" size=\"2x\" [icon]=\"faSpinner\" />\n", styles: [":host{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#495057}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxLoadingIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-loading-indicator', imports: [FontAwesomeModule], template: "<fa-icon animation=\"spin\" size=\"2x\" [icon]=\"faSpinner\" />\n", styles: [":host{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#495057}\n"] }]
-        }] });
-
-class BaseModalComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BaseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: BaseModalComponent, isStandalone: true, selector: "ngx-base-modal", ngImport: i0, template: ``, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BaseModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngx-base-modal',
-                    template: ``,
-                }]
-        }] });
-
 class NgxModalComponent {
     constructor() {
         this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -1028,10 +732,10 @@ class NgxModalComponent {
     handleClickClose() {
         this.onClose.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: NgxModalComponent, isStandalone: true, selector: "ngx-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"modal d-flex justify-content-center align-items-center\" [ngxAutofocus]=\"true\" tabindex=\"0\">\n\t<div class=\"modal-dialog w-100\" [ngClass]=\"dialogCssClasses()\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header justify-content-between\">\n\t\t\t\t<h5 class=\"modal-title\">{{ title() }}</h5>\n\n\t\t\t\t@if (showClose()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tngxIconButton=\"secondary\"\n\t\t\t\t\t\tngxTooltip=\"close\"\n\t\t\t\t\t\t[ngxTooltipZIndex]=\"1055\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t(click)=\"handleClickClose()\">\n\t\t\t\t\t\t<fa-icon [icon]=\"faTimes\" />\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-body\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<ng-content select=\"[footer]\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"modal-backdrop fade show\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgxIconButtonDirective, selector: "button[ngxIconButton]", inputs: ["ngxIconButton", "shadow"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgxAutofocusDirective, selector: "[ngxAutofocus]", inputs: ["ngxAutofocus"] }, { kind: "directive", type: NgxTooltipDirective, selector: "[ngxTooltip]", inputs: ["ngxTooltip", "ngxTooltipClass", "ngxTooltipPlacement", "ngxTooltipIsShow", "ngxTooltipXOffset", "ngxTooltipYOffset", "ngxTooltipDelay", "ngxTooltipTriggers", "ngxTooltipSize", "ngxTooltipZIndex", "ngxTooltipAdaptivePosition", "ngxTooltipFallbackPlacements"], exportAs: ["ngxTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NgxModalComponent, isStandalone: true, selector: "ngx-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"modal d-flex justify-content-center align-items-center\" [ngxAutofocus]=\"true\" tabindex=\"0\">\n\t<div class=\"modal-dialog w-100\" [ngClass]=\"dialogCssClasses()\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header justify-content-between\">\n\t\t\t\t<h5 class=\"modal-title\">{{ title() }}</h5>\n\n\t\t\t\t@if (showClose()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tngxIconButton=\"secondary\"\n\t\t\t\t\t\tngxTooltip=\"close\"\n\t\t\t\t\t\t[ngxTooltipZIndex]=\"1055\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t(click)=\"handleClickClose()\">\n\t\t\t\t\t\t<fa-icon [icon]=\"faTimes\" />\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-body\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<ng-content select=\"[footer]\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"modal-backdrop fade show\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgxIconButtonDirective, selector: "button[ngxIconButton]", inputs: ["ngxIconButton", "shadow"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgxAutofocusDirective, selector: "[ngxAutofocus]", inputs: ["ngxAutofocus"] }, { kind: "directive", type: NgxTooltipDirective, selector: "[ngxTooltip]", inputs: ["ngxTooltip", "ngxTooltipClass", "ngxTooltipPlacement", "ngxTooltipIsShow", "ngxTooltipXOffset", "ngxTooltipYOffset", "ngxTooltipDelay", "ngxTooltipTriggers", "ngxTooltipSize", "ngxTooltipZIndex", "ngxTooltipAdaptivePosition", "ngxTooltipFallbackPlacements"], exportAs: ["ngxTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-modal', imports: [CommonModule, NgxIconButtonDirective, FontAwesomeModule, NgxAutofocusDirective, NgxTooltipDirective], template: "<div class=\"modal d-flex justify-content-center align-items-center\" [ngxAutofocus]=\"true\" tabindex=\"0\">\n\t<div class=\"modal-dialog w-100\" [ngClass]=\"dialogCssClasses()\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header justify-content-between\">\n\t\t\t\t<h5 class=\"modal-title\">{{ title() }}</h5>\n\n\t\t\t\t@if (showClose()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tngxIconButton=\"secondary\"\n\t\t\t\t\t\tngxTooltip=\"close\"\n\t\t\t\t\t\t[ngxTooltipZIndex]=\"1055\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t(click)=\"handleClickClose()\">\n\t\t\t\t\t\t<fa-icon [icon]=\"faTimes\" />\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-body\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<ng-content select=\"[footer]\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"modal-backdrop fade show\"></div>\n" }]
         }], propDecorators: { handleKeyboardEvent: [{
@@ -1048,10 +752,10 @@ class NgxOffCanvasComponent {
     handleClickClose() {
         this.onClose.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxOffCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: NgxOffCanvasComponent, isStandalone: true, selector: "ngx-off-canvas", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"offcanvas offcanvas-start show\" tabindex=\"-1\" id=\"offcanvas\" style=\"z-index: 1051\">\n\t<div class=\"offcanvas-header justify-content-between\">\n\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasLabel\">{{ title() }}</h5>\n\t\t<button ngxIconButton=\"secondary\" class=\"ml-auto\" (click)=\"handleClickClose()\">\n\t\t\t<fa-icon [icon]=\"faTimes\" />\n\t\t</button>\n\t</div>\n\t<ng-content />\n</div>\n\n<div class=\"modal-backdrop fade show\" (click)=\"handleClickClose()\"></div>\n", styles: [":host{z-index:9999;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgxIconButtonDirective, selector: "button[ngxIconButton]", inputs: ["ngxIconButton", "shadow"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxOffCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NgxOffCanvasComponent, isStandalone: true, selector: "ngx-off-canvas", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"offcanvas offcanvas-start show\" tabindex=\"-1\" id=\"offcanvas\" style=\"z-index: 1051\">\n\t<div class=\"offcanvas-header justify-content-between\">\n\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasLabel\">{{ title() }}</h5>\n\t\t<button ngxIconButton=\"secondary\" class=\"ml-auto\" (click)=\"handleClickClose()\">\n\t\t\t<fa-icon [icon]=\"faTimes\" />\n\t\t</button>\n\t</div>\n\t<ng-content />\n</div>\n\n<div class=\"modal-backdrop fade show\" (click)=\"handleClickClose()\"></div>\n", styles: [":host{z-index:9999;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgxIconButtonDirective, selector: "button[ngxIconButton]", inputs: ["ngxIconButton", "shadow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxOffCanvasComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxOffCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-off-canvas', imports: [FontAwesomeModule, NgxIconButtonDirective], template: "<div class=\"offcanvas offcanvas-start show\" tabindex=\"-1\" id=\"offcanvas\" style=\"z-index: 1051\">\n\t<div class=\"offcanvas-header justify-content-between\">\n\t\t<h5 class=\"offcanvas-title\" id=\"offcanvasLabel\">{{ title() }}</h5>\n\t\t<button ngxIconButton=\"secondary\" class=\"ml-auto\" (click)=\"handleClickClose()\">\n\t\t\t<fa-icon [icon]=\"faTimes\" />\n\t\t</button>\n\t</div>\n\t<ng-content />\n</div>\n\n<div class=\"modal-backdrop fade show\" (click)=\"handleClickClose()\"></div>\n", styles: [":host{z-index:9999;display:block}\n"] }]
         }] });
@@ -1060,10 +764,10 @@ class NgxTabContentComponent {
     constructor() {
         this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: NgxTabContentComponent, isStandalone: true, selector: "ngx-tab-content", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, ngImport: i0, template: "<div class=\"tab-content\" [ngClass]=\"{ active: isActive() }\">\n\t<ng-content />\n</div>\n", styles: [".tab-content{display:none;padding:20px}.tab-content.active{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NgxTabContentComponent, isStandalone: true, selector: "ngx-tab-content", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, ngImport: i0, template: "<div class=\"tab-content\" [ngClass]=\"{ active: isActive() }\">\n\t<ng-content />\n</div>\n", styles: [".tab-content{display:none;padding:20px}.tab-content.active{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-tab-content', imports: [CommonModule], template: "<div class=\"tab-content\" [ngClass]=\"{ active: isActive() }\">\n\t<ng-content />\n</div>\n", styles: [".tab-content{display:none;padding:20px}.tab-content.active{display:block}\n"] }]
         }] });
@@ -1077,10 +781,10 @@ class NgxTabComponent {
     onClick() {
         this.onSelected.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: NgxTabComponent, isStandalone: true, selector: "ngx-tab", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { isActive: "isActiveChange", onSelected: "onSelected" }, host: { listeners: { "click": "onClick($event.target)" } }, ngImport: i0, template: "<div class=\"tab\" [ngClass]=\"{ active: isActive() }\" tabindex=\"0\">\n\t<ng-content />\n</div>\n", styles: [":host{display:flex}.tab{color:var(--font-color);padding:16px 20px;border-bottom:3px solid var(--gray-80);flex-shrink:0}.tab.active{color:var(--primary);background:var(--body-bg-color);border-bottom:3px solid var(--primary)}.tab:focus{outline:0;z-index:1}.tab:hover{cursor:pointer;background-color:var(--tab-highlight)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NgxTabComponent, isStandalone: true, selector: "ngx-tab", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { isActive: "isActiveChange", onSelected: "onSelected" }, host: { listeners: { "click": "onClick($event.target)" } }, ngImport: i0, template: "<div class=\"tab\" [ngClass]=\"{ active: isActive() }\" tabindex=\"0\">\n\t<ng-content />\n</div>\n", styles: [":host{display:flex}.tab{color:var(--font-color);padding:16px 20px;border-bottom:3px solid var(--gray-80);flex-shrink:0}.tab.active{color:var(--primary);background:var(--body-bg-color);border-bottom:3px solid var(--primary)}.tab:focus{outline:0;z-index:1}.tab:hover{cursor:pointer;background-color:var(--tab-highlight)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-tab', imports: [CommonModule], template: "<div class=\"tab\" [ngClass]=\"{ active: isActive() }\" tabindex=\"0\">\n\t<ng-content />\n</div>\n", styles: [":host{display:flex}.tab{color:var(--font-color);padding:16px 20px;border-bottom:3px solid var(--gray-80);flex-shrink:0}.tab.active{color:var(--primary);background:var(--body-bg-color);border-bottom:3px solid var(--primary)}.tab:focus{outline:0;z-index:1}.tab:hover{cursor:pointer;background-color:var(--tab-highlight)}\n"] }]
         }], propDecorators: { onClick: [{
@@ -1109,10 +813,10 @@ class NgxTabsComponent {
         this.tabQueryList().forEach(tab => tab.isActive.update(() => tab === tabComponent));
         this.tabContentQueryList().forEach(tabContent => tabContent.isActive.update(() => tabContent === tabComponent.target()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: NgxTabsComponent, isStandalone: true, selector: "ngx-tabs", queries: [{ propertyName: "tabQueryList", predicate: NgxTabComponent, isSignal: true }, { propertyName: "tabContentQueryList", predicate: NgxTabContentComponent, isSignal: true }], ngImport: i0, template: "<div class=\"tabs\">\n\t<ng-content select=\"ngx-tab\" />\n</div>\n<div class=\"tab-contents\">\n\t<ng-content select=\"ngx-tab-content\" />\n</div>\n", styles: [".tabs{display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow-x:auto}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: NgxTabsComponent, isStandalone: true, selector: "ngx-tabs", queries: [{ propertyName: "tabQueryList", predicate: NgxTabComponent, isSignal: true }, { propertyName: "tabContentQueryList", predicate: NgxTabContentComponent, isSignal: true }], ngImport: i0, template: "<div class=\"tabs\">\n\t<ng-content select=\"ngx-tab\" />\n</div>\n<div class=\"tab-contents\">\n\t<ng-content select=\"ngx-tab-content\" />\n</div>\n", styles: [".tabs{display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow-x:auto}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-tabs', template: "<div class=\"tabs\">\n\t<ng-content select=\"ngx-tab\" />\n</div>\n<div class=\"tab-contents\">\n\t<ng-content select=\"ngx-tab-content\" />\n</div>\n", styles: [".tabs{display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow-x:auto}\n"] }]
         }] });
@@ -1121,8 +825,8 @@ class NgxToastComponent {
     constructor() {
         this.onClose = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: NgxToastComponent, isStandalone: true, selector: "ngx-toast", inputs: { message: "message" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: NgxToastComponent, isStandalone: true, selector: "ngx-toast", inputs: { message: "message" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
 		<div class="toast align-items-center text-bg-dark border-0 show">
 			<div class="d-flex">
 				<div class="toast-body" [innerHTML]="message"></div>
@@ -1131,7 +835,7 @@ class NgxToastComponent {
 		</div>
 	`, isInline: true, styles: [":host{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1051}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-toast', template: `
 		<div class="toast align-items-center text-bg-dark border-0 show">
@@ -1177,6 +881,301 @@ function NgxLog(methodName, logType = LogType.log, logArgs = false) {
     };
 }
 
+class NgxCardBodyDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('card-body');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxCardBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxCardBodyDirective, isStandalone: true, selector: "[ngxCardBody]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxCardBodyDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxCardBody]' }]
+        }] });
+
+class NgxCardHeaderDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('card-header');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxCardHeaderDirective, isStandalone: true, selector: "[ngxCardHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxCardHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxCardHeader]' }]
+        }] });
+
+class NgxCardDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('card');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxCardDirective, isStandalone: true, selector: "[ngxCard]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxCardDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxCard]' }]
+        }] });
+
+class NgxColDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.span = 'col';
+    }
+    set col(val) {
+        if (val) {
+            this.span = val;
+        }
+    }
+    ngAfterViewInit() {
+        this.el.nativeElement.classList.add(this.span);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxColDirective, isStandalone: true, selector: "[ngxCol]", inputs: { col: "col" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxColDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxCol]' }]
+        }], propDecorators: { col: [{
+                type: Input
+            }] } });
+
+class NgxDropdownDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.ngxDropdown = input.required(...(ngDevMode ? [{ debugName: "ngxDropdown" }] : []));
+        this.placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        // adaptivePosition: InputSignal<boolean> = input(true);
+        // fallbackPlacements: InputSignal<Placement[]> = input<Placement[]>(['top-end', 'bottom-end', 'right', 'left']);
+        this.dropdownElement = null;
+        this.dropdownMenuContentElement = null;
+        this.isDropdownVisible = false;
+    }
+    ngOnInit() {
+        if (!this.dropdownElement) {
+            this.dropdownElement = this.renderer.createElement('div');
+            this.renderer.addClass(this.dropdownElement, 'dropdown');
+            const parent = this.elementRef.nativeElement.parentNode;
+            this.renderer.insertBefore(parent, this.dropdownElement, this.elementRef.nativeElement);
+            this.renderer.appendChild(this.dropdownElement, this.elementRef.nativeElement);
+        }
+    }
+    toggleDropdown() {
+        if (this.isDropdownVisible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    onDocumentClick(event) {
+        if (this.isDropdownVisible &&
+            this.dropdownElement &&
+            !this.dropdownElement.contains(event.target) &&
+            !this.elementRef.nativeElement.contains(event.target)) {
+            this.hide();
+        }
+    }
+    show() {
+        if (!this.dropdownMenuContentElement && this.dropdownElement) {
+            const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.ngxDropdown());
+            embeddedViewRef.detectChanges();
+            this.dropdownMenuContentElement = embeddedViewRef.rootNodes[0];
+            this.renderer.appendChild(this.dropdownElement, this.dropdownMenuContentElement);
+            this.addDropdownLinksListener();
+            this.popperInstance = createPopper(this.dropdownElement, this.dropdownMenuContentElement, {
+                placement: this.placement(),
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: ({ placement }) => {
+                                if (placement.startsWith('bottom')) {
+                                    return [1, -(this.dropdownElement?.offsetHeight + 1)];
+                                }
+                                if (placement.startsWith('top')) {
+                                    return [1, -(this.dropdownElement?.offsetHeight + 1)];
+                                }
+                                if (placement.startsWith('left')) {
+                                    return [
+                                        this.dropdownElement?.offsetHeight,
+                                        -this.dropdownElement?.offsetWidth,
+                                    ];
+                                }
+                                return [1, 1];
+                            },
+                        },
+                    },
+                    // {
+                    // 	name: 'flip',
+                    // 	options: {
+                    // 		fallbackPlacements: this.adaptivePosition() ? this.fallbackPlacements() : [],
+                    // 		boundary: 'viewport',
+                    // 		padding: 0,
+                    // 	},
+                    // },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            boundary: 'viewport',
+                            padding: 0,
+                            tether: false,
+                        },
+                    },
+                ],
+            });
+        }
+        this.isDropdownVisible = true;
+    }
+    hide() {
+        if (this.dropdownMenuContentElement) {
+            this.viewContainerRef.clear();
+            this.dropdownMenuContentElement = null;
+            this.popperInstance?.destroy();
+        }
+        this.isDropdownVisible = false;
+    }
+    addDropdownLinksListener() {
+        const links = this.dropdownMenuContentElement?.querySelectorAll('.dropdown-item');
+        links?.forEach(link => {
+            this.renderer.listen(link, 'click', () => {
+                this.hide();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NgxDropdownDirective, isStandalone: true, selector: "[ngxDropdown]", inputs: { ngxDropdown: { classPropertyName: "ngxDropdown", publicName: "ngxDropdown", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleDropdown()", "document:click": "onDocumentClick($event)" } }, exportAs: ["ngxDropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxDropdown]', exportAs: 'ngxDropdown' }]
+        }], propDecorators: { toggleDropdown: [{
+                type: HostListener,
+                args: ['click']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class NgxFormSelectDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+    }
+    set formInputInvalid(val) {
+        if (val === true) {
+            this.elementRef.nativeElement.classList.add('is-invalid');
+        }
+        else {
+            this.elementRef.nativeElement.classList.remove('is-invalid');
+        }
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('form-select');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxFormSelectDirective, isStandalone: true, selector: "select[ngxFormSelect]", inputs: { formInputInvalid: "formInputInvalid" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormSelectDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'select[ngxFormSelect]' }]
+        }], propDecorators: { formInputInvalid: [{
+                type: Input
+            }] } });
+
+class NgxListGroupItemAvatarDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('list-group-item-avatar');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxListGroupItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxListGroupItemAvatarDirective, isStandalone: true, selector: "[ngxListGroupItemAvatar]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxListGroupItemAvatarDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxListGroupItemAvatar]' }]
+        }] });
+
+class NgxListGroupItemDirective {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.elementRef = inject((ElementRef));
+        this._isActive = false;
+        this.onOutsideClick = new EventEmitter();
+    }
+    set isActive(val) {
+        this._isActive = val;
+        if (val) {
+            this.elementRef.nativeElement.classList.add('focus-active');
+        }
+        else {
+            this.elementRef.nativeElement.classList.remove('focus-active');
+        }
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('list-group-item');
+        this.elementRef.nativeElement.classList.add('list-group-item-action');
+        this.elementRef.nativeElement.classList.add('d-flex', 'flex-row', 'align-items-center');
+        this.renderer.listen('window', 'click', (e) => {
+            if (e.target !== this.elementRef.nativeElement) {
+                this._isActive = false;
+                this.elementRef.nativeElement.classList.remove('focus-active');
+                this.onOutsideClick.next();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxListGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxListGroupItemDirective, isStandalone: true, selector: "li[ngxListGroupItem]", inputs: { isActive: "isActive" }, outputs: { onOutsideClick: "onOutsideClick" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxListGroupItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'li[ngxListGroupItem]' }]
+        }], propDecorators: { isActive: [{
+                type: Input
+            }], onOutsideClick: [{
+                type: Output
+            }] } });
+
+class NgxListGroupDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.classList.add('list-group');
+        this.elementRef.nativeElement.classList.add('list-group-flush');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxListGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: NgxListGroupDirective, isStandalone: true, selector: "ul[ngxListGroup]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxListGroupDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ul[ngxListGroup]' }]
+        }] });
+
+class NgxFormControlPipe {
+    transform(value) {
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: NgxFormControlPipe, isStandalone: true, name: "ngxAsFormControl" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxFormControlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxAsFormControl' }]
+        }] });
+
 class NgxImageService {
     async compress(imageBase64, quality = 0.8, fileType = 'image/jpeg') {
         const img = await this.load(imageBase64);
@@ -1216,10 +1215,10 @@ class NgxImageService {
         canvas.height = img.height;
         context.drawImage(img, 0, 0, canvas.width, canvas.height);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxImageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxImageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxImageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxImageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1247,10 +1246,10 @@ class NgxLoadingIndicatorService {
             this.componentRef.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxLoadingIndicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxLoadingIndicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxLoadingIndicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxLoadingIndicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxLoadingIndicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxLoadingIndicatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1279,10 +1278,10 @@ class NgxModalService {
             this.componentRef.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1320,10 +1319,10 @@ class NgxToastService {
             clearTimeout(this.interval);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxToastService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxToastService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NgxToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgxToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });