@falcon-ng/tailwind 0.0.11 → 0.0.13

package/fesm2022/falcon-ng-tailwind.mjs

@@ -1,251 +1,72 @@
 import * as i0 from '@angular/core';
-import { NgModule, Component, EventEmitter, Output, Input, ViewChild, Directive, Injectable, Inject, inject, APP_INITIALIZER } from '@angular/core';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { PortalModule } from '@angular/cdk/portal';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { MatTreeModule } from '@angular/material/tree';
-import * as i3$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i8 from '@angular/material/table';
-import { MatTableModule, MatTableDataSource } from '@angular/material/table';
-import * as i7 from '@angular/material/sort';
-import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i3$4 from '@angular/material/snack-bar';
-import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
-import * as i1$3 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i2$3 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i3$3 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i2$1 from '@angular/material/core';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import * as i1$1 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i1$a from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1$9 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i6$1 from '@angular/material/paginator';
-import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i5$2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i3$6 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
+import { Component, EventEmitter, Output, Input, ViewChild, Directive, Injectable, Inject, inject, APP_INITIALIZER, NgModule } from '@angular/core';
 import * as i3 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i2$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatExpansionModule } from '@angular/material/expansion';
-import * as i3$5 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i2$5 from '@angular/material/dialog';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i1 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatStepperModule } from '@angular/material/stepper';
-import * as i5$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i1$2 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatCardModule } from '@angular/material/card';
-import * as i1$4 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i1$6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1$8 from '@angular/material/bottom-sheet';
-import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
-import { MatBadgeModule } from '@angular/material/badge';
-import * as i1$5 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i2$4 from '@angular/cdk/drag-drop';
-import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
-import { CdkTreeModule } from '@angular/cdk/tree';
-import { CdkTableModule } from '@angular/cdk/table';
-import { CdkStepperModule } from '@angular/cdk/stepper';
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import { A11yModule } from '@angular/cdk/a11y';
 import * as i2 from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/tooltip';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5 from '@angular/forms';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import * as i6 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3$2 from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/material/core';
+import * as i3$3 from '@angular/material/select';
+import * as i1 from '@angular/material/datepicker';
+import * as i2$2 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/radio';
+import * as i1$2 from '@angular/material/checkbox';
+import * as i1$3 from '@angular/material/slide-toggle';
+import * as i2$3 from '@angular/material/slider';
+import * as i1$4 from '@angular/material/button-toggle';
 import { startWith, map } from 'rxjs/operators';
+import * as i1$5 from '@angular/material/autocomplete';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i2$4 from '@angular/cdk/drag-drop';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import * as i5$1 from '@angular/material/chips';
+import * as i1$6 from '@angular/material/button';
 import * as i4$1 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
+import { AngularmaterialModule } from '@falcon-ng/core';
 import * as i1$7 from '@angular/common/http';
-import { HttpEventType, HttpStatusCode, HttpRequest, withInterceptors, provideHttpClient } from '@angular/common/http';
+import { HttpRequest, HttpEventType, HttpStatusCode, provideHttpClient, withInterceptors } from '@angular/common/http';
 import { Observable, Subject, from } from 'rxjs';
