@falcon-ng/tailwind 0.0.9 → 0.0.11

package/fesm2022/falcon-ng-tailwind.mjs

@@ -82,13 +82,13 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i4$1 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import * as i1$7 from '@angular/common/http';
-import { HttpEventType, HttpRequest, withInterceptors, provideHttpClient } from '@angular/common/http';
+import { HttpEventType, HttpStatusCode, HttpRequest, withInterceptors, provideHttpClient } from '@angular/common/http';
 import { Observable, Subject, from } from 'rxjs';
-import { UserManager } from 'oidc-client';
+import { UserManager } from 'oidc-client-ts';
 
 class AngularmaterialModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AngularmaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: AngularmaterialModule, exports: [A11yModule,
+    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,
@@ -132,7 +132,7 @@ class AngularmaterialModule {
             OverlayModule,
             PortalModule,
             ScrollingModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AngularmaterialModule, imports: [A11yModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AngularmaterialModule, imports: [A11yModule,
             ClipboardModule,
             CdkStepperModule,
             CdkTableModule,
@@ -177,7 +177,7 @@ class AngularmaterialModule {
             PortalModule,
             ScrollingModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AngularmaterialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AngularmaterialModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -231,19 +231,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }] });
 
 class TextboxComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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", "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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TextboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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"] }]
         }] });
 
 class TextareaComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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"] }]
         }] });
@@ -264,10 +264,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.0.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "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", "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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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,10 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
             }] } });
 
 class DatePickerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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>" }]
         }] });
@@ -298,10 +298,10 @@ class RadioComponent {
     radioGroupChangeEvent($event) {
         this.radioGroupChange.emit($event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "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: "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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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 +313,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.0.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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.0.5", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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.0.5", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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 +353,10 @@ class ButtonToggleComponent {
     toggleChange($event) {
         this.toggleGroupChange.emit($event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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"], 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: "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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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,10 +377,10 @@ class AutoCompleteComponent {
     optionSelected(value) {
         this.formGroup?.get(this.control?.formControlName)?.setValue(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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>" }]
         }], ctorParameters: () => [] });
@@ -457,10 +457,10 @@ class ChipComponent {
             this.control.event.keyboardEnter?.emit(event);
         this.chipTextInput.nativeElement.value = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ChipComponent, deps: [{ token: i5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "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: ["tabIndex", "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: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { 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", "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: "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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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 +485,10 @@ class ButtonComponent {
     childBtnClick() {
         this.btnClick.emit("Button Click Event");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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,10 +500,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
             }] } });
 
 class RichTextEditorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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>" }]
         }] });
@@ -538,10 +538,10 @@ class ReactiveFieldDirective {
             this.componentRef.instance.formGroup = this.formGroup;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ReactiveFieldDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: { control: "control", formGroup: "formGroup" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ReactiveFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ReactiveFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[reactiveField]'
@@ -553,10 +553,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
             }] } });
 
 class ControlBuilderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ControlBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ControlBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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 +569,10 @@ class EnvironmentViewModel {
 }
 
 class IGenericHttpClient {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IGenericHttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IGenericHttpClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IGenericHttpClient, decorators: [{
             type: Injectable
         }] });
 
@@ -633,10 +633,10 @@ class LoggerService {
     verbose(message, ...optionalParams) {
         this.log(message, "Verbose" /* LoggingLevel.Verbose */, optionalParams);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: LoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: LoggerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -798,23 +798,23 @@ class GenericHttpClient {
                 }
             }, (error) => {
                 switch (error.status) {
-                    case 403 /* HttpStatusCode.Forbidden */:
+                    case HttpStatusCode.Forbidden:
                         // observer.complete();
                         this.snackBarViewModel.messageText = 'Access to the requested resource is forbidden.';
                         this.snackBarViewModel.actionText = 'Forbidden';
                         this.isHttpError = true;
                         break;
-                    case 400 /* HttpStatusCode.BadRequest */:
+                    case HttpStatusCode.BadRequest:
                         this.snackBarViewModel.messageText = 'Server cannot or will not process the request.';
                         this.snackBarViewModel.actionText = 'Bad Request';
                         this.isHttpError = true;
                         break;
-                    case 401 /* HttpStatusCode.Unauthorized */:
+                    case HttpStatusCode.Unauthorized:
                         this.snackBarViewModel.messageText = 'Request has not been applied because it lacks valid authentication credentials.';
                         this.snackBarViewModel.actionText = 'Unauthorized';
                         this.isHttpError = true;
                         break;
-                    case 500 /* HttpStatusCode.InternalServerError */:
+                    case HttpStatusCode.InternalServerError:
                         this.snackBarViewModel.messageText = 'Server encountered an unexpected condition.';
                         this.snackBarViewModel.actionText = 'Internal server error';
                         this.isHttpError = true;
@@ -831,10 +831,10 @@ class GenericHttpClient {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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.0.5", ngImport: i0, type: GenericHttpClient, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: GenericHttpClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GenericHttpClient, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -877,10 +877,10 @@ class AppSettingService {
     getAppsettingValue() {
         return this.appSettings ? this.appSettings : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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.0.5", ngImport: i0, type: AppSettingService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AppSettingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AppSettingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -950,10 +950,10 @@ class TokenHelperService {
         }
         return window.atob(output);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TokenHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TokenHelperService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TokenHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TokenHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -961,8 +961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
         }], ctorParameters: () => [] });
 
 class AuthService {
-    static { this.USER_LOADED_EVENT = "USER_LOADED"; }
-    static { this.USER_UNLOADED_EVENT = "USER_UNLOADED"; }
+    static { this.USER_LOADED_EVENT = 'USER_LOADED'; }
+    static { this.USER_UNLOADED_EVENT = 'USER_UNLOADED'; }
     constructor(logger, tokenHelperService) {
         this.logger = logger;
         this.tokenHelperService = tokenHelperService;
@@ -978,29 +978,29 @@ class AuthService {
             this.user = user;
         });
         this.userManager.events.addAccessTokenExpiring(() => {
-            this.logger.info("IdSvr token expiring " + new Date().toLocaleString());
+            this.logger.info('IdSvr token expiring ' + new Date().toLocaleString());
         });
         this.userManager.events.addAccessTokenExpired(() => {
-            this.logger.info("IdSvr token expired " + new Date().toLocaleString());
+            this.logger.info('IdSvr token expired ' + new Date().toLocaleString());
             this.logout(false);
         });
         this.userManager.events.addSilentRenewError(e => {
-            this.logger.error("IdSvr silent renew error " + e.message + new Date().toLocaleString());
+            this.logger.error('IdSvr silent renew error ' + e.message + new Date().toLocaleString());
             this.logout(false);
         });
         this.userManager.events.addUserLoaded(user => {
-            this.logger.info("IdSvr user session is ready " + new Date().toLocaleString());
+            this.logger.info('IdSvr user session is ready ' + new Date().toLocaleString());
             this.accessToken = this.tokenHelperService.getPayloadFromToken(user.access_token, false);
             this.user = user;
         });
         this.userManager.events.addUserUnloaded(() => {
-            this.logger.info("IdSvr user session has ended " + new Date().toLocaleString());
+            this.logger.info('IdSvr user session has ended ' + new Date().toLocaleString());
             if (!this.signingOut) {
                 this.startAuthentication(window.location.pathname + window.location.search);
             }
         });
         this.userManager.events.addUserSignedOut(() => {
-            this.logger.info("IdSvr user signed out " + new Date().toLocaleString());
+            this.logger.info('IdSvr user signed out ' + new Date().toLocaleString());
             this.logout(false);
         });
         this.user = await this.userManager.getUser();
@@ -1024,29 +1024,17 @@ class AuthService {
         return '';
     }
     getAccessToken() {
-        return this.accessToken || this.tokenHelperService.getPayloadFromToken(this.user.access_token, false);
-        ;
+        return (this.accessToken ||
+            this.tokenHelperService.getPayloadFromToken(this.user.access_token, false));
     }
     async startAuthentication(returnUrl) {
-        this.logger.info("[AuthService] startAuthentication", returnUrl);
+        this.logger.info('[AuthService] startAuthentication', returnUrl);
         await this.userManager.clearStaleState();
-        await this.userManager.signinRedirect({ data: { returnUrl: returnUrl } }).catch(err => {
-            //this.$log.debug("IdSvr sign in failed", err);
+        await this.userManager.signinRedirect().catch(err => {
+            //this.log.debug("IdSvr sign in failed", err);
             return err;
         });
     }
-    async completeAuthentication() {
-        this.logger.info("[AuthService] completeAuthentication");
-        let user = await new Promise((resolve, reject) => {
-            this.userManager.signinRedirectCallback().then(user => {
-                resolve(user);
-            }).catch(error => {
-                reject(error);
-            });
-        });
-        this.user = user;
-        return this.user;
-    }
     login() {
         return this.userManager.signinRedirect();
     }
@@ -1073,30 +1061,30 @@ class AuthService {
             monitorSession: true,
             silent_redirect_uri: environment?.openID?.silent_redirect_uri,
             automaticSilentRenew: environment?.openID?.automaticSilentRenew,
-            accessTokenExpiringNotificationTime: 20,
-            checkSessionInterval: 2000,
-            silentRequestTimeout: 20000,
+            accessTokenExpiringNotificationTimeInSeconds: 2,
+            checkSessionIntervalInSeconds: 2,
+            silentRequestTimeoutInSeconds: 2,
         };
     }
     async isServiceReady() {
         return new Promise(async (resolve, reject) => {
             if (this.initialized) {
-                this.logger.info("[AuthService] isServiceReady", true);
+                this.logger.info('[AuthService] isServiceReady', true);
                 resolve(true);
             }
             else {
-                this.logger.info("[AuthService] isServiceReady", false);
+                this.logger.info('[AuthService] isServiceReady', false);
                 reject(false);
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AuthService, deps: [{ token: LoggerService }, { token: TokenHelperService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: LoggerService }, { type: TokenHelperService }] });
 function authServiceFactory(authService, appSettings, environment) {
@@ -1107,16 +1095,15 @@ function authServiceFactory(authService, appSettings, environment) {
         });
     };
 }
-;
 
 class DialogComponent {
     constructor(data) {
         this.data = data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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: [{
@@ -1125,10 +1112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 }] }] });
 
 class SnackBarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-snack-bar', template: "<span>Pizza party!!! \uD83C\uDF55</span>" }]
         }] });