+import * as i3$4 from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import { UserManager } from 'oidc-client-ts';
-
-class AngularmaterialModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AngularmaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: AngularmaterialModule, exports: [A11yModule,
-            ClipboardModule,
-            CdkStepperModule,
-            CdkTableModule,
-            CdkTreeModule,
-            DragDropModule,
-            MatAutocompleteModule,
-            MatBadgeModule,
-            MatBottomSheetModule,
-            MatButtonModule,
-            MatButtonToggleModule,
-            MatCardModule,
-            MatCheckboxModule,
-            MatChipsModule,
-            MatStepperModule,
-            MatDatepickerModule,
-            MatDialogModule,
-            MatDividerModule,
-            MatExpansionModule,
-            MatGridListModule,
-            MatIconModule,
-            MatInputModule,
-            MatListModule,
-            MatMenuModule,
-            MatNativeDateModule,
-            MatPaginatorModule,
-            MatProgressBarModule,
-            MatProgressSpinnerModule,
-            MatRadioModule,
-            MatRippleModule,
-            MatSelectModule,
-            MatSidenavModule,
-            MatSliderModule,
-            MatSlideToggleModule,
-            MatSnackBarModule,
-            MatSortModule,
-            MatTableModule,
-            MatTabsModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatTreeModule,
-            OverlayModule,
-            PortalModule,
-            ScrollingModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AngularmaterialModule, imports: [A11yModule,
-            ClipboardModule,
-            CdkStepperModule,
-            CdkTableModule,
-            CdkTreeModule,
-            DragDropModule,
-            MatAutocompleteModule,
-            MatBadgeModule,
-            MatBottomSheetModule,
-            MatButtonModule,
-            MatButtonToggleModule,
-            MatCardModule,
-            MatCheckboxModule,
-            MatChipsModule,
-            MatStepperModule,
-            MatDatepickerModule,
-            MatDialogModule,
-            MatDividerModule,
-            MatExpansionModule,
-            MatGridListModule,
-            MatIconModule,
-            MatInputModule,
-            MatListModule,
-            MatMenuModule,
-            MatNativeDateModule,
-            MatPaginatorModule,
-            MatProgressBarModule,
-            MatProgressSpinnerModule,
-            MatRadioModule,
-            MatRippleModule,
-            MatSelectModule,
-            MatSidenavModule,
-            MatSliderModule,
-            MatSlideToggleModule,
-            MatSnackBarModule,
-            MatSortModule,
-            MatTableModule,
-            MatTabsModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatTreeModule,
-            OverlayModule,
-            PortalModule,
-            ScrollingModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AngularmaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    exports: [
-                        A11yModule,
-                        ClipboardModule,
-                        CdkStepperModule,
-                        CdkTableModule,
-                        CdkTreeModule,
-                        DragDropModule,
-                        MatAutocompleteModule,
-                        MatBadgeModule,
-                        MatBottomSheetModule,
-                        MatButtonModule,
-                        MatButtonToggleModule,
-                        MatCardModule,
-                        MatCheckboxModule,
-                        MatChipsModule,
-                        MatStepperModule,
-                        MatDatepickerModule,
-                        MatDialogModule,
-                        MatDividerModule,
-                        MatExpansionModule,
-                        MatGridListModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatListModule,
-                        MatMenuModule,
-                        MatNativeDateModule,
-                        MatPaginatorModule,
-                        MatProgressBarModule,
-                        MatProgressSpinnerModule,
-                        MatRadioModule,
-                        MatRippleModule,
-                        MatSelectModule,
-                        MatSidenavModule,
-                        MatSliderModule,
-                        MatSlideToggleModule,
-                        MatSnackBarModule,
-                        MatSortModule,
-                        MatTableModule,
-                        MatTabsModule,
-                        MatToolbarModule,
-                        MatTooltipModule,
-                        MatTreeModule,
-                        OverlayModule,
-                        PortalModule,
-                        ScrollingModule
-                    ]
-                }]
-        }] });
+import * as i2$5 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as i3$5 from '@angular/material/divider';
+import * as i1$8 from '@angular/material/bottom-sheet';
+import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
+import * as i3$6 from '@angular/material/list';
+import * as i1$9 from '@angular/material/progress-bar';
+import * as i1$a from '@angular/material/progress-spinner';
+import * as i6$1 from '@angular/material/paginator';
+import { MatPaginator } from '@angular/material/paginator';
+import * as i7 from '@angular/material/sort';
+import { MatSort } from '@angular/material/sort';
+import * as i8 from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
+import * as i5$2 from '@angular/material/menu';
 
 class TextboxComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TextboxComponent, selector: "falcon-textbox", ngImport: i0, template: "<mat-form-field [formGroup]=\"formGroup\" [appearance]=\"control.appearance\" class=\"textbox-form\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [type]=\"control.type\" [formControlName]=\"control.formControlName\" [class]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}&nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}&nbsp;&nbsp;</span>\n  <mat-hint *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n    <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n         routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-container>\n  </mat-hint>\n  <ng-template #elseBlock>\n    <mat-hint>{{control.hint.text}}</mat-hint>\n  </ng-template>\n  <ng-template #withoutQueryBlock>\n    <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n  </ng-template>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [".textbox-form{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: TextboxComponent, selector: "falcon-textbox", ngImport: i0, template: "<mat-form-field [formGroup]=\"formGroup\" [appearance]=\"control.appearance\" class=\"textbox-form\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [type]=\"control.type\" [formControlName]=\"control.formControlName\" [class]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}&nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}&nbsp;&nbsp;</span>\n  <mat-hint *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n    <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n         routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-container>\n  </mat-hint>\n  <ng-template #elseBlock>\n    <mat-hint>{{control.hint.text}}</mat-hint>\n  </ng-template>\n  <ng-template #withoutQueryBlock>\n    <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n  </ng-template>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n", styles: [".textbox-form{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TextboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'falcon-textbox', template: "<mat-form-field [formGroup]=\"formGroup\" [appearance]=\"control.appearance\" class=\"textbox-form\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [type]=\"control.type\" [formControlName]=\"control.formControlName\" [class]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}&nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}&nbsp;&nbsp;</span>\n  <mat-hint *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n    <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n         routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-container>\n  </mat-hint>\n  <ng-template #elseBlock>\n    <mat-hint>{{control.hint.text}}</mat-hint>\n  </ng-template>\n  <ng-template #withoutQueryBlock>\n    <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n  </ng-template>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [".textbox-form{width:100%}\n"] }]
+            args: [{ selector: 'falcon-textbox', template: "<mat-form-field [formGroup]=\"formGroup\" [appearance]=\"control.appearance\" class=\"textbox-form\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [type]=\"control.type\" [formControlName]=\"control.formControlName\" [class]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}&nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}&nbsp;&nbsp;</span>\n  <mat-hint *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n    <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n         routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-container>\n  </mat-hint>\n  <ng-template #elseBlock>\n    <mat-hint>{{control.hint.text}}</mat-hint>\n  </ng-template>\n  <ng-template #withoutQueryBlock>\n    <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n  </ng-template>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n", styles: [".textbox-form{width:100%}\n"] }]
         }] });
 
 class TextareaComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TextareaComponent, selector: "falcon-textarea", ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\" class=\"textarea-form\">\n  <mat-label>{{control.label}}</mat-label>\n\n  <textarea matInput [formControlName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\"\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [cdkTextareaAutosize]=\"control.textAreaProperty.cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"control.textAreaProperty.cdkAutosizeMinRows\"\n    [cdkAutosizeMaxRows]=\"control.textAreaProperty.cdkAutosizeMaxRows\" [rows]=\"control.textAreaProperty.rows\"\n    [cols]=\"control.textAreaProperty.cols\"></textarea>\n\n  <span matPrefix [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}</span>\n  <span matSuffix [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}</span>\n\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [".textarea-form{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: TextareaComponent, selector: "falcon-textarea", ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\" class=\"textarea-form\">\n  <mat-label>{{control.label}}</mat-label>\n\n  <textarea matInput [formControlName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\"\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [cdkTextareaAutosize]=\"control.textAreaProperty.cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"control.textAreaProperty.cdkAutosizeMinRows\"\n    [cdkAutosizeMaxRows]=\"control.textAreaProperty.cdkAutosizeMaxRows\" [rows]=\"control.textAreaProperty.rows\"\n    [cols]=\"control.textAreaProperty.cols\"></textarea>\n\n  <span matPrefix [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}</span>\n  <span matSuffix [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}</span>\n\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n", styles: [".textarea-form{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'falcon-textarea', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\" class=\"textarea-form\">\n  <mat-label>{{control.label}}</mat-label>\n\n  <textarea matInput [formControlName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\"\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [cdkTextareaAutosize]=\"control.textAreaProperty.cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"control.textAreaProperty.cdkAutosizeMinRows\"\n    [cdkAutosizeMaxRows]=\"control.textAreaProperty.cdkAutosizeMaxRows\" [rows]=\"control.textAreaProperty.rows\"\n    [cols]=\"control.textAreaProperty.cols\"></textarea>\n\n  <span matPrefix [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}</span>\n  <span matSuffix [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}</span>\n\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [".textarea-form{width:100%}\n"] }]
+            args: [{ selector: 'falcon-textarea', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\" class=\"textarea-form\">\n  <mat-label>{{control.label}}</mat-label>\n\n  <textarea matInput [formControlName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\"\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [cdkTextareaAutosize]=\"control.textAreaProperty.cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"control.textAreaProperty.cdkAutosizeMinRows\"\n    [cdkAutosizeMaxRows]=\"control.textAreaProperty.cdkAutosizeMaxRows\" [rows]=\"control.textAreaProperty.rows\"\n    [cols]=\"control.textAreaProperty.cols\"></textarea>\n\n  <span matPrefix [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}</span>\n  <span matSuffix [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}</span>\n\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n", styles: [".textarea-form{width:100%}\n"] }]
         }] });
 
 class SelectComponent {
@@ -264,10 +85,10 @@ class SelectComponent {
         if (this.control.event !== undefined)
             this.control.event.change?.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SelectComponent, selector: "falcon-select", outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <mat-select [multiple]=\"control.selectProperty.multiple\" (selectionChange)=\"selectChange($event)\"\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [(value)]=\"control.value\">\n    <mat-option *ngFor=\"let item of control.options\" [value]=\"item.key\" [disabled]=\"item.disabled\">\n      {{item.value}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"control.hint?.show\">\n    <ng-container *ngIf=\"control.hint?.link?.isLink; else elseBlock\">\n      <ng-container *ngIf=\"control.hint?.link?.queryParams !== undefined; else withoutQueryBlock\">\n        <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n          routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-container>\n    </ng-container>\n    <ng-template #elseBlock>\n      <span>{{control.hint.text}}</span>\n    </ng-template>\n    <ng-template #withoutQueryBlock>\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-template>\n  </mat-hint>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: SelectComponent, selector: "falcon-select", outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <mat-select [multiple]=\"control.selectProperty.multiple\" (selectionChange)=\"selectChange($event)\"\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [(value)]=\"control.value\">\n    <mat-option *ngFor=\"let item of control.options\" [value]=\"item.key\" [disabled]=\"item.disabled\">\n      {{item.value}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"control.hint?.show\">\n    <ng-container *ngIf=\"control.hint?.link?.isLink; else elseBlock\">\n      <ng-container *ngIf=\"control.hint?.link?.queryParams !== undefined; else withoutQueryBlock\">\n        <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n          routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-container>\n    </ng-container>\n    <ng-template #elseBlock>\n      <span>{{control.hint.text}}</span>\n    </ng-template>\n    <ng-template #withoutQueryBlock>\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-template>\n  </mat-hint>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-select', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <mat-select [multiple]=\"control.selectProperty.multiple\" (selectionChange)=\"selectChange($event)\"\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [(value)]=\"control.value\">\n    <mat-option *ngFor=\"let item of control.options\" [value]=\"item.key\" [disabled]=\"item.disabled\">\n      {{item.value}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"control.hint?.show\">\n    <ng-container *ngIf=\"control.hint?.link?.isLink; else elseBlock\">\n      <ng-container *ngIf=\"control.hint?.link?.queryParams !== undefined; else withoutQueryBlock\">\n        <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n          routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-container>\n    </ng-container>\n    <ng-template #elseBlock>\n      <span>{{control.hint.text}}</span>\n    </ng-template>\n    <ng-template #withoutQueryBlock>\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-template>\n  </mat-hint>\n</mat-form-field>" }]
         }], ctorParameters: () => [], propDecorators: { selectionChange: [{
@@ -275,12 +96,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }] } });
 
 class DatePickerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DatePickerComponent, selector: "falcon-date-picker", ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                [floatLabel]=\"control.floatLabel\" [ngStyle]=\"control.style\"\n                [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControlName]=\"control.formControlName\"\n         [placeholder]=\"control.placeHolder\" [type]=\"control.type\"\n         [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon *ngIf=\"control.suffix.isIcon\">keyboard_arrow_down</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: DatePickerComponent, selector: "falcon-date-picker", ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                [floatLabel]=\"control.floatLabel\" [ngStyle]=\"control.style\"\n                [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControlName]=\"control.formControlName\"\n         [placeholder]=\"control.placeHolder\" [type]=\"control.type\"\n         [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon *ngIf=\"control.suffix.isIcon\">keyboard_arrow_down</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'falcon-date-picker', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                [floatLabel]=\"control.floatLabel\" [ngStyle]=\"control.style\"\n                [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControlName]=\"control.formControlName\"\n         [placeholder]=\"control.placeHolder\" [type]=\"control.type\"\n         [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon *ngIf=\"control.suffix.isIcon\">keyboard_arrow_down</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>" }]
+            args: [{ selector: 'falcon-date-picker', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                [floatLabel]=\"control.floatLabel\" [ngStyle]=\"control.style\"\n                [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControlName]=\"control.formControlName\"\n         [placeholder]=\"control.placeHolder\" [type]=\"control.type\"\n         [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon *ngIf=\"control.suffix.isIcon\">keyboard_arrow_down</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n" }]
         }] });
 
 class RadioComponent {
@@ -298,10 +119,10 @@ class RadioComponent {
     radioGroupChangeEvent($event) {
         this.radioGroupChange.emit($event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RadioComponent, selector: "falcon-radio", outputs: { radioGroupChange: "radioGroupChange" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <label class=\"radio-label-padding\">{{control.label | titlecase}}</label>\n  <mat-radio-group [attr.aria-label]=\"control.label\"\n                   [labelPosition]=\"control.appearance\"\n                   [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n                   [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                   (change)=\"radioGroupChangeEvent($event)\">\n    <mat-radio-button [ngClass]=\"control.class\"\n                      *ngFor=\"let item of control.options\" [value]=\"item.value\">{{item.viewValue | titlecase}}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>", styles: [".radio-group-column{display:flex;flex-direction:column;margin:15px 0}.radio-group-row{display:flex;flex-direction:row;margin:15px 0}.radio-button{margin:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: RadioComponent, selector: "falcon-radio", outputs: { radioGroupChange: "radioGroupChange" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <label class=\"radio-label-padding\">{{control.label | titlecase}}</label>\n  <mat-radio-group [attr.aria-label]=\"control.label\"\n                   [labelPosition]=\"control.appearance\"\n                   [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n                   [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                   (change)=\"radioGroupChangeEvent($event)\">\n    <mat-radio-button [ngClass]=\"control.class\"\n                      *ngFor=\"let item of control.options\" [value]=\"item.value\">{{item.viewValue | titlecase}}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>", styles: [".radio-group-column{display:flex;flex-direction:column;margin:15px 0}.radio-group-row{display:flex;flex-direction:row;margin:15px 0}.radio-button{margin:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-radio', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <label class=\"radio-label-padding\">{{control.label | titlecase}}</label>\n  <mat-radio-group [attr.aria-label]=\"control.label\"\n                   [labelPosition]=\"control.appearance\"\n                   [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n                   [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                   (change)=\"radioGroupChangeEvent($event)\">\n    <mat-radio-button [ngClass]=\"control.class\"\n                      *ngFor=\"let item of control.options\" [value]=\"item.value\">{{item.viewValue | titlecase}}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>", styles: [".radio-group-column{display:flex;flex-direction:column;margin:15px 0}.radio-group-row{display:flex;flex-direction:row;margin:15px 0}.radio-button{margin:5px}\n"] }]
         }], propDecorators: { radioGroupChange: [{
@@ -313,28 +134,28 @@ class CheckboxComponent {
         if (this.control.event !== undefined)
             this.control?.event?.change?.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CheckboxComponent, selector: "falcon-checkbox", ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n    <mat-checkbox [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n        [color]=\"control.color != null ? control.color : 'accent'\" [labelPosition]=\"control.labelPosition\"\n        [formControlName]=\"control.formControlName\" (change)=\"change($event)\">\n        {{control.label}}</mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CheckboxComponent, selector: "falcon-checkbox", ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n    <mat-checkbox [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n        [color]=\"control.color != null ? control.color : 'accent'\" [labelPosition]=\"control.labelPosition\"\n        [formControlName]=\"control.formControlName\" (change)=\"change($event)\">\n        {{control.label}}</mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-checkbox', template: "<div [formGroup]=\"formGroup\">\n    <mat-checkbox [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n        [color]=\"control.color != null ? control.color : 'accent'\" [labelPosition]=\"control.labelPosition\"\n        [formControlName]=\"control.formControlName\" (change)=\"change($event)\">\n        {{control.label}}</mat-checkbox>\n</div>" }]
         }] });
 
 class SlideToggleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SlideToggleComponent, selector: "falcon-slide-toggle", ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <mat-slide-toggle [labelPosition]=\"control.appearance\"\n                    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                    [formControlName]=\"control.formControlName\" [color]=\"control.color\">\n    {{control.label}}\n  </mat-slide-toggle>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: SlideToggleComponent, selector: "falcon-slide-toggle", ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <mat-slide-toggle [labelPosition]=\"control.appearance\"\n                    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                    [formControlName]=\"control.formControlName\" [color]=\"control.color\">\n    {{control.label}}\n  </mat-slide-toggle>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-slide-toggle', template: "<div [formGroup]=\"formGroup\">\n  <mat-slide-toggle [labelPosition]=\"control.appearance\"\n                    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                    [formControlName]=\"control.formControlName\" [color]=\"control.color\">\n    {{control.label}}\n  </mat-slide-toggle>\n</div>" }]
         }] });
 
 class SliderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SliderComponent, selector: "falcon-slider", ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [formGroup]=\"formGroup\">\n<mat-label>{{control.label}}</mat-label>&nbsp;&nbsp;&nbsp;\n  <mat-slider\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [color]=\"control.color\"\n    [max]=\"control.sliderProperty.max\"\n    [min]=\"control.sliderProperty.min\"\n    [step]=\"control.sliderProperty.step\">\n    <input matSliderThumb [formControlName]=\"control.formControlName\">\n  </mat-slider>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: SliderComponent, selector: "falcon-slider", ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [formGroup]=\"formGroup\">\n<mat-label>{{control.label}}</mat-label>&nbsp;&nbsp;&nbsp;\n  <mat-slider\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [color]=\"control.color\"\n    [max]=\"control.sliderProperty.max\"\n    [min]=\"control.sliderProperty.min\"\n    [step]=\"control.sliderProperty.step\">\n    <input matSliderThumb [formControlName]=\"control.formControlName\">\n  </mat-slider>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-slider', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [formGroup]=\"formGroup\">\n<mat-label>{{control.label}}</mat-label>&nbsp;&nbsp;&nbsp;\n  <mat-slider\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [color]=\"control.color\"\n    [max]=\"control.sliderProperty.max\"\n    [min]=\"control.sliderProperty.min\"\n    [step]=\"control.sliderProperty.step\">\n    <input matSliderThumb [formControlName]=\"control.formControlName\">\n  </mat-slider>\n</div>" }]
         }] });