@@ -1144,10 +1131,10 @@ class BottomSheetComponent {
         this._bottomSheetRef.dismiss(item);
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", 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.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: BottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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: [{
@@ -1156,10 +1143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 }] }] });
 
 class ProgressBarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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: [{
@@ -1177,10 +1164,10 @@ class ProgressSpinnerComponent {
         this.diameter = 100;
         this.strokeWidth = 5;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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: [{
@@ -1230,12 +1217,12 @@ class TableComponent {
         const item = Object.assign($item, { action: action });
         this.tableActionRowEvent.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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\">\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>", styles: ["table{text-align:center!important;width:100%}.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: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "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: ["sticky", "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", "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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'falcon-table', template: "<div class=\"flex justify-end\">\n  <mat-form-field *ngIf=\"matTableConfig?.filter\">\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>", styles: ["table{text-align:center!important;width:100%}.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"] }]
+            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: [{
                 type: Input
             }], paginator: [{
@@ -1329,10 +1316,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.0.5", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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"], 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", 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: [{
@@ -1352,8 +1339,8 @@ class FalconCoreModule {
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: FalconCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: FalconCoreModule, declarations: [TextboxComponent,
+    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,
             TextareaComponent,
             SelectComponent,
             ReactiveFieldDirective,
@@ -1391,7 +1378,7 @@ class FalconCoreModule {
             TableComponent,
             AngularEditorModule,
             ButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: FalconCoreModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FalconCoreModule, providers: [
             provideHttpClient(withInterceptors([
                 (req, next) => {
                     // Get the auth token from the service.
@@ -1443,7 +1430,7 @@ class FalconCoreModule {
             RouterModule,
             AngularEditorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: FalconCoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FalconCoreModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1553,10 +1540,10 @@ class AuthGuardService {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AuthGuardService, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AuthGuardService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: AuthGuardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AuthGuardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1605,7 +1592,7 @@ class BaseControl {
             options.textAreaProperty || {};
         this.event = options.event || {};
         this.selectProperty = options.selectProperty || {};
-        this.color = options.color || '';
+        this.color = options.color || undefined;
         this.sliderProperty = options.sliderProperty || {};
         this.chipSelectedOptions = options.chipSelectedOptions || {};
         this.editorProperty = options.editorProperty || {};