@@ -353,10 +174,10 @@ class ButtonToggleComponent {
     toggleChange($event) {
         this.toggleGroupChange.emit($event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ButtonToggleComponent, selector: "falcon-button-toggle", outputs: { toggleGroupChange: "toggleGroupChange" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <mat-label [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             *ngIf=\"control.label != undefined\">\n    {{control.label | titlecase}}\n  </mat-label>\n  <mat-button-toggle-group\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [appearance]=\"control.appearance\" [ngStyle]=\"control.style\"\n    [ngClass]=\"control.class\" [attr.aria-label]=\"control.label\"\n    class=\"botton-toggle\" (change)=\"toggleChange($event)\">\n    <mat-button-toggle *ngFor=\"let item of control.options\" [value]=\"item?.value\"\n                       [ngStyle]=\"control.style\"\n                       [ngClass]=\"control.class\">\n      <mat-icon [ngClass]=\"item?.class\" aria-hidden=\"false\" aria-label=\"item icon\" *ngIf=\"item?.icon != undefined\">\n        {{item?.icon}}\n      </mat-icon>\n      {{item.viewValue | titlecase}}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ButtonToggleComponent, selector: "falcon-button-toggle", outputs: { toggleGroupChange: "toggleGroupChange" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <mat-label [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             *ngIf=\"control.label != undefined\">\n    {{control.label | titlecase}}\n  </mat-label>\n  <mat-button-toggle-group\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [appearance]=\"control.appearance\" [ngStyle]=\"control.style\"\n    [ngClass]=\"control.class\" [attr.aria-label]=\"control.label\"\n    class=\"botton-toggle\" (change)=\"toggleChange($event)\">\n    <mat-button-toggle *ngFor=\"let item of control.options\" [value]=\"item?.value\"\n                       [ngStyle]=\"control.style\"\n                       [ngClass]=\"control.class\">\n      <mat-icon [ngClass]=\"item?.class\" aria-hidden=\"false\" aria-label=\"item icon\" *ngIf=\"item?.icon != undefined\">\n        {{item?.icon}}\n      </mat-icon>\n      {{item.viewValue | titlecase}}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ButtonToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-button-toggle', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <mat-label [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             *ngIf=\"control.label != undefined\">\n    {{control.label | titlecase}}\n  </mat-label>\n  <mat-button-toggle-group\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [appearance]=\"control.appearance\" [ngStyle]=\"control.style\"\n    [ngClass]=\"control.class\" [attr.aria-label]=\"control.label\"\n    class=\"botton-toggle\" (change)=\"toggleChange($event)\">\n    <mat-button-toggle *ngFor=\"let item of control.options\" [value]=\"item?.value\"\n                       [ngStyle]=\"control.style\"\n                       [ngClass]=\"control.class\">\n      <mat-icon [ngClass]=\"item?.class\" aria-hidden=\"false\" aria-label=\"item icon\" *ngIf=\"item?.icon != undefined\">\n        {{item?.icon}}\n      </mat-icon>\n      {{item.viewValue | titlecase}}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>" }]
         }], propDecorators: { toggleGroupChange: [{
@@ -377,12 +198,12 @@ class AutoCompleteComponent {
     optionSelected(value) {
         this.formGroup?.get(this.control?.formControlName)?.setValue(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: AutoCompleteComponent, selector: "falcon-auto-complete", ngImport: i0, template: "<mat-form-field *ngIf=\"control.appearance != 'plain'; else plainInput\" [appearance]=\"control.appearance\"\n  [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n    [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [matAutocomplete]=\"auto\"\n    [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}} &nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}} &nbsp;&nbsp;</span>\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n\n<ng-template #plainInput>\n  <div [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <input type=\"text\" [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n      [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n      [matAutocomplete]=\"auto\"\n      [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n      class=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\">\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: AutoCompleteComponent, selector: "falcon-auto-complete", ngImport: i0, template: "<mat-form-field *ngIf=\"control.appearance != 'plain'; else plainInput\" [appearance]=\"control.appearance\"\n  [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n    [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [matAutocomplete]=\"auto\"\n    [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}} &nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}} &nbsp;&nbsp;</span>\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation?.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n\n<ng-template #plainInput>\n  <div [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <input type=\"text\" [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n      [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n      [matAutocomplete]=\"auto\"\n      [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n      class=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\">\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'falcon-auto-complete', template: "<mat-form-field *ngIf=\"control.appearance != 'plain'; else plainInput\" [appearance]=\"control.appearance\"\n  [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n    [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [matAutocomplete]=\"auto\"\n    [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}} &nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}} &nbsp;&nbsp;</span>\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n\n<ng-template #plainInput>\n  <div [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <input type=\"text\" [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n      [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n      [matAutocomplete]=\"auto\"\n      [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n      class=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\">\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n</ng-template>" }]
+            args: [{ selector: 'falcon-auto-complete', template: "<mat-form-field *ngIf=\"control.appearance != 'plain'; else plainInput\" [appearance]=\"control.appearance\"\n  [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n    [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [matAutocomplete]=\"auto\"\n    [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}} &nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}} &nbsp;&nbsp;</span>\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation?.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n\n<ng-template #plainInput>\n  <div [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <input type=\"text\" [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n      [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n      [matAutocomplete]=\"auto\"\n      [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n      class=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\">\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class ChipComponent {
@@ -457,10 +278,10 @@ class ChipComponent {
             this.control.event.keyboardEnter?.emit(event);
         this.chipTextInput.nativeElement.value = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ChipComponent, deps: [{ token: i5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ChipComponent, selector: "falcon-chip", inputs: { control: "control", formGroup: "formGroup" }, viewQueries: [{ propertyName: "chipAutoCompleteInput", first: true, predicate: ["chipAutoCompleteInput"], descendants: true }, { propertyName: "chipTextInput", first: true, predicate: ["chipTextInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"control.type\">\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'search'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipAutoCompleteInput [formControl]=\"autoCompleteControl\"\n             [formArrayName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\"\n             [ngClass]=\"control.class\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n      <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n        {{item.value}}\n      </mat-option>\n    </mat-autocomplete>\n    <mat-hint>\n      <ng-container *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n        <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n          <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n             routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n        </ng-container>\n      </ng-container>\n      <ng-template #elseBlock>\n        <span>{{control.hint.text}}</span>\n      </ng-template>\n      <ng-template #withoutQueryBlock>\n        <a [routerLink]=\"[control.hint.link?.routerLink]\"\n           routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-template>\n    </mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'text'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [value]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option?.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipTextInput [formArrayName]=\"control.formControlName\" multiple\n             [placeholder]=\"control.placeHolder\"\n             [matChipInputFor]=\"chipGrid\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matChipInputAddOnBlur]=\"addOnBlur\"\n             (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n  </mat-form-field>\n\n  <mat-chip-listbox aria-label=\"Chips selection\" *ngSwitchDefault>\n    <mat-chip color=\"{{control.color}}\" selected>{{control.label}}</mat-chip>\n  </mat-chip-listbox>\n\n\n  <mat-chip-set class=\"chip-list\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\"\n                *ngSwitchCase=\"'dragDrop'\" class=\"example-chip\">\n    <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let option of control?.options\">\n      {{option?.value}}\n    </mat-chip>\n  </mat-chip-set>\n\n</ng-container>", styles: [".chip-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ChipComponent, deps: [{ token: i5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ChipComponent, selector: "falcon-chip", inputs: { control: "control", formGroup: "formGroup" }, viewQueries: [{ propertyName: "chipAutoCompleteInput", first: true, predicate: ["chipAutoCompleteInput"], descendants: true }, { propertyName: "chipTextInput", first: true, predicate: ["chipTextInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"control.type\">\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'search'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipAutoCompleteInput [formControl]=\"autoCompleteControl\"\n             [formArrayName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\"\n             [ngClass]=\"control.class\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n      <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n        {{item.value}}\n      </mat-option>\n    </mat-autocomplete>\n    <mat-hint>\n      <ng-container *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n        <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n          <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n             routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n        </ng-container>\n      </ng-container>\n      <ng-template #elseBlock>\n        <span>{{control.hint.text}}</span>\n      </ng-template>\n      <ng-template #withoutQueryBlock>\n        <a [routerLink]=\"[control.hint.link?.routerLink]\"\n           routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-template>\n    </mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'text'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [value]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option?.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipTextInput [formArrayName]=\"control.formControlName\" multiple\n             [placeholder]=\"control.placeHolder\"\n             [matChipInputFor]=\"chipGrid\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matChipInputAddOnBlur]=\"addOnBlur\"\n             (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n  </mat-form-field>\n\n  <mat-chip-listbox aria-label=\"Chips selection\" *ngSwitchDefault>\n    <mat-chip color=\"{{control.color}}\" selected>{{control.label}}</mat-chip>\n  </mat-chip-listbox>\n\n\n  <mat-chip-set class=\"chip-list\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\"\n                *ngSwitchCase=\"'dragDrop'\" class=\"example-chip\">\n    <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let option of control?.options\">\n      {{option?.value}}\n    </mat-chip>\n  </mat-chip-set>\n\n</ng-container>", styles: [".chip-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-chip', template: "<ng-container [ngSwitch]=\"control.type\">\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'search'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipAutoCompleteInput [formControl]=\"autoCompleteControl\"\n             [formArrayName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\"\n             [ngClass]=\"control.class\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n      <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n        {{item.value}}\n      </mat-option>\n    </mat-autocomplete>\n    <mat-hint>\n      <ng-container *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n        <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n          <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n             routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n        </ng-container>\n      </ng-container>\n      <ng-template #elseBlock>\n        <span>{{control.hint.text}}</span>\n      </ng-template>\n      <ng-template #withoutQueryBlock>\n        <a [routerLink]=\"[control.hint.link?.routerLink]\"\n           routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-template>\n    </mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'text'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [value]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option?.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipTextInput [formArrayName]=\"control.formControlName\" multiple\n             [placeholder]=\"control.placeHolder\"\n             [matChipInputFor]=\"chipGrid\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matChipInputAddOnBlur]=\"addOnBlur\"\n             (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n  </mat-form-field>\n\n  <mat-chip-listbox aria-label=\"Chips selection\" *ngSwitchDefault>\n    <mat-chip color=\"{{control.color}}\" selected>{{control.label}}</mat-chip>\n  </mat-chip-listbox>\n\n\n  <mat-chip-set class=\"chip-list\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\"\n                *ngSwitchCase=\"'dragDrop'\" class=\"example-chip\">\n    <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let option of control?.options\">\n      {{option?.value}}\n    </mat-chip>\n  </mat-chip-set>\n\n</ng-container>", styles: [".chip-list{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i5.FormBuilder }], propDecorators: { control: [{
@@ -485,10 +306,10 @@ class ButtonComponent {
     childBtnClick() {
         this.btnClick.emit("Button Click Event");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ButtonComponent, selector: "falcon-button", inputs: { control: "control", formGroup: "formGroup" }, outputs: { btnClick: "btnClick" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <ng-container [ngSwitch]=\"control.appearance\">\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [color]=\"control.color\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" mat-button *ngSwitchCase=\"0\">\n            <mat-icon *ngIf=\"control?.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-raised-button *ngSwitchCase=\"1\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-stroked-button *ngSwitchCase=\"2\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-flat-button *ngSwitchCase=\"3\">\n            <mat-icon *ngIf=\"control.suffix.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-icon-button [attr.aria-label]=\"control.label\" *ngSwitchCase=\"4\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"5\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-mini-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"6\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <a mat-stroked-button *ngSwitchCase=\"7\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" routerLink=\"[]\">{{control.label}}</a>\n        <a mat-stroked-button *ngSwitchCase=\"8\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\"\n            href=\"{{control.value}}\">{{control.label}}</a>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ButtonComponent, selector: "falcon-button", inputs: { control: "control", formGroup: "formGroup" }, outputs: { btnClick: "btnClick" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <ng-container [ngSwitch]=\"control.appearance\">\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [color]=\"control.color\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" mat-button *ngSwitchCase=\"0\">\n            <mat-icon *ngIf=\"control?.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-raised-button *ngSwitchCase=\"1\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-stroked-button *ngSwitchCase=\"2\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-flat-button *ngSwitchCase=\"3\">\n            <mat-icon *ngIf=\"control.suffix.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-icon-button [attr.aria-label]=\"control.label\" *ngSwitchCase=\"4\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"5\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-mini-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"6\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <a mat-stroked-button *ngSwitchCase=\"7\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" routerLink=\"[]\">{{control.label}}</a>\n        <a mat-stroked-button *ngSwitchCase=\"8\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\"\n            href=\"{{control.value}}\">{{control.label}}</a>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-button', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <ng-container [ngSwitch]=\"control.appearance\">\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [color]=\"control.color\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" mat-button *ngSwitchCase=\"0\">\n            <mat-icon *ngIf=\"control?.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-raised-button *ngSwitchCase=\"1\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-stroked-button *ngSwitchCase=\"2\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-flat-button *ngSwitchCase=\"3\">\n            <mat-icon *ngIf=\"control.suffix.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-icon-button [attr.aria-label]=\"control.label\" *ngSwitchCase=\"4\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"5\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-mini-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"6\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <a mat-stroked-button *ngSwitchCase=\"7\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" routerLink=\"[]\">{{control.label}}</a>\n        <a mat-stroked-button *ngSwitchCase=\"8\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\"\n            href=\"{{control.value}}\">{{control.label}}</a>\n    </ng-container>\n</div>" }]
         }], propDecorators: { control: [{
@@ -500,31 +321,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }] } });
 
 class RichTextEditorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RichTextEditorComponent, selector: "lib-rich-text-editor", ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <mat-label>{{control.label}}</mat-label>\n  <angular-editor [formControlName]=\"control.formControlName\" [config]=\"control.editorProperty\">\n  </angular-editor>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: RichTextEditorComponent, selector: "lib-rich-text-editor", ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <mat-label>{{control.label}}</mat-label>\n  <angular-editor [formControlName]=\"control.formControlName\" [config]=\"control.editorProperty\">\n  </angular-editor>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation?.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-rich-text-editor', template: "<ng-container [formGroup]=\"formGroup\">\n  <mat-label>{{control.label}}</mat-label>\n  <angular-editor [formControlName]=\"control.formControlName\" [config]=\"control.editorProperty\">\n  </angular-editor>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</ng-container>" }]
+            args: [{ selector: 'lib-rich-text-editor', template: "<ng-container [formGroup]=\"formGroup\">\n  <mat-label>{{control.label}}</mat-label>\n  <angular-editor [formControlName]=\"control.formControlName\" [config]=\"control.editorProperty\">\n  </angular-editor>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation?.name || '')\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</ng-container>\n" }]
         }] });
 
 class Constant {
-    static { this.ComponentMapper = [
-        TextboxComponent,
-        TextareaComponent,
-        SelectComponent,
-        DatePickerComponent,
-        RadioComponent,
-        CheckboxComponent,
-        ButtonComponent,
-        SlideToggleComponent,
-        SliderComponent,
-        ButtonToggleComponent,
-        AutoCompleteComponent,
-        ChipComponent,
-        RichTextEditorComponent,
-        //DividerComponent,
-    ]; }
+    static { this.ComponentMapper = {
+        textbox: TextboxComponent,
+        textarea: TextareaComponent,
+        select: SelectComponent,
+        datepicker: DatePickerComponent,
+        radio: RadioComponent,
+        checkbox: CheckboxComponent,
+        button: ButtonComponent,
+        slideToggle: SlideToggleComponent,
+        slider: SliderComponent,
+        buttonToggle: ButtonToggleComponent,
+        autocomplete: AutoCompleteComponent,
+        chip: ChipComponent,
+        editor: RichTextEditorComponent,
+        divider: RichTextEditorComponent
+    }; }
 }
 
 class ReactiveFieldDirective {
@@ -538,10 +359,10 @@ class ReactiveFieldDirective {
             this.componentRef.instance.formGroup = this.formGroup;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ReactiveFieldDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: { control: "control", formGroup: "formGroup" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReactiveFieldDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: { control: "control", formGroup: "formGroup" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ReactiveFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReactiveFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[reactiveField]'
@@ -553,10 +374,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }] } });
 
 class ControlBuilderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ControlBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ControlBuilderComponent, selector: "control-builder", inputs: { layout: "layout", formGroup: "formGroup" }, ngImport: i0, template: "<div [class]=\"layout.class\">\n  <ng-container *ngFor=\"let control of layout.baseControls\">\n    <ng-container reactiveField [control]=\"control\" [formGroup]=\"formGroup\"></ng-container>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: ["control", "formGroup"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ControlBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ControlBuilderComponent, selector: "control-builder", inputs: { layout: "layout", formGroup: "formGroup" }, ngImport: i0, template: "<div [class]=\"layout.class\">\n  <ng-container *ngFor=\"let control of layout.baseControls\">\n    <ng-container reactiveField [control]=\"control\" [formGroup]=\"formGroup\"></ng-container>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: ["control", "formGroup"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ControlBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ControlBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'control-builder', template: "<div [class]=\"layout.class\">\n  <ng-container *ngFor=\"let control of layout.baseControls\">\n    <ng-container reactiveField [control]=\"control\" [formGroup]=\"formGroup\"></ng-container>\n  </ng-container>\n</div>" }]
         }], propDecorators: { layout: [{
@@ -569,10 +390,10 @@ class EnvironmentViewModel {
 }
 
 class IGenericHttpClient {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IGenericHttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IGenericHttpClient }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IGenericHttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IGenericHttpClient }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IGenericHttpClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IGenericHttpClient, decorators: [{
             type: Injectable
         }] });
 
@@ -633,10 +454,10 @@ class LoggerService {
     verbose(message, ...optionalParams) {
         this.log(message, "Verbose" /* LoggingLevel.Verbose */, optionalParams);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: LoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoggerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -831,10 +652,10 @@ class GenericHttpClient {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GenericHttpClient, deps: [{ token: i1$7.HttpClient }, { token: EnvironmentViewModel }, { token: i3$4.MatSnackBar }, { token: LoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GenericHttpClient, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GenericHttpClient, deps: [{ token: i1$7.HttpClient }, { token: EnvironmentViewModel }, { token: i3$4.MatSnackBar }, { token: LoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GenericHttpClient, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GenericHttpClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GenericHttpClient, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -877,10 +698,10 @@ class AppSettingService {
     getAppsettingValue() {
         return this.appSettings ? this.appSettings : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AppSettingService, deps: [{ token: i1$7.HttpClient }, { token: LoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AppSettingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AppSettingService, deps: [{ token: i1$7.HttpClient }, { token: LoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AppSettingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AppSettingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AppSettingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -950,10 +771,10 @@ class TokenHelperService {
         }
         return window.atob(output);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TokenHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TokenHelperService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TokenHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TokenHelperService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TokenHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TokenHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1078,10 +899,10 @@ class AuthService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthService, deps: [{ token: LoggerService }, { token: TokenHelperService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthService, deps: [{ token: LoggerService }, { token: TokenHelperService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1100,10 +921,10 @@ class DialogComponent {
     constructor(data) {
         this.data = data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DialogComponent, selector: "lib-dialog", ngImport: i0, template: "<span mat-dialog-title>{{data.title}}</span>\n<mat-divider></mat-divider>\n<div mat-dialog-content>\n  <span class=\"mat-h3\">{{data.bodyMessage}}</span>\n</div>\n<mat-divider></mat-divider>\n<div mat-dialog-actions>\n    <button mat-raised-button [mat-dialog-close]=\"\" cdkFocusInitial>{{data.cancelBtnText}}</button>\n    <button mat-raised-button [color]=\"'warn'\" [mat-dialog-close]=\"data\">\n      {{data.mainbtnText}}\n    </button>\n  </div>\n", styles: [".mat-mdc-dialog-actions{justify-content:end!important}\n"], dependencies: [{ kind: "component", type: i1$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: DialogComponent, selector: "lib-dialog", ngImport: i0, template: "<span mat-dialog-title>{{data.title}}</span>\n<mat-divider></mat-divider>\n<div mat-dialog-content>\n  <span class=\"mat-h3\">{{data.bodyMessage}}</span>\n</div>\n<mat-divider></mat-divider>\n<div mat-dialog-actions>\n    <button mat-raised-button [mat-dialog-close]=\"\" cdkFocusInitial>{{data.cancelBtnText}}</button>\n    <button mat-raised-button [color]=\"'warn'\" [mat-dialog-close]=\"data\">\n      {{data.mainbtnText}}\n    </button>\n  </div>\n", styles: [".mat-mdc-dialog-actions{justify-content:end!important}\n"], dependencies: [{ kind: "component", type: i1$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-dialog', template: "<span mat-dialog-title>{{data.title}}</span>\n<mat-divider></mat-divider>\n<div mat-dialog-content>\n  <span class=\"mat-h3\">{{data.bodyMessage}}</span>\n</div>\n<mat-divider></mat-divider>\n<div mat-dialog-actions>\n    <button mat-raised-button [mat-dialog-close]=\"\" cdkFocusInitial>{{data.cancelBtnText}}</button>\n    <button mat-raised-button [color]=\"'warn'\" [mat-dialog-close]=\"data\">\n      {{data.mainbtnText}}\n    </button>\n  </div>\n", styles: [".mat-mdc-dialog-actions{justify-content:end!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1112,10 +933,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 }] }] });
 
 class SnackBarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SnackBarComponent, selector: "lib-snack-bar", ngImport: i0, template: "<span>Pizza party!!! \uD83C\uDF55</span>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: SnackBarComponent, selector: "lib-snack-bar", ngImport: i0, template: "<span>Pizza party!!! \uD83C\uDF55</span>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-snack-bar', template: "<span>Pizza party!!! \uD83C\uDF55</span>" }]
         }] });
@@ -1125,16 +946,14 @@ class BottomSheetComponent {
         this._bottomSheetRef = _bottomSheetRef;
         this.data = data;
     }
-    ngOnInit() {
-    }
     click(event, item) {
         this._bottomSheetRef.dismiss(item);
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BottomSheetComponent, deps: [{ token: i1$8.MatBottomSheetRef }, { token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: BottomSheetComponent, selector: "lib-bottom-sheet", ngImport: i0, template: "<mat-nav-list>\n  <ng-container *ngFor=\"let item of data\">\n    <a [href]=\"item.link\" mat-list-item (click)=\"click($event,item)\">\n      <span matListItemTitle>{{item.levelOneText}}</span>\n      <span matLine>{{item.levelTwoText}}</span>\n    </a>\n  </ng-container>\n\n</mat-nav-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i3$6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BottomSheetComponent, deps: [{ token: i1$8.MatBottomSheetRef }, { token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: BottomSheetComponent, selector: "lib-bottom-sheet", ngImport: i0, template: "<mat-nav-list>\n  <ng-container *ngFor=\"let item of data\">\n    <a [href]=\"item.link\" mat-list-item (click)=\"click($event,item)\">\n      <span matListItemTitle>{{item.levelOneText}}</span>\n      <span matLine>{{item.levelTwoText}}</span>\n    </a>\n  </ng-container>\n\n</mat-nav-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i3$6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BottomSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-bottom-sheet', template: "<mat-nav-list>\n  <ng-container *ngFor=\"let item of data\">\n    <a [href]=\"item.link\" mat-list-item (click)=\"click($event,item)\">\n      <span matListItemTitle>{{item.levelOneText}}</span>\n      <span matLine>{{item.levelTwoText}}</span>\n    </a>\n  </ng-container>\n\n</mat-nav-list>\n" }]
         }], ctorParameters: () => [{ type: i1$8.MatBottomSheetRef }, { type: undefined, decorators: [{
@@ -1143,10 +962,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 }] }] });
 
 class ProgressBarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ProgressBarComponent, selector: "falcon-progress-bar", inputs: { bufferValue: "bufferValue", color: "color", mode: "mode", value: "value" }, ngImport: i0, template: "<mat-progress-bar [mode]=\"mode\" [bufferValue]=\"bufferValue\" [color]=\"color\" [value]=\"value\"></mat-progress-bar>", styles: [""], dependencies: [{ kind: "component", type: i1$9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ProgressBarComponent, selector: "falcon-progress-bar", inputs: { bufferValue: "bufferValue", color: "color", mode: "mode", value: "value" }, ngImport: i0, template: "<mat-progress-bar [mode]=\"mode\" [bufferValue]=\"bufferValue\" [color]=\"color\" [value]=\"value\"></mat-progress-bar>", styles: [""], dependencies: [{ kind: "component", type: i1$9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-progress-bar', template: "<mat-progress-bar [mode]=\"mode\" [bufferValue]=\"bufferValue\" [color]=\"color\" [value]=\"value\"></mat-progress-bar>" }]
         }], propDecorators: { bufferValue: [{
@@ -1164,10 +983,10 @@ class ProgressSpinnerComponent {
         this.diameter = 100;
         this.strokeWidth = 5;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ProgressSpinnerComponent, selector: "falcon-progress-spinner", inputs: { diameter: "diameter", color: "color", mode: "mode", value: "value", strokeWidth: "strokeWidth" }, ngImport: i0, template: "<mat-progress-spinner\n  [color]=\"color\"\n  [mode]=\"mode\"\n  [diameter]=\"diameter\"\n[strokeWidth]=\"strokeWidth\"\n  [value]=\"value\">\n</mat-progress-spinner>", styles: [""], dependencies: [{ kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ProgressSpinnerComponent, selector: "falcon-progress-spinner", inputs: { diameter: "diameter", color: "color", mode: "mode", value: "value", strokeWidth: "strokeWidth" }, ngImport: i0, template: "<mat-progress-spinner\n  [color]=\"color\"\n  [mode]=\"mode\"\n  [diameter]=\"diameter\"\n[strokeWidth]=\"strokeWidth\"\n  [value]=\"value\">\n</mat-progress-spinner>", styles: [""], dependencies: [{ kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-progress-spinner', template: "<mat-progress-spinner\n  [color]=\"color\"\n  [mode]=\"mode\"\n  [diameter]=\"diameter\"\n[strokeWidth]=\"strokeWidth\"\n  [value]=\"value\">\n</mat-progress-spinner>" }]
         }], propDecorators: { diameter: [{
@@ -1217,10 +1036,10 @@ class TableComponent {
         const item = Object.assign($item, { action: action });
         this.tableActionRowEvent.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TableComponent, selector: "falcon-table", inputs: { matTableConfig: "matTableConfig", displayedColumns: "displayedColumns" }, outputs: { pageEvent: "pageEvent", tableActionRowEvent: "tableActionRowEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"flex justify-end\">\n  <mat-form-field *ngIf=\"matTableConfig?.filter\" appearance=\"outline\">\n    <mat-label>Filter</mat-label>\n    <input matInput (keyup)=\"applyFilter($event)\" #input>\n  </mat-form-field>\n</div>\n<falcon-progress-bar *ngIf=\"matTableConfig?.progressBar\" [mode]=\"'indeterminate'\"></falcon-progress-bar>\n<div class=\"mat-elevation-z8\">\n  <table mat-table [dataSource]=\"matTableConfig.dataSource\" matSort>\n    <ng-container *ngFor=\"let column of matTableConfig?.columns\" matColumnDef={{column.columnDef}}>\n      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.header }}</th>\n      <ng-container *ngIf=\"column?.link?.isLink; else elseBlock\">\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"column?.link?.routerLink(element)\">\n            {{column?.cell(element) !== undefined ? column?.cell(element) : '' }}\n          </a>\n        </td>\n      </ng-container>\n      <ng-template #elseBlock>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ column.cell(element) !== undefined ? column.cell(element) : ''}}\n        </td>\n      </ng-template>\n\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"mat-row-element example-expanded-row\"></tr>\n\n    &lt;!&ndash; Row shown when there is no matching data. &ndash;&gt;\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell\" colspan=\"columns.length\">No data matching the filter</td>\n    </tr>\n\n    <ng-container matColumnDef=\"action\">\n      <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"></th>\n      <td mat-cell *matCellDef=\"let element\">\n\n        <div *ngIf=\"matTableConfig?.action?.isMenu; else nonMenuBlock\">\n\n          <button mat-icon-button matTooltip=\"Action\" [matMenuTriggerFor]=\"tableActionMenu\"\n                  aria-label=\"Table action menu\">\n            <mat-icon color=\"primary\">more_horiz</mat-icon>\n          </button>\n          <mat-menu #tableActionMenu=\"matMenu\">\n            <a [routerLink]=\"item?.link?.routerLink\" mat-menu-item\n               *ngFor=\"let item of matTableConfig?.action?.menu\" [disabled]=\"item.disabled\">\n              <mat-icon [color]=\"item?.icon?.iconColor\">{{item?.icon?.iconText}}</mat-icon>\n              <span>{{item.text}}</span>\n            </a>\n          </mat-menu>\n        </div>\n        <ng-template #nonMenuBlock>\n          <div class=\"flex justify-between\">\n            <div>\n              <button *ngIf=\"matTableConfig?.action?.view\" mat-icon-button aria-label=\"view button\"\n                      color=\"primary\" matTooltip=\"View\" (click)=\"tableAction(element, 0)\">\n                <mat-icon>visibility</mat-icon>\n              </button>\n              <button *ngIf=\"matTableConfig?.action?.edit\" mat-icon-button aria-label=\"edit button\"\n                      color=\"primary\" matTooltip=\"Edit\" (click)=\"tableAction(element, 1)\">\n                <mat-icon>create</mat-icon>\n              </button>\n              <button *ngIf=\"matTableConfig?.action?.delete\" mat-icon-button aria-label=\"Delete button\"\n                      color=\"warn\" matTooltip=\"Delete\" (click)=\"tableAction(element, 2)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <button *ngIf=\"matTableConfig?.action?.arrowRight\" mat-icon-button aria-label=\"Arrow button\"\n                    color=\"primary\" matTooltip=\"Expand\" (click)=\"tableAction(element, 3)\">\n              <mat-icon>chevron_right</mat-icon>\n            </button>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n  </table>\n  <mat-paginator *ngIf=\"matTableConfig?.paginationConfig?.pagination\" (page)=\"page($event)\"\n                 [pageSizeOptions]=\"matTableConfig.paginationConfig?.pageSizeOptions!\" showFirstLastButtons>\n  </mat-paginator>\n</div>\n", styles: ["table{width:100%}table td{text-align:center!important}.mat-form-field{font-size:14px}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center}:host ::ng-deep .mat-row:hover{background-color:#f5f5f5}\n"], dependencies: [{ kind: "component", type: i1$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProgressBarComponent, selector: "falcon-progress-bar", inputs: ["bufferValue", "color", "mode", "value"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: TableComponent, selector: "falcon-table", inputs: { matTableConfig: "matTableConfig", displayedColumns: "displayedColumns" }, outputs: { pageEvent: "pageEvent", tableActionRowEvent: "tableActionRowEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"flex justify-end\">\n  <mat-form-field *ngIf=\"matTableConfig?.filter\" appearance=\"outline\">\n    <mat-label>Filter</mat-label>\n    <input matInput (keyup)=\"applyFilter($event)\" #input>\n  </mat-form-field>\n</div>\n<falcon-progress-bar *ngIf=\"matTableConfig?.progressBar\" [mode]=\"'indeterminate'\"></falcon-progress-bar>\n<div class=\"mat-elevation-z8\">\n  <table mat-table [dataSource]=\"matTableConfig.dataSource\" matSort>\n    <ng-container *ngFor=\"let column of matTableConfig?.columns\" matColumnDef={{column.columnDef}}>\n      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.header }}</th>\n      <ng-container *ngIf=\"column?.link?.isLink; else elseBlock\">\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"column?.link?.routerLink(element)\">\n            {{column?.cell(element) !== undefined ? column?.cell(element) : '' }}\n          </a>\n        </td>\n      </ng-container>\n      <ng-template #elseBlock>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ column.cell(element) !== undefined ? column.cell(element) : ''}}\n        </td>\n      </ng-template>\n\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"mat-row-element example-expanded-row\"></tr>\n\n    &lt;!&ndash; Row shown when there is no matching data. &ndash;&gt;\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell\" colspan=\"columns.length\">No data matching the filter</td>\n    </tr>\n\n    <ng-container matColumnDef=\"action\">\n      <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"></th>\n      <td mat-cell *matCellDef=\"let element\">\n\n        <div *ngIf=\"matTableConfig?.action?.isMenu; else nonMenuBlock\">\n\n          <button mat-icon-button matTooltip=\"Action\" [matMenuTriggerFor]=\"tableActionMenu\"\n                  aria-label=\"Table action menu\">\n            <mat-icon color=\"primary\">more_horiz</mat-icon>\n          </button>\n          <mat-menu #tableActionMenu=\"matMenu\">\n            <a [routerLink]=\"item?.link?.routerLink\" mat-menu-item\n               *ngFor=\"let item of matTableConfig?.action?.menu\" [disabled]=\"item.disabled\">\n              <mat-icon [color]=\"item?.icon?.iconColor\">{{item?.icon?.iconText}}</mat-icon>\n              <span>{{item.text}}</span>\n            </a>\n          </mat-menu>\n        </div>\n        <ng-template #nonMenuBlock>\n          <div class=\"flex justify-between\">\n            <div>\n              <button *ngIf=\"matTableConfig?.action?.view\" mat-icon-button aria-label=\"view button\"\n                      color=\"primary\" matTooltip=\"View\" (click)=\"tableAction(element, 0)\">\n                <mat-icon>visibility</mat-icon>\n              </button>\n              <button *ngIf=\"matTableConfig?.action?.edit\" mat-icon-button aria-label=\"edit button\"\n                      color=\"primary\" matTooltip=\"Edit\" (click)=\"tableAction(element, 1)\">\n                <mat-icon>create</mat-icon>\n              </button>\n              <button *ngIf=\"matTableConfig?.action?.delete\" mat-icon-button aria-label=\"Delete button\"\n                      color=\"warn\" matTooltip=\"Delete\" (click)=\"tableAction(element, 2)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <button *ngIf=\"matTableConfig?.action?.arrowRight\" mat-icon-button aria-label=\"Arrow button\"\n                    color=\"primary\" matTooltip=\"Expand\" (click)=\"tableAction(element, 3)\">\n              <mat-icon>chevron_right</mat-icon>\n            </button>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n  </table>\n  <mat-paginator *ngIf=\"matTableConfig?.paginationConfig?.pagination\" (page)=\"page($event)\"\n                 [pageSizeOptions]=\"matTableConfig.paginationConfig?.pageSizeOptions!\" showFirstLastButtons>\n  </mat-paginator>\n</div>\n", styles: ["table{width:100%}table td{text-align:center!important}.mat-form-field{font-size:14px}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center}:host ::ng-deep .mat-row:hover{background-color:#f5f5f5}\n"], dependencies: [{ kind: "component", type: i1$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProgressBarComponent, selector: "falcon-progress-bar", inputs: ["bufferValue", "color", "mode", "value"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-table', template: "<div class=\"flex justify-end\">\n  <mat-form-field *ngIf=\"matTableConfig?.filter\" appearance=\"outline\">\n    <mat-label>Filter</mat-label>\n    <input matInput (keyup)=\"applyFilter($event)\" #input>\n  </mat-form-field>\n</div>\n<falcon-progress-bar *ngIf=\"matTableConfig?.progressBar\" [mode]=\"'indeterminate'\"></falcon-progress-bar>\n<div class=\"mat-elevation-z8\">\n  <table mat-table [dataSource]=\"matTableConfig.dataSource\" matSort>\n    <ng-container *ngFor=\"let column of matTableConfig?.columns\" matColumnDef={{column.columnDef}}>\n      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.header }}</th>\n      <ng-container *ngIf=\"column?.link?.isLink; else elseBlock\">\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"column?.link?.routerLink(element)\">\n            {{column?.cell(element) !== undefined ? column?.cell(element) : '' }}\n          </a>\n        </td>\n      </ng-container>\n      <ng-template #elseBlock>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ column.cell(element) !== undefined ? column.cell(element) : ''}}\n        </td>\n      </ng-template>\n\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"mat-row-element example-expanded-row\"></tr>\n\n    &lt;!&ndash; Row shown when there is no matching data. &ndash;&gt;\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell\" colspan=\"columns.length\">No data matching the filter</td>\n    </tr>\n\n    <ng-container matColumnDef=\"action\">\n      <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"></th>\n      <td mat-cell *matCellDef=\"let element\">\n\n        <div *ngIf=\"matTableConfig?.action?.isMenu; else nonMenuBlock\">\n\n          <button mat-icon-button matTooltip=\"Action\" [matMenuTriggerFor]=\"tableActionMenu\"\n                  aria-label=\"Table action menu\">\n            <mat-icon color=\"primary\">more_horiz</mat-icon>\n          </button>\n          <mat-menu #tableActionMenu=\"matMenu\">\n            <a [routerLink]=\"item?.link?.routerLink\" mat-menu-item\n               *ngFor=\"let item of matTableConfig?.action?.menu\" [disabled]=\"item.disabled\">\n              <mat-icon [color]=\"item?.icon?.iconColor\">{{item?.icon?.iconText}}</mat-icon>\n              <span>{{item.text}}</span>\n            </a>\n          </mat-menu>\n        </div>\n        <ng-template #nonMenuBlock>\n          <div class=\"flex justify-between\">\n            <div>\n              <button *ngIf=\"matTableConfig?.action?.view\" mat-icon-button aria-label=\"view button\"\n                      color=\"primary\" matTooltip=\"View\" (click)=\"tableAction(element, 0)\">\n                <mat-icon>visibility</mat-icon>\n              </button>\n              <button *ngIf=\"matTableConfig?.action?.edit\" mat-icon-button aria-label=\"edit button\"\n                      color=\"primary\" matTooltip=\"Edit\" (click)=\"tableAction(element, 1)\">\n                <mat-icon>create</mat-icon>\n              </button>\n              <button *ngIf=\"matTableConfig?.action?.delete\" mat-icon-button aria-label=\"Delete button\"\n                      color=\"warn\" matTooltip=\"Delete\" (click)=\"tableAction(element, 2)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <button *ngIf=\"matTableConfig?.action?.arrowRight\" mat-icon-button aria-label=\"Arrow button\"\n                    color=\"primary\" matTooltip=\"Expand\" (click)=\"tableAction(element, 3)\">\n              <mat-icon>chevron_right</mat-icon>\n            </button>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n  </table>\n  <mat-paginator *ngIf=\"matTableConfig?.paginationConfig?.pagination\" (page)=\"page($event)\"\n                 [pageSizeOptions]=\"matTableConfig.paginationConfig?.pageSizeOptions!\" showFirstLastButtons>\n  </mat-paginator>\n</div>\n", styles: ["table{width:100%}table td{text-align:center!important}.mat-form-field{font-size:14px}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center}:host ::ng-deep .mat-row:hover{background-color:#f5f5f5}\n"] }]
         }], propDecorators: { matTableConfig: [{
@@ -1316,10 +1135,10 @@ class PaginationComponent {
             .fill(start)
             .map((v, i) => v + i * (start > end ? -1 : 1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: PaginationComponent, selector: "falcon-pagination", inputs: { totalPage: "totalPage", pageSize: "pageSize" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<div class=\"flex justify-between\">\n    <span class=\"mat-h3\">Page {{currentPage}} of {{totalPage}}</span>\n    <mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n        <mat-button-toggle value=\"bold\" *ngFor=\"let item of paginationSize; index as i;\"\n            (change)=\"receiveBtnChange(item)\" [checked]=\"firstLoad && i ==0\">\n            &nbsp;&nbsp; <span class=\"mat-h3\">{{item}}</span>&nbsp;&nbsp;\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: PaginationComponent, selector: "falcon-pagination", inputs: { totalPage: "totalPage", pageSize: "pageSize" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<div class=\"flex justify-between\">\n    <span class=\"mat-h3\">Page {{currentPage}} of {{totalPage}}</span>\n    <mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n        <mat-button-toggle value=\"bold\" *ngFor=\"let item of paginationSize; index as i;\"\n            (change)=\"receiveBtnChange(item)\" [checked]=\"firstLoad && i ==0\">\n            &nbsp;&nbsp; <span class=\"mat-h3\">{{item}}</span>&nbsp;&nbsp;\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'falcon-pagination', template: "<div class=\"flex justify-between\">\n    <span class=\"mat-h3\">Page {{currentPage}} of {{totalPage}}</span>\n    <mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n        <mat-button-toggle value=\"bold\" *ngFor=\"let item of paginationSize; index as i;\"\n            (change)=\"receiveBtnChange(item)\" [checked]=\"firstLoad && i ==0\">\n            &nbsp;&nbsp; <span class=\"mat-h3\">{{item}}</span>&nbsp;&nbsp;\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { totalPage: [{
@@ -1330,17 +1149,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 type: Output
             }] } });
 
-class FalconCoreModule {
+class FalconTailwindModule {
     static forRoot(environment) {
         return {
-            ngModule: FalconCoreModule,
+            ngModule: FalconTailwindModule,
             providers: [
                 { provide: EnvironmentViewModel, useValue: environment },
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FalconCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: FalconCoreModule, declarations: [TextboxComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FalconTailwindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: FalconTailwindModule, declarations: [TextboxComponent,
             TextareaComponent,
             SelectComponent,
             ReactiveFieldDirective,
@@ -1378,7 +1197,7 @@ class FalconCoreModule {
             TableComponent,
             AngularEditorModule,
             ButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FalconCoreModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FalconTailwindModule, providers: [
             provideHttpClient(withInterceptors([
                 (req, next) => {
                     // Get the auth token from the service.
@@ -1430,7 +1249,7 @@ class FalconCoreModule {
             RouterModule,
             AngularEditorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FalconCoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FalconTailwindModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1540,171 +1359,16 @@ class AuthGuardService {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthGuardService, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthGuardService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthGuardService, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthGuardService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthGuardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthGuardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [{ type: AuthService }] });
 
-/**
- * @description
- * Class use for setting the control properties.
- * @usageNotes
- * ```ts
- *       new Dropdown({
- *        formControlName: 'brave',
- *       label: 'Bravery Rating',
- *       options: [
- *         {key: 'solid',  value: 'Solid'},
- *         {key: 'great',  value: 'Great'},
- *         {key: 'good',   value: 'Good'},
- *         {key: 'unproven', value: 'Unproven'}
- *       ],
- *       order: 3
- * }),
- ** ```
- */
-class BaseControl {
-    constructor(options = {}) {
-        this.value = options.value;
-        this.formControlName = options.formControlName || '';
-        this.label = options.label || '';
-        this.labelPosition = options.labelPosition || 'before' || 'after';
-        this.order = options.order === undefined ? 1 : options.order;
-        this.controlType = options.controlType || 6 /* ControlType.Button */;
-        this.type = options.type || '';
-        this.disabled = options.disabled || false;
-        this.options = options.options || [];
-        this.validations = options.validations || [];
-        this.appearance = options.appearance || 'outline';
-        this.class = options.class || '';
-        this.style = options.style || {};
-        this.placeHolder = options.placeHolder || '';
-        this.floatLabel = options.floatLabel || 'auto';
-        this.hint = options.hint || {};
-        this.prefix = options.prefix || {};
-        this.suffix = options.suffix || {};
-        this.textAreaProperty =
-            options.textAreaProperty || {};
-        this.event = options.event || {};
-        this.selectProperty = options.selectProperty || {};
-        this.color = options.color || undefined;
-        this.sliderProperty = options.sliderProperty || {};
-        this.chipSelectedOptions = options.chipSelectedOptions || {};
-        this.editorProperty = options.editorProperty || {};
-        this.formArray = options.formArray || undefined;
-    }
-}
-
-class AutoComplete extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 10 /* ControlType.AutoComplete */;
-    }
-}
-
-class Button extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 6 /* ControlType.Button */;
-    }
-}
-
-class ButtonToggle extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 9 /* ControlType.ButtonToggle */;
-    }
-}
-
-class CheckBox extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 5 /* ControlType.Checkbox */;
-    }
-}
-
-class Chip extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 11 /* ControlType.Chip */;
-    }
-}
-
-class DatePicker extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 3 /* ControlType.DatePicker */;
-    }
-}
-
-class Divider extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 13 /* ControlType.Divider */;
-    }
-}
-
-class Editor extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 12 /* ControlType.Editor */;
-    }
-}
-
-class Radio extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 4 /* ControlType.Radio */;
-    }
-}
-
-class RichTextEditor extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 12 /* ControlType.Editor */;
-    }
-}
-
-class Select extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 2 /* ControlType.Select */;
-    }
-}
-
-class Slider extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 8 /* ControlType.Slider */;
-    }
-}
-
-class SliderToggle extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 7 /* ControlType.SlideToggle */;
-    }
-}
-
-class Textarea extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 1 /* ControlType.TextArea */;
-    }
-}
-
-class Textbox extends BaseControl {
-    constructor() {
-        super(...arguments);
-        this.controlType = 0 /* ControlType.TextBox */;
-    }
-}
-
 /**
  * @description
  * Base form component initialized to create form controls, set validation, submit.
@@ -1777,7 +1441,7 @@ class BaseFormComponent {
      * @param index index of the layout
      */
     bindControl(controlConfig, group, index) {
-        if (controlConfig.controlType === 6 /* ControlType.Button */)
+        if (controlConfig.controlType === 'button')
             return;
         let control = null;
         if (controlConfig.formArray !== undefined) {
@@ -1945,5 +1609,5 @@ class BaseFormComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularmaterialModule, AppSettingService, AuthGuardService, AuthService, AutoComplete, BaseFormComponent, Button, ButtonComponent, ButtonToggle, CheckBox, Chip, Constant, ControlBuilderComponent, DatePicker, DialogComponent, Divider, Editor, EnvironmentViewModel, FalconCoreModule, IGenericHttpClient, LoggerService, PaginationComponent, ProgressBarComponent, ProgressSpinnerComponent, Radio, ReactiveFieldDirective, RichTextEditor, Select, Slider, SliderToggle, TableComponent, Textarea, Textbox, appSettingsFactory, authServiceFactory, loggerServiceFactory };
+export { AppSettingService, AuthGuardService, AuthService, BaseFormComponent, ButtonComponent, Constant, ControlBuilderComponent, DialogComponent, EnvironmentViewModel, FalconTailwindModule, IGenericHttpClient, LoggerService, PaginationComponent, ProgressBarComponent, ProgressSpinnerComponent, ReactiveFieldDirective, TableComponent, appSettingsFactory, authServiceFactory, loggerServiceFactory };
 //# sourceMappingURL=falcon-ng-tailwind.mjs.map