@falcon-ng/tailwind 0.0.2 → 0.0.3

package/fesm2020/falcon-ng-tailwind.mjs

@@ -0,0 +1,1880 @@
+import * as i0 from '@angular/core';
+import { NgModule, Component, EventEmitter, Output, Input, ViewChild, Directive, Injectable, Inject, inject, APP_INITIALIZER } from '@angular/core';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { PortalModule } from '@angular/cdk/portal';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { MatTreeModule } from '@angular/material/tree';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i8 from '@angular/material/table';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import * as i7 from '@angular/material/sort';
+import { MatSortModule, MatSort } from '@angular/material/sort';
+import * as i3$4 from '@angular/material/snack-bar';
+import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+import * as i1$3 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i2$3 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i3$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$1 from '@angular/material/core';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import * as i1$1 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i1$a from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$9 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i6$1 from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i5$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i3$6 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i3$5 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i2$5 from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as i1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i5$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i1$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$4 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i1$6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$8 from '@angular/material/bottom-sheet';
+import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i1$5 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2$4 from '@angular/cdk/drag-drop';
+import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i2 from '@angular/material/form-field';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import * as i6 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i3$2 from '@angular/cdk/text-field';
+import { startWith, map } from 'rxjs/operators';
+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 { HttpRequest, HttpEventType, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { Observable, Subject, from } from 'rxjs';
+import { UserManager } from 'oidc-client';
+
+class AngularmaterialModule {
+}
+AngularmaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AngularmaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AngularmaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: AngularmaterialModule, exports: [A11yModule,
+        ClipboardModule,
+        CdkStepperModule,
+        CdkTableModule,
+        CdkTreeModule,
+        DragDropModule,
+        MatAutocompleteModule,
+        MatBadgeModule,
+        MatBottomSheetModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatStepperModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        MatTreeModule,
+        OverlayModule,
+        PortalModule,
+        ScrollingModule] });
+AngularmaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AngularmaterialModule, imports: [A11yModule,
+        ClipboardModule,
+        CdkStepperModule,
+        CdkTableModule,
+        CdkTreeModule,
+        DragDropModule,
+        MatAutocompleteModule,
+        MatBadgeModule,
+        MatBottomSheetModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatStepperModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        MatTreeModule,
+        OverlayModule,
+        PortalModule,
+        ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AngularmaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    exports: [
+                        A11yModule,
+                        ClipboardModule,
+                        CdkStepperModule,
+                        CdkTableModule,
+                        CdkTreeModule,
+                        DragDropModule,
+                        MatAutocompleteModule,
+                        MatBadgeModule,
+                        MatBottomSheetModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatStepperModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatExpansionModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatNativeDateModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSidenavModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                        MatSnackBarModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatTabsModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        MatTreeModule,
+                        OverlayModule,
+                        PortalModule,
+                        ScrollingModule
+                    ]
+                }]
+        }] });
+
+class TextboxComponent {
+}
+TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: TextboxComponent, selector: "falcon-textbox", ngImport: i0, template: "<mat-form-field [formGroup]=\"formGroup\" [appearance]=\"control.appearance\" class=\"textbox-form\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [type]=\"control.type\" [formControlName]=\"control.formControlName\" [class]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}&nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}&nbsp;&nbsp;</span>\n  <mat-hint *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n    <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n         routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-container>\n  </mat-hint>\n  <ng-template #elseBlock>\n    <mat-hint>{{control.hint.text}}</mat-hint>\n  </ng-template>\n  <ng-template #withoutQueryBlock>\n    <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n  </ng-template>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", 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]" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TextboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-textbox', template: "<mat-form-field [formGroup]=\"formGroup\" [appearance]=\"control.appearance\" class=\"textbox-form\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [type]=\"control.type\" [formControlName]=\"control.formControlName\" [class]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}&nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n        [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}&nbsp;&nbsp;</span>\n  <mat-hint *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n    <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n         routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-container>\n  </mat-hint>\n  <ng-template #elseBlock>\n    <mat-hint>{{control.hint.text}}</mat-hint>\n  </ng-template>\n  <ng-template #withoutQueryBlock>\n    <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n  </ng-template>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [".textbox-form{width:100%}\n"] }]
+        }] });
+
+class TextareaComponent {
+}
+TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: TextareaComponent, selector: "falcon-textarea", ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\" class=\"textarea-form\">\n  <mat-label>{{control.label}}</mat-label>\n\n  <textarea matInput [formControlName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\"\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [cdkTextareaAutosize]=\"control.textAreaProperty.cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"control.textAreaProperty.cdkAutosizeMinRows\"\n    [cdkAutosizeMaxRows]=\"control.textAreaProperty.cdkAutosizeMaxRows\" [rows]=\"control.textAreaProperty.rows\"\n    [cols]=\"control.textAreaProperty.cols\"></textarea>\n\n  <span matPrefix [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}</span>\n  <span matSuffix [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}</span>\n\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", 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]" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [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: "15.0.1", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-textarea', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\" class=\"textarea-form\">\n  <mat-label>{{control.label}}</mat-label>\n\n  <textarea matInput [formControlName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\"\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [cdkTextareaAutosize]=\"control.textAreaProperty.cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"control.textAreaProperty.cdkAutosizeMinRows\"\n    [cdkAutosizeMaxRows]=\"control.textAreaProperty.cdkAutosizeMaxRows\" [rows]=\"control.textAreaProperty.rows\"\n    [cols]=\"control.textAreaProperty.cols\"></textarea>\n\n  <span matPrefix [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}}</span>\n  <span matSuffix [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}}</span>\n\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", styles: [".textarea-form{width:100%}\n"] }]
+        }] });
+
+class SelectComponent {
+    constructor() {
+        this.selectionChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.formGroup === undefined) {
+            this.formGroup = new FormGroup({
+                default: new FormControl(),
+            });
+        }
+    }
+    selectChange($event) {
+        this.selectionChange.emit($event.value);
+        if (this.control.event !== undefined)
+            this.control.event.change?.emit($event);
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: SelectComponent, selector: "falcon-select", outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <mat-select [multiple]=\"control.selectProperty.multiple\" (selectionChange)=\"selectChange($event)\"\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [(value)]=\"control.value\">\n    <mat-option *ngFor=\"let item of control.options\" [value]=\"item.key\" [disabled]=\"item.disabled\">\n      {{item.value}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"control.hint?.show\">\n    <ng-container *ngIf=\"control.hint?.link?.isLink; else elseBlock\">\n      <ng-container *ngIf=\"control.hint?.link?.queryParams !== undefined; else withoutQueryBlock\">\n        <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n          routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-container>\n    </ng-container>\n    <ng-template #elseBlock>\n      <span>{{control.hint.text}}</span>\n    </ng-template>\n    <ng-template #withoutQueryBlock>\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-template>\n  </mat-hint>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatOption, selector: "mat-option", 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"], 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-select', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\" [floatLabel]=\"control.floatLabel\"\n  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <mat-select [multiple]=\"control.selectProperty.multiple\" (selectionChange)=\"selectChange($event)\"\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [(value)]=\"control.value\">\n    <mat-option *ngFor=\"let item of control.options\" [value]=\"item.key\" [disabled]=\"item.disabled\">\n      {{item.value}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"control.hint?.show\">\n    <ng-container *ngIf=\"control.hint?.link?.isLink; else elseBlock\">\n      <ng-container *ngIf=\"control.hint?.link?.queryParams !== undefined; else withoutQueryBlock\">\n        <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n          routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-container>\n    </ng-container>\n    <ng-template #elseBlock>\n      <span>{{control.hint.text}}</span>\n    </ng-template>\n    <ng-template #withoutQueryBlock>\n      <a [routerLink]=\"[control.hint.link?.routerLink]\" routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n    </ng-template>\n  </mat-hint>\n</mat-form-field>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selectionChange: [{
+                type: Output
+            }] } });
+
+class DatePickerComponent {
+}
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: DatePickerComponent, selector: "falcon-date-picker", ngImport: i0, template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                [floatLabel]=\"control.floatLabel\" [ngStyle]=\"control.style\"\n                [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControlName]=\"control.formControlName\"\n         [placeholder]=\"control.placeHolder\" [type]=\"control.type\"\n         [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon *ngIf=\"control.suffix.isIcon\">keyboard_arrow_down</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>", 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]" }, { 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: "15.0.1", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-date-picker', template: "<mat-form-field [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                [floatLabel]=\"control.floatLabel\" [ngStyle]=\"control.style\"\n                [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControlName]=\"control.formControlName\"\n         [placeholder]=\"control.placeHolder\" [type]=\"control.type\"\n         [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n         [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon *ngIf=\"control.suffix.isIcon\">keyboard_arrow_down</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>" }]
+        }] });
+
+class RadioComponent {
+    constructor() {
+        this.radioGroupChange = new EventEmitter();
+    }
+    ngOnInit() {
+        console.log(this.control.options);
+        if (this.formGroup === undefined) {
+            this.formGroup = new FormGroup({
+                default: new FormControl(),
+            });
+        }
+    }
+    radioGroupChangeEvent($event) {
+        this.radioGroupChange.emit($event.value);
+    }
+}
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: RadioComponent, selector: "falcon-radio", outputs: { radioGroupChange: "radioGroupChange" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <label class=\"radio-label-padding\">{{control.label | titlecase}}</label>\n  <mat-radio-group [attr.aria-label]=\"control.label\"\n                   [labelPosition]=\"control.appearance\"\n                   [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n                   [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                   (change)=\"radioGroupChangeEvent($event)\">\n    <mat-radio-button [ngClass]=\"control.class\"\n                      *ngFor=\"let item of control.options\" [value]=\"item.value\">{{item.viewValue | titlecase}}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>", styles: [".radio-group-column{display:flex;flex-direction:column;margin:15px 0}.radio-group-row{display:flex;flex-direction:row;margin:15px 0}.radio-button{margin:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], 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: "15.0.1", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-radio', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <label class=\"radio-label-padding\">{{control.label | titlecase}}</label>\n  <mat-radio-group [attr.aria-label]=\"control.label\"\n                   [labelPosition]=\"control.appearance\"\n                   [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n                   [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                   (change)=\"radioGroupChangeEvent($event)\">\n    <mat-radio-button [ngClass]=\"control.class\"\n                      *ngFor=\"let item of control.options\" [value]=\"item.value\">{{item.viewValue | titlecase}}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>", styles: [".radio-group-column{display:flex;flex-direction:column;margin:15px 0}.radio-group-row{display:flex;flex-direction:row;margin:15px 0}.radio-button{margin:5px}\n"] }]
+        }], propDecorators: { radioGroupChange: [{
+                type: Output
+            }] } });
+
+class CheckboxComponent {
+    change($event) {
+        if (this.control.event !== undefined)
+            this.control?.event?.change?.emit($event);
+    }
+}
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: CheckboxComponent, selector: "falcon-checkbox", ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n    <mat-checkbox [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n        [color]=\"control.color != null ? control.color : 'accent'\" [labelPosition]=\"control.labelPosition\"\n        [formControlName]=\"control.formControlName\" (change)=\"change($event)\">\n        {{control.label}}</mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], 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: "15.0.1", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-checkbox', template: "<div [formGroup]=\"formGroup\">\n    <mat-checkbox [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n        [color]=\"control.color != null ? control.color : 'accent'\" [labelPosition]=\"control.labelPosition\"\n        [formControlName]=\"control.formControlName\" (change)=\"change($event)\">\n        {{control.label}}</mat-checkbox>\n</div>" }]
+        }] });
+
+class SlideToggleComponent {
+}
+SlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: SlideToggleComponent, selector: "falcon-slide-toggle", ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <mat-slide-toggle [labelPosition]=\"control.appearance\"\n                    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                    [formControlName]=\"control.formControlName\" [color]=\"control.color\">\n    {{control.label}}\n  </mat-slide-toggle>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], 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: "15.0.1", ngImport: i0, type: SlideToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-slide-toggle', template: "<div [formGroup]=\"formGroup\">\n  <mat-slide-toggle [labelPosition]=\"control.appearance\"\n                    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n                    [formControlName]=\"control.formControlName\" [color]=\"control.color\">\n    {{control.label}}\n  </mat-slide-toggle>\n</div>" }]
+        }] });
+
+class SliderComponent {
+}
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: SliderComponent, selector: "falcon-slider", ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [formGroup]=\"formGroup\">\n<mat-label>{{control.label}}</mat-label>&nbsp;&nbsp;&nbsp;\n  <mat-slider\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [color]=\"control.color\"\n    [max]=\"control.sliderProperty.max\"\n    [min]=\"control.sliderProperty.min\"\n    [step]=\"control.sliderProperty.step\">\n    <input matSliderThumb [formControlName]=\"control.formControlName\">\n  </mat-slider>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$3.MatSlider, selector: "mat-slider", inputs: ["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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-slider', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\" [formGroup]=\"formGroup\">\n<mat-label>{{control.label}}</mat-label>&nbsp;&nbsp;&nbsp;\n  <mat-slider\n    [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [color]=\"control.color\"\n    [max]=\"control.sliderProperty.max\"\n    [min]=\"control.sliderProperty.min\"\n    [step]=\"control.sliderProperty.step\">\n    <input matSliderThumb [formControlName]=\"control.formControlName\">\n  </mat-slider>\n</div>" }]
+        }] });
+
+class ButtonToggleComponent {
+    constructor() {
+        this.toggleGroupChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.formGroup === undefined) {
+            this.formGroup = new FormGroup({
+                default: new FormControl()
+            });
+        }
+    }
+    toggleChange($event) {
+        this.toggleGroupChange.emit($event.value);
+    }
+}
+ButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: ButtonToggleComponent, selector: "falcon-button-toggle", outputs: { toggleGroupChange: "toggleGroupChange" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <mat-label [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             *ngIf=\"control.label != undefined\">\n    {{control.label | titlecase}}\n  </mat-label>\n  <mat-button-toggle-group\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [appearance]=\"control.appearance\" [ngStyle]=\"control.style\"\n    [ngClass]=\"control.class\" [attr.aria-label]=\"control.label\"\n    class=\"botton-toggle\" (change)=\"toggleChange($event)\">\n    <mat-button-toggle *ngFor=\"let item of control.options\" [value]=\"item?.value\"\n                       [ngStyle]=\"control.style\"\n                       [ngClass]=\"control.class\">\n      <mat-icon [ngClass]=\"item?.class\" aria-hidden=\"false\" aria-label=\"item icon\" *ngIf=\"item?.icon != undefined\">\n        {{item?.icon}}\n      </mat-icon>\n      {{item.viewValue | titlecase}}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "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: "15.0.1", ngImport: i0, type: ButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-button-toggle', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n     [formGroup]=\"formGroup\">\n  <mat-label [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             *ngIf=\"control.label != undefined\">\n    {{control.label | titlecase}}\n  </mat-label>\n  <mat-button-toggle-group\n    [formControlName]=\"control.formControlName != undefined ? control.formControlName : 'default'\"\n    [appearance]=\"control.appearance\" [ngStyle]=\"control.style\"\n    [ngClass]=\"control.class\" [attr.aria-label]=\"control.label\"\n    class=\"botton-toggle\" (change)=\"toggleChange($event)\">\n    <mat-button-toggle *ngFor=\"let item of control.options\" [value]=\"item?.value\"\n                       [ngStyle]=\"control.style\"\n                       [ngClass]=\"control.class\">\n      <mat-icon [ngClass]=\"item?.class\" aria-hidden=\"false\" aria-label=\"item icon\" *ngIf=\"item?.icon != undefined\">\n        {{item?.icon}}\n      </mat-icon>\n      {{item.viewValue | titlecase}}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>" }]
+        }], propDecorators: { toggleGroupChange: [{
+                type: Output
+            }] } });
+
+class AutoCompleteComponent {
+    constructor() {
+        this.autoCompleteControl = new FormControl();
+    }
+    ngOnInit() {
+        this.filteredOptions = this.autoCompleteControl.valueChanges.pipe(startWith(''), map(value => this._filter(value)));
+    }
+    _filter(value) {
+        const filterValue = value.toLowerCase();
+        return this.control.options.filter((option) => option?.key?.toLowerCase().includes(filterValue));
+    }
+    optionSelected(value) {
+        this.formGroup?.get(this.control?.formControlName)?.setValue(value);
+    }
+}
+AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: AutoCompleteComponent, selector: "falcon-auto-complete", ngImport: i0, template: "<mat-form-field *ngIf=\"control.appearance != 'plain'; else plainInput\" [appearance]=\"control.appearance\"\n  [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n    [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [matAutocomplete]=\"auto\"\n    [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}} &nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}} &nbsp;&nbsp;</span>\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n\n<ng-template #plainInput>\n  <div [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <input type=\"text\" [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n      [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n      [matAutocomplete]=\"auto\"\n      [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n      class=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\">\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", 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]" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", 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: "15.0.1", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-auto-complete', template: "<mat-form-field *ngIf=\"control.appearance != 'plain'; else plainInput\" [appearance]=\"control.appearance\"\n  [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n  <mat-label>{{control.label}}</mat-label>\n  <input matInput [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n    [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n    [matAutocomplete]=\"auto\"\n    [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\">\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <span matPrefix [matTooltip]=\"control.prefix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.prefix.isIcon}\">{{control.prefix.text}} &nbsp;&nbsp;</span>\n  <span matSuffix [matTooltip]=\"control.suffix.toolTipText!\"\n    [ngClass]=\"{'material-icons': control.suffix.isIcon}\">{{control.suffix.text}} &nbsp;&nbsp;</span>\n\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</mat-form-field>\n\n<ng-template #plainInput>\n  <div [formGroup]=\"formGroup\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <input type=\"text\" [formControl]=\"autoCompleteControl\" [formControlName]=\"control.formControlName\"\n      [placeholder]=\"control.placeHolder\" [type]=\"control.type\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n      [matAutocomplete]=\"auto\"\n      [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n      class=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\">\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='optionSelected($event.option.viewValue)'>\n    <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n      {{item.value}}\n    </mat-option>\n  </mat-autocomplete>\n</ng-template>" }]
+        }], ctorParameters: function () { return []; } });
+
+class ChipComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.selectable = true;
+        this.removable = true;
+        this.addOnBlur = true;
+        this.autoCompleteControl = new FormControl('');
+        this.filteredOptions = this.autoCompleteControl.valueChanges.pipe(startWith(null), map((value) => value ? this._filter(value) : this.control?.options.slice()));
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            if (this.control.chipSelectedOptions.length > 0) {
+                this.items = this.formGroup.controls[this.control.formControlName];
+                this.control.chipSelectedOptions.forEach((value) => {
+                    this.items.controls.push(this.createItem(value.value));
+                });
+            }
+        });
+    }
+    add(event) {
+        const input = event.input;
+        const value = event.value;
+        if ((value || '').trim()) {
+            this.control.chipSelectedOptions.push({
+                key: value.trim(),
+                value: value.trim(),
+            });
+            this.items = this.formGroup.get(this.control.formControlName);
+            this.items.push(this.createItem(value));
+        }
+        if (input) {
+            input.value = '';
+        }
+    }
+    createItem(value) {
+        return this.fb.group({
+            key: value,
+            value: value,
+        });
+    }
+    remove(option) {
+        const index = this.control.chipSelectedOptions.indexOf(option);
+        if (index >= 0) {
+            this.control.chipSelectedOptions.splice(index, 1);
+            this.items.removeAt(index);
+        }
+    }
+    optionSelected(event) {
+        this.control.chipSelectedOptions.push({
+            key: event.option.value,
+            value: event.option.value,
+        });
+        this.items = this.formGroup.get(this.control.formControlName);
+        this.items.push(this.createItem(event.option.value));
+        this.chipAutoCompleteInput.nativeElement.value = '';
+        this.formGroup.get(this.control.formControlName)?.setValue(null);
+    }
+    _filter(value) {
+        if (value !== null) {
+            const filterValue = value.toLowerCase();
+            return this.control?.options?.filter((option) => option.value.toLowerCase().includes(filterValue));
+        }
+    }
+    drop(event) {
+        moveItemInArray(this.control.options, event.previousIndex, event.currentIndex);
+    }
+    keyboardEnterEvent(event) {
+        if (this.control.event !== undefined)
+            this.control.event.keyboardEnter?.emit(event);
+        this.chipTextInput.nativeElement.value = '';
+    }
+}
+ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ChipComponent, deps: [{ token: i5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: ChipComponent, selector: "falcon-chip", inputs: { control: "control", formGroup: "formGroup" }, viewQueries: [{ propertyName: "chipAutoCompleteInput", first: true, predicate: ["chipAutoCompleteInput"], descendants: true }, { propertyName: "chipTextInput", first: true, predicate: ["chipTextInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"control.type\">\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'search'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipAutoCompleteInput [formControl]=\"autoCompleteControl\"\n             [formArrayName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\"\n             [ngClass]=\"control.class\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n      <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n        {{item.value}}\n      </mat-option>\n    </mat-autocomplete>\n    <mat-hint>\n      <ng-container *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n        <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n          <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n             routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n        </ng-container>\n      </ng-container>\n      <ng-template #elseBlock>\n        <span>{{control.hint.text}}</span>\n      </ng-template>\n      <ng-template #withoutQueryBlock>\n        <a [routerLink]=\"[control.hint.link?.routerLink]\"\n           routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-template>\n    </mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'text'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [value]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option?.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipTextInput [formArrayName]=\"control.formControlName\" multiple\n             [placeholder]=\"control.placeHolder\"\n             [matChipInputFor]=\"chipGrid\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matChipInputAddOnBlur]=\"addOnBlur\"\n             (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n  </mat-form-field>\n\n  <mat-chip-listbox aria-label=\"Chips selection\" *ngSwitchDefault>\n    <mat-chip color=\"{{control.color}}\" selected>{{control.label}}</mat-chip>\n  </mat-chip-listbox>\n\n\n  <mat-chip-set class=\"chip-list\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\"\n                *ngSwitchCase=\"'dragDrop'\" class=\"example-chip\">\n    <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let option of control?.options\">\n      {{option?.value}}\n    </mat-chip>\n  </mat-chip-set>\n\n</ng-container>", styles: [".chip-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, mat-chip", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "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", "value"], outputs: ["change"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-chip', template: "<ng-container [ngSwitch]=\"control.type\">\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'search'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipAutoCompleteInput [formControl]=\"autoCompleteControl\"\n             [formArrayName]=\"control.formControlName\" [placeholder]=\"control.placeHolder\" [ngStyle]=\"control.style\"\n             [ngClass]=\"control.class\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n      <mat-option *ngFor=\"let item of filteredOptions | async\" [value]=\"item.key\">\n        {{item.value}}\n      </mat-option>\n    </mat-autocomplete>\n    <mat-hint>\n      <ng-container *ngIf=\"control.hint.link?.isLink; else elseBlock\">\n        <ng-container *ngIf=\"control.hint.link?.queryParams !== undefined; else withoutQueryBlock\">\n          <a [routerLink]=\"[control.hint.link?.routerLink]\" [queryParams]=\"{ query: control.hint.link?.queryParams }\"\n             routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n        </ng-container>\n      </ng-container>\n      <ng-template #elseBlock>\n        <span>{{control.hint.text}}</span>\n      </ng-template>\n      <ng-template #withoutQueryBlock>\n        <a [routerLink]=\"[control.hint.link?.routerLink]\"\n           routerLinkActive=\"router-link-active\">{{control.hint.text}}</a>\n      </ng-template>\n    </mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"chip-list\" *ngSwitchCase=\"'text'\" [appearance]=\"control.appearance\" [formGroup]=\"formGroup\"\n                  [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <mat-label>{{control.label}}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"item selection\">\n      <mat-chip-row *ngFor=\"let option of control.chipSelectedOptions\" [value]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(option)\">\n        {{option?.value}}\n        <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n      </mat-chip-row>\n\n      <input matInput #chipTextInput [formArrayName]=\"control.formControlName\" multiple\n             [placeholder]=\"control.placeHolder\"\n             [matChipInputFor]=\"chipGrid\" [ngStyle]=\"control.style\" [ngClass]=\"control.class\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matChipInputAddOnBlur]=\"addOnBlur\"\n             (matChipInputTokenEnd)=\"add($event)\"\n             [required]=\"formGroup.get(control.formControlName)?.errors !== null && formGroup.get(control.formControlName)?.errors?.['required']\"\n             (keyup.enter)=\"keyboardEnterEvent($event)\">\n\n    </mat-chip-grid>\n  </mat-form-field>\n\n  <mat-chip-listbox aria-label=\"Chips selection\" *ngSwitchDefault>\n    <mat-chip color=\"{{control.color}}\" selected>{{control.label}}</mat-chip>\n  </mat-chip-listbox>\n\n\n  <mat-chip-set class=\"chip-list\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\"\n                *ngSwitchCase=\"'dragDrop'\" class=\"example-chip\">\n    <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let option of control?.options\">\n      {{option?.value}}\n    </mat-chip>\n  </mat-chip-set>\n\n</ng-container>", styles: [".chip-list{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i5.FormBuilder }]; }, propDecorators: { control: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], chipAutoCompleteInput: [{
+                type: ViewChild,
+                args: ['chipAutoCompleteInput']
+            }], chipTextInput: [{
+                type: ViewChild,
+                args: ['chipTextInput']
+            }], matAutocomplete: [{
+                type: ViewChild,
+                args: ['auto']
+            }] } });
+
+class ButtonComponent {
+    constructor() {
+        this.btnClick = new EventEmitter();
+    }
+    childBtnClick() {
+        this.btnClick.emit("Button Click Event");
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: ButtonComponent, selector: "falcon-button", inputs: { control: "control", formGroup: "formGroup" }, outputs: { btnClick: "btnClick" }, ngImport: i0, template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <ng-container [ngSwitch]=\"control.appearance\">\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [color]=\"control.color\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" mat-button *ngSwitchCase=\"0\">\n            <mat-icon *ngIf=\"control?.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-raised-button *ngSwitchCase=\"1\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-stroked-button *ngSwitchCase=\"2\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-flat-button *ngSwitchCase=\"3\">\n            <mat-icon *ngIf=\"control.suffix.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-icon-button [attr.aria-label]=\"control.label\" *ngSwitchCase=\"4\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"5\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-mini-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"6\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <a mat-stroked-button *ngSwitchCase=\"7\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" routerLink=\"[]\">{{control.label}}</a>\n        <a mat-stroked-button *ngSwitchCase=\"8\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\"\n            href=\"{{control.value}}\">{{control.label}}</a>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1$6.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-button', template: "<div [ngStyle]=\"control.style\" [ngClass]=\"control.class\">\n    <ng-container [ngSwitch]=\"control.appearance\">\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [color]=\"control.color\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" mat-button *ngSwitchCase=\"0\">\n            <mat-icon *ngIf=\"control?.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-raised-button *ngSwitchCase=\"1\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-stroked-button *ngSwitchCase=\"2\">\n            <mat-icon *ngIf=\"control.suffix?.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-flat-button *ngSwitchCase=\"3\">\n            <mat-icon *ngIf=\"control.suffix.isIcon\" style=\"margin-bottom: 1px;\">\n                {{control.suffix.text}}</mat-icon>&nbsp;{{control.label}}\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\"\n            mat-icon-button [attr.aria-label]=\"control.label\" *ngSwitchCase=\"4\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"5\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <button [disabled]=\"control.disabled\" (click)=\"childBtnClick()\"\n            [type]=\"control.type\" [ngClass]=\"control.class\"\n            [color]=\"control.color\" [ngStyle]=\"control.style\" mat-mini-fab\n            [attr.aria-label]=\"control.label\" *ngSwitchCase=\"6\">\n            <mat-icon>{{control.label}}</mat-icon>\n        </button>\n        <a mat-stroked-button *ngSwitchCase=\"7\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\" routerLink=\"[]\">{{control.label}}</a>\n        <a mat-stroked-button *ngSwitchCase=\"8\" [ngClass]=\"control.class\"\n            [ngStyle]=\"control.style\"\n            href=\"{{control.value}}\">{{control.label}}</a>\n    </ng-container>\n</div>" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], btnClick: [{
+                type: Output
+            }] } });
+
+class RichTextEditorComponent {
+}
+RichTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RichTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: RichTextEditorComponent, selector: "lib-rich-text-editor", ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <mat-label>{{control.label}}</mat-label>\n  <angular-editor [formControlName]=\"control.formControlName\" [config]=\"control.editorProperty\">\n  </angular-editor>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</ng-container>", 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: "15.0.1", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-rich-text-editor', template: "<ng-container [formGroup]=\"formGroup\">\n  <mat-label>{{control.label}}</mat-label>\n  <angular-editor [formControlName]=\"control.formControlName\" [config]=\"control.editorProperty\">\n  </angular-editor>\n  <mat-hint>{{control.hint.text}}</mat-hint>\n  <ng-container *ngFor=\"let validation of control.validations;\" ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"formGroup.get(control.formControlName)?.hasError(validation.name)\">{{validation.message}}\n    </mat-error>\n  </ng-container>\n</ng-container>" }]
+        }] });
+
+class Constant {
+}
+Constant.ComponentMapper = [
+    TextboxComponent,
+    TextareaComponent,
+    SelectComponent,
+    DatePickerComponent,
+    RadioComponent,
+    CheckboxComponent,
+    ButtonComponent,
+    SlideToggleComponent,
+    SliderComponent,
+    ButtonToggleComponent,
+    AutoCompleteComponent,
+    ChipComponent,
+    RichTextEditorComponent,
+    //DividerComponent,
+];
+
+class ReactiveFieldDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        if (this.control !== undefined) {
+            this.componentRef = this.viewContainerRef.createComponent(Constant.ComponentMapper[this.control.controlType]);
+            this.componentRef.instance.control = this.control;
+            this.componentRef.instance.formGroup = this.formGroup;
+        }
+    }
+}
+ReactiveFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ReactiveFieldDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ReactiveFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: { control: "control", formGroup: "formGroup" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ReactiveFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[reactiveField]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { control: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }] } });
+
+class ControlBuilderComponent {
+}
+ControlBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ControlBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ControlBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: ControlBuilderComponent, selector: "control-builder", inputs: { layout: "layout", formGroup: "formGroup" }, ngImport: i0, template: "<div [class]=\"layout.class\">\n  <ng-container *ngFor=\"let control of layout.baseControls\">\n    <ng-container reactiveField [control]=\"control\" [formGroup]=\"formGroup\"></ng-container>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ReactiveFieldDirective, selector: "[reactiveField]", inputs: ["control", "formGroup"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ControlBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'control-builder', template: "<div [class]=\"layout.class\">\n  <ng-container *ngFor=\"let control of layout.baseControls\">\n    <ng-container reactiveField [control]=\"control\" [formGroup]=\"formGroup\"></ng-container>\n  </ng-container>\n</div>" }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }] } });
+
+class EnvironmentViewModel {
+}
+
+class IGenericHttpClient {
+}
+IGenericHttpClient.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: IGenericHttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+IGenericHttpClient.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: IGenericHttpClient });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: IGenericHttpClient, decorators: [{
+            type: Injectable
+        }] });
+
+class LoggerService {
+    constructor() {
+        this.initialized = false;
+        this._level = "Warnings" /* LoggingLevel.Warnings */;
+    }
+    async initialize(appSettings) {
+        if (this.initialized)
+            return;
+        this._level = appSettings.loggingLevel;
+        this.initialized = true;
+    }
+    log(message, level = "Warnings" /* LoggingLevel.Warnings */, ...optionalParams) {
+        if (this.shouldLog(level)) {
+            switch (level) {
+                case "Errors" /* LoggingLevel.Errors */:
+                    console.error(message, optionalParams);
+                    break;
+                case "Warnings" /* LoggingLevel.Warnings */:
+                    console.warn(message, optionalParams);
+                    break;
+                case "Info" /* LoggingLevel.Info */:
+                    console.info(message, optionalParams);
+                    break;
+                default:
+                    console.debug(message, optionalParams);
+            }
+        }
+    }
+    shouldLog(level) {
+        if (this._level === "None" /* LoggingLevel.None */) {
+            return false;
+        }
+        else if (this._level === "Errors" /* LoggingLevel.Errors */) {
+            return level === "Errors" /* LoggingLevel.Errors */;
+        }
+        else if (this._level === "Warnings" /* LoggingLevel.Warnings */) {
+            return level === "Errors" /* LoggingLevel.Errors */ || level === "Warnings" /* LoggingLevel.Warnings */;
+        }
+        else if (this._level === "Info" /* LoggingLevel.Info */) {
+            return level === "Errors" /* LoggingLevel.Errors */ || level === "Warnings" /* LoggingLevel.Warnings */ || level === "Info" /* LoggingLevel.Info */;
+        }
+        else {
+            return true;
+        }
+    }
+    error(message, ...optionalParams) {
+        this.log(message, "Errors" /* LoggingLevel.Errors */, optionalParams);
+    }
+    warning(message, ...optionalParams) {
+        this.log(message, "Warnings" /* LoggingLevel.Warnings */, optionalParams);
+    }
+    info(message, ...optionalParams) {
+        this.log(message, "Info" /* LoggingLevel.Info */, optionalParams);
+    }
+    verbose(message, ...optionalParams) {
+        this.log(message, "Verbose" /* LoggingLevel.Verbose */, optionalParams);
+    }
+}
+LoggerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoggerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoggerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoggerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+function loggerServiceFactory(loggerService, appSettings) {
+    return async () => {
+        appSettings.isServiceReady.subscribe(item => {
+            if (item)
+                loggerService.initialize(appSettings.getAppsettingValue());
+        });
+    };
+}
+;
+
+class GenericHttpClient {
+    constructor(httpClient, environment, _snackBar, logger) {
+        this.httpClient = httpClient;
+        this.environment = environment;
+        this._snackBar = _snackBar;
+        this.logger = logger;
+        this.snackBarViewModel = {};
+        this.isHttpError = false;
+    }
+    /**
+    * @description
+    * Generic Http GET method to Get the response and bind to the view model
+    * @param {string} destinationUrl endPoint it doesn't need / in front of the end point.
+    * @param {IRequestOptions} options options of the request like headers, body, etc.
+    * @returns {Observable<T>}
+    * @usageNotes
+    * The following snippet shows how to use this method
+    * ```ts
+    *    this.genericHttpService.Get("get_url").subscribe(data => {
+    *        console.log('success');
+    *      }, error => {
+    *      console.log(error);
+    *      });
+    * ```
+  */
+    get(destinationUrl, options) {
+        return this.request("GET" /* HttpMethod.Get */, destinationUrl, options);
+    }
+    /**
+      * @description
+      * Generic Http post method to post the view model and bind the return view model
+      * @param {string} destinationUrl endPoint it doesn't need / in front of the end point.
+      * @param {IRequestOptions} options options of the request like headers, body, etc.
+      * @returns {Observable<T>}
+      * @usageNotes
+      * The following snippet shows how to use this method
+      * ```ts
+      *    this.genericHttpClientService.Post(post-url,post-view-model).subscribe(item => {
+      *        console.log(item);
+      *      },
+      *      err => {
+      *        console.log(err);
+      *      });
+      * ```
+    */
+    post(destinationUrl, options) {
+        return this.request("POST" /* HttpMethod.Post */, destinationUrl, options);
+    }
+    /**
+      * @description
+      * Generic Http Put method to post the view model and bind the return view model
+      * @param {string} destinationUrl endPoint it doesn't need / in front of the end point.
+      * @param {IRequestOptions} options options of the request like headers, body, etc.
+      * @returns {Observable<T>}
+      * @usageNotes
+      * The following snippet shows how to use this method
+      * ```ts
+      *    this.genericHttpClientService.Put(post-url, post-view-model).subscribe(item => {
+      *        console.log(item);
+      *      },
+      *      err => {
+      *        console.log(err);
+      *      });
+      * ```
+    */
+    put(destinationUrl, options) {
+        return this.request("PUT" /* HttpMethod.Put */, destinationUrl, options);
+    }
+    /**
+        * @description
+        * Generic Http post method to post the view model and bind the return view model
+        * @param {string} destinationUrl endPoint it doesn't need / in front of the end point.
+        * @param {IRequestOptions} options options of the request like headers, body, etc.
+        * @returns {Observable<T>}
+        * @usageNotes
+        * The following snippet shows how to use this method
+        * ```ts
+        *    this.genericHttpClientService.Post(post-url,post-view-model).subscribe(item => {
+        *        console.log(item);
+        *      },
+        *      err => {
+        *        console.log(err);
+        *      });
+        * ```
+      */
+    patch(destinationUrl, options) {
+        return this.request("PATCH" /* HttpMethod.Patch */, destinationUrl, options);
+    }
+    /**
+      * @description
+      * Generic Http Delete method to Delete the item and bind the return view model
+      * @param {string} destinationUrl endPoint it doesn't need / in front of the end point.
+      * @param {IRequestOptions} options options of the request like headers, body, etc.
+      * @returns {Observable<T>}
+      * @usageNotes
+      * The following snippet shows how to use this method
+      * ```ts
+      *    this.genericHttpClientService.Delete(this.deleteUserUrl).subscribe(item => {
+      *         console.log('success');
+      *      }, error => {
+      *        console.log(error);
+      *      });
+      * ```
+    */
+    delete(destinationUrl, options) {
+        return this.request("DELETE" /* HttpMethod.Delete */, destinationUrl, options);
+    }
+    /**
+        * @description
+        * Http request method to accept different method type and params
+        * @param {string} method Http methods - GET, POST, PUT, DELETE.
+        * @param {string} destinationUrl endPoint it doesn't need / in front of the end point.
+        * @param {IRequestOptions} options options of the request like headers, body, etc.
+        * @returns {Observable<T>}
+        * @usageNotes
+        * The following snippet shows how to use this method
+        * ```ts
+        *    this.request<T>(HttpMethod.Delete, destinationUrl, options);
+        * ```
+      */
+    request(method, url, options) {
+        return Observable.create((observer) => {
+            let destinationUrl = '';
+            if (this.environment.baseUrl != undefined)
+                destinationUrl = (this.environment.baseUrl) + url;
+            else
+                destinationUrl = url;
+            this.httpClient.request(new HttpRequest(method, destinationUrl, options)).subscribe((response) => {
+                const responsTye = response;
+                switch (responsTye.type) {
+                    case HttpEventType.Sent:
+                        this.logger.info('Http Client : Sent ->', 'Request sent!');
+                        break;
+                    case HttpEventType.ResponseHeader:
+                        this.logger.info('Http Client : ResponseHeader ->', 'Response header received!');
+                        break;
+                    case HttpEventType.DownloadProgress:
+                        const kbLoaded = Math.round(responsTye.loaded / 1024);
+                        this.logger.info('Http Client : DownloadProgress ->', `Download in progress! ${kbLoaded}Kb loaded`);
+                        break;
+                    case HttpEventType.Response:
+                        observer.next(response.body);
+                        this.logger.info('Http Client : Response -> 😺 Done!', responsTye.body);
+                }
+            }, (error) => {
+                switch (error.status) {
+                    case 403 /* 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 */:
+                        this.snackBarViewModel.messageText = 'Server cannot or will not process the request.';
+                        this.snackBarViewModel.actionText = 'Bad Request';
+                        this.isHttpError = true;
+                        break;
+                    case 401 /* 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 */:
+                        this.snackBarViewModel.messageText = 'Server encountered an unexpected condition.';
+                        this.snackBarViewModel.actionText = 'Internal server error';
+                        this.isHttpError = true;
+                        break;
+                    case 0:
+                        this.snackBarViewModel.messageText = 'Not connected to the service.';
+                        this.snackBarViewModel.actionText = 'Service not available';
+                        this.isHttpError = true;
+                        break;
+                }
+                observer.error(error);
+                if ((this.environment.snackBarEnable != undefined && this.environment.snackBarEnable) && this.isHttpError)
+                    this._snackBar.open(this.snackBarViewModel.messageText, this.snackBarViewModel.actionText);
+            });
+        });
+    }
+}
+GenericHttpClient.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericHttpClient, deps: [{ token: i1$7.HttpClient }, { token: EnvironmentViewModel }, { token: i3$4.MatSnackBar }, { token: LoggerService }], target: i0.ɵɵFactoryTarget.Injectable });
+GenericHttpClient.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericHttpClient, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericHttpClient, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$7.HttpClient }, { type: EnvironmentViewModel }, { type: i3$4.MatSnackBar }, { type: LoggerService }]; } });
+
+class AppSettingService {
+    constructor(http, logger) {
+        this.http = http;
+        this.logger = logger;
+        this.initialized = false;
+        this.isServiceReady = new Subject();
+        this.listeners = {};
+        this.eventsSubject = new Subject();
+        this.events = from(this.eventsSubject);
+        this.events.subscribe(({ name, args }) => {
+            if (this.listeners[name]) {
+                for (let listener of this.listeners[name]) {
+                    listener(...args);
+                }
+            }
+        });
+    }
+    async load() {
+        if (this.initialized)
+            return;
+        let data = await this.http.get('assets/appsetting.json').toPromise();
+        this.appSettings = data;
+        this.initialized = true;
+        this.isServiceReady.next(this.initialized);
+        this.logger.info("[AppSettingService] load --> isServiceReady", this.initialized);
+    }
+    on(name, listener) {
+        if (!this.listeners[name]) {
+            this.listeners[name] = [];
+        }
+        this.listeners[name].push(listener);
+    }
+    getAppsettingValue() {
+        return this.appSettings ? this.appSettings : null;
+    }
+}
+AppSettingService.APP_SETTINGS_LOADED = "APP_SETTINGS_LOADED";
+AppSettingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppSettingService, deps: [{ token: i1$7.HttpClient }, { token: LoggerService }], target: i0.ɵɵFactoryTarget.Injectable });
+AppSettingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppSettingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppSettingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$7.HttpClient }, { type: LoggerService }]; } });
+function appSettingsFactory(appSettings) {
+    return async () => await appSettings.load();
+}
+;
+
+class TokenHelperService {
+    constructor() { }
+    getTokenExpirationDate(dataIdToken) {
+        if (!dataIdToken.hasOwnProperty('exp')) {
+            return new Date();
+        }
+        const date = new Date(0); // The 0 here is the key, which sets the date to the epoch
+        date.setUTCSeconds(dataIdToken.exp);
+        return date;
+    }
+    getPayloadFromToken(token, encode) {
+        let data = {};
+        if (typeof token !== 'undefined') {
+            const encoded = token.split('.')[1];
+            if (encode) {
+                return encoded;
+            }
+            data = JSON.parse(this.urlBase64Decode(encoded));
+        }
+        return data;
+    }
+    getHeaderFromToken(token, encode) {
+        let data = {};
+        if (typeof token !== 'undefined') {
+            const encoded = token.split('.')[0];
+            if (encode) {
+                return encoded;
+            }
+            data = JSON.parse(this.urlBase64Decode(encoded));
+        }
+        return data;
+    }
+    getSignatureFromToken(token, encode) {
+        let data = {};
+        if (typeof token !== 'undefined') {
+            const encoded = token.split('.')[2];
+            if (encode) {
+                return encoded;
+            }
+            data = JSON.parse(this.urlBase64Decode(encoded));
+        }
+        return data;
+    }
+    urlBase64Decode(str) {
+        let output = str.replace('-', '+').replace('_', '/');
+        switch (output.length % 4) {
+            case 0:
+                break;
+            case 2:
+                output += '==';
+                break;
+            case 3:
+                output += '=';
+                break;
+            default:
+                throw Error('Illegal base64url string!');
+        }
+        return window.atob(output);
+    }
+}
+TokenHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TokenHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TokenHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TokenHelperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TokenHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AuthService {
+    constructor(logger, tokenHelperService) {
+        this.logger = logger;
+        this.tokenHelperService = tokenHelperService;
+        this.initialized = false;
+        this.signingOut = false;
+    }
+    async initialize(environment) {
+        if (this.initialized)
+            return;
+        this.settings = this.getClientSettings(environment);
+        this.userManager = new UserManager(this.settings);
+        this.userManager.events.addUserLoaded(user => {
+            this.user = user;
+        });
+        this.userManager.events.addAccessTokenExpiring(() => {
+            this.logger.info("IdSvr token expiring " + new Date().toLocaleString());
+        });
+        this.userManager.events.addAccessTokenExpired(() => {
+            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.logout(false);
+        });
+        this.userManager.events.addUserLoaded(user => {
+            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());
+            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.logout(false);
+        });
+        this.user = await this.userManager.getUser();
+        this.initialized = true;
+    }
+    isLoggedIn() {
+        return this.user != null && !this.user.expired;
+    }
+    getUser() {
+        return this.userManager.getUser();
+    }
+    getProfile() {
+        return this.user.profile;
+    }
+    getClaims() {
+        return this.user.profile;
+    }
+    getAuthorizationHeaderValue() {
+        if (this.user != null)
+            return `${this.user.token_type} ${this.user.access_token}`;
+        return '';
+    }
+    getAccessToken() {
+        return this.accessToken || this.tokenHelperService.getPayloadFromToken(this.user.access_token, false);
+        ;
+    }
+    async 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);
+            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();
+    }
+    renewToken() {
+        return this.userManager.signinSilent();
+    }
+    logout(signoutRedirect) {
+        if (signoutRedirect === undefined || signoutRedirect !== false) {
+            this.signingOut = true;
+            signoutRedirect = true;
+        }
+        return this.userManager.signoutRedirect();
+    }
+    getClientSettings(environment) {
+        return {
+            authority: environment?.openID?.authority,
+            client_id: environment?.openID?.client_id,
+            redirect_uri: environment?.openID?.redirect_uri,
+            post_logout_redirect_uri: environment?.openID?.post_logout_redirect_uri,
+            response_type: environment?.openID?.response_type,
+            scope: environment?.openID?.scope,
+            filterProtocolClaims: environment?.openID?.filterProtocolClaims,
+            loadUserInfo: true,
+            monitorSession: true,
+            silent_redirect_uri: environment?.openID?.silent_redirect_uri,
+            automaticSilentRenew: environment?.openID?.automaticSilentRenew,
+            accessTokenExpiringNotificationTime: 20,
+            checkSessionInterval: 2000,
+            silentRequestTimeout: 20000,
+        };
+    }
+    async isServiceReady() {
+        return new Promise(async (resolve, reject) => {
+            if (this.initialized) {
+                this.logger.info("[AuthService] isServiceReady", true);
+                resolve(true);
+            }
+            else {
+                this.logger.info("[AuthService] isServiceReady", false);
+                reject(false);
+            }
+        });
+    }
+}
+AuthService.USER_LOADED_EVENT = "USER_LOADED";
+AuthService.USER_UNLOADED_EVENT = "USER_UNLOADED";
+AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AuthService, deps: [{ token: LoggerService }, { token: TokenHelperService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AuthService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: LoggerService }, { type: TokenHelperService }]; } });
+function authServiceFactory(authService, appSettings, environment) {
+    return async () => {
+        appSettings.isServiceReady.subscribe(item => {
+            if (item)
+                authService.initialize(environment);
+        });
+    };
+}
+;
+
+class DialogComponent {
+    constructor(data) {
+        this.data = data;
+    }
+}
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: DialogComponent, selector: "lib-dialog", ngImport: i0, template: "<span mat-dialog-title>{{data.title}}</span>\n<mat-divider></mat-divider>\n<div mat-dialog-content>\n  <span class=\"mat-h3\">{{data.bodyMessage}}</span>\n</div>\n<mat-divider></mat-divider>\n<div mat-dialog-actions>\n    <button mat-raised-button [mat-dialog-close]=\"\" cdkFocusInitial>{{data.cancelBtnText}}</button>\n    <button mat-raised-button [color]=\"'warn'\" [mat-dialog-close]=\"data\">\n      {{data.mainbtnText}}\n    </button>\n  </div>\n", styles: [".mat-mdc-dialog-actions{justify-content:end!important}\n"], dependencies: [{ kind: "component", type: i1$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dialog', template: "<span mat-dialog-title>{{data.title}}</span>\n<mat-divider></mat-divider>\n<div mat-dialog-content>\n  <span class=\"mat-h3\">{{data.bodyMessage}}</span>\n</div>\n<mat-divider></mat-divider>\n<div mat-dialog-actions>\n    <button mat-raised-button [mat-dialog-close]=\"\" cdkFocusInitial>{{data.cancelBtnText}}</button>\n    <button mat-raised-button [color]=\"'warn'\" [mat-dialog-close]=\"data\">\n      {{data.mainbtnText}}\n    </button>\n  </div>\n", styles: [".mat-mdc-dialog-actions{justify-content:end!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class SnackBarComponent {
+}
+SnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: SnackBarComponent, selector: "lib-snack-bar", ngImport: i0, template: "<span>Pizza party!!! \uD83C\uDF55</span>", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-snack-bar', template: "<span>Pizza party!!! \uD83C\uDF55</span>" }]
+        }] });
+
+class BottomSheetComponent {
+    constructor(_bottomSheetRef, data) {
+        this._bottomSheetRef = _bottomSheetRef;
+        this.data = data;
+    }
+    ngOnInit() {
+    }
+    click(event, item) {
+        this._bottomSheetRef.dismiss(item);
+        event.preventDefault();
+    }
+}
+BottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BottomSheetComponent, deps: [{ token: i1$8.MatBottomSheetRef }, { token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component });
+BottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: BottomSheetComponent, selector: "lib-bottom-sheet", ngImport: i0, template: "<mat-nav-list>\n  <ng-container *ngFor=\"let item of data\">\n    <a [href]=\"item.link\" mat-list-item (click)=\"click($event,item)\">\n      <span matListItemTitle>{{item.levelOneText}}</span>\n      <span matLine>{{item.levelTwoText}}</span>\n    </a>\n  </ng-container>\n\n</mat-nav-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i3$6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bottom-sheet', template: "<mat-nav-list>\n  <ng-container *ngFor=\"let item of data\">\n    <a [href]=\"item.link\" mat-list-item (click)=\"click($event,item)\">\n      <span matListItemTitle>{{item.levelOneText}}</span>\n      <span matLine>{{item.levelTwoText}}</span>\n    </a>\n  </ng-container>\n\n</mat-nav-list>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$8.MatBottomSheetRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_BOTTOM_SHEET_DATA]
+                }] }]; } });
+
+class ProgressBarComponent {
+}
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: ProgressBarComponent, selector: "falcon-progress-bar", inputs: { bufferValue: "bufferValue", color: "color", mode: "mode", value: "value" }, ngImport: i0, template: "<mat-progress-bar [mode]=\"mode\" [bufferValue]=\"bufferValue\" [color]=\"color\" [value]=\"value\"></mat-progress-bar>", styles: [""], dependencies: [{ kind: "component", type: i1$9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-progress-bar', template: "<mat-progress-bar [mode]=\"mode\" [bufferValue]=\"bufferValue\" [color]=\"color\" [value]=\"value\"></mat-progress-bar>" }]
+        }], propDecorators: { bufferValue: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class ProgressSpinnerComponent {
+    constructor() {
+        this.diameter = 100;
+        this.strokeWidth = 5;
+    }
+}
+ProgressSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: ProgressSpinnerComponent, selector: "falcon-progress-spinner", inputs: { diameter: "diameter", color: "color", mode: "mode", value: "value", strokeWidth: "strokeWidth" }, ngImport: i0, template: "<mat-progress-spinner\n  [color]=\"color\"\n  [mode]=\"mode\"\n  [diameter]=\"diameter\"\n[strokeWidth]=\"strokeWidth\"\n  [value]=\"value\">\n</mat-progress-spinner>", styles: [""], dependencies: [{ kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-progress-spinner', template: "<mat-progress-spinner\n  [color]=\"color\"\n  [mode]=\"mode\"\n  [diameter]=\"diameter\"\n[strokeWidth]=\"strokeWidth\"\n  [value]=\"value\">\n</mat-progress-spinner>" }]
+        }], propDecorators: { diameter: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }] } });
+
+class TableComponent {
+    constructor() {
+        this.pageEvent = new EventEmitter();
+        this.tableActionRowEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        const cols = this.matTableConfig.columns?.map((c) => c.columnDef);
+        if (this.displayedColumns !== undefined)
+            this.displayedColumns.unshift(...cols);
+        else
+            this.displayedColumns = cols;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.matTableConfig.dataSource = new MatTableDataSource(this.matTableConfig.dataSource);
+            this.matTableConfig.dataSource.paginator = this.paginator;
+            this.matTableConfig.dataSource.sort = this.sort;
+        });
+    }
+    applyFilter(event) {
+        const filterValue = event.target.value;
+        this.matTableConfig.dataSource.filter = filterValue
+            .trim()
+            .toLowerCase();
+        if (this.matTableConfig.dataSource.paginator) {
+            this.matTableConfig.dataSource.paginator.firstPage();
+        }
+    }
+    page(e) {
+        this.pageEvent.emit(e);
+    }
+    tableAction($item, action) {
+        const item = Object.assign($item, { action: action });
+        this.tableActionRowEvent.next(item);
+    }
+}
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: TableComponent, selector: "falcon-table", inputs: { matTableConfig: "matTableConfig", displayedColumns: "displayedColumns" }, outputs: { pageEvent: "pageEvent", tableActionRowEvent: "tableActionRowEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"flex justify-end\">\n  <mat-form-field *ngIf=\"matTableConfig?.filter\">\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]", inputs: ["disabled", "disableRipple", "color"], 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", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], 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]", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-table', template: "<div class=\"flex justify-end\">\n  <mat-form-field *ngIf=\"matTableConfig?.filter\">\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"] }]
+        }], propDecorators: { matTableConfig: [{
+                type: Input
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: false }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort, { static: false }]
+            }], pageEvent: [{
+                type: Output
+            }], displayedColumns: [{
+                type: Input
+            }], tableActionRowEvent: [{
+                type: Output
+            }] } });
+
+class PaginationComponent {
+    constructor() {
+        this.totalPage = 10;
+        this.pageSize = 10;
+        this.paginationEvent = new EventEmitter();
+        this.paginationSize = new Array(10);
+        this.preDisable = true;
+        this.nextDisable = false;
+        this.currentPage = 1;
+        this.firstLoad = false;
+    }
+    ngOnInit() {
+        this.firstLoad = true;
+        this.paginationSize = [
+            ...Array.from({
+                length: this.totalPage < this.pageSize
+                    ? this.totalPage
+                    : this.pageSize,
+            }, (_, i) => i + 1),
+        ];
+        if (this.paginationSize.length == this.totalPage)
+            this.nextDisable = true;
+    }
+    receiveBtnChange($event) {
+        this.firstLoad = false;
+        this.currentPage = $event;
+        if ($event == this.totalPage)
+            this.nextDisable = true;
+        else if ($event == 1) {
+            this.nextDisable = false;
+            this.preDisable = true;
+        }
+        else {
+            this.nextDisable = false;
+            this.preDisable = false;
+        }
+        if ($event === 'previous') {
+            this.preDisable = true;
+        }
+        else if ($event === 'next') {
+        }
+        else {
+            if (this.totalPage <= this.pageSize) {
+                this.paginationSize = [
+                    ...Array.from({ length: this.totalPage }, (_, i) => i + 1),
+                ];
+            }
+            else {
+                // start
+                if ($event < 6) {
+                    this.start = 1;
+                }
+                else {
+                    if ($event + 5 < this.totalPage) {
+                        this.start = $event - 5;
+                    }
+                    else {
+                        this.start = this.totalPage - this.pageSize;
+                    }
+                }
+                //End
+                if ($event + 5 < this.totalPage) {
+                    this.end = this.start + 9;
+                }
+                else {
+                    this.end = this.totalPage;
+                }
+                this.paginationSize = this.range(this.start, this.end);
+            }
+        }
+        this.paginationEvent.emit($event);
+    }
+    range(start, end) {
+        return Array(Math.abs(start - end) + 1)
+            .fill(start)
+            .map((v, i) => v + i * (start > end ? -1 : 1));
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: PaginationComponent, selector: "falcon-pagination", inputs: { totalPage: "totalPage", pageSize: "pageSize" }, outputs: { paginationEvent: "paginationEvent" }, ngImport: i0, template: "<div class=\"flex justify-between\">\n    <span class=\"mat-h3\">Page {{currentPage}} of {{totalPage}}</span>\n    <mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n        <mat-button-toggle value=\"bold\" *ngFor=\"let item of paginationSize; index as i;\"\n            (change)=\"receiveBtnChange(item)\" [checked]=\"firstLoad && i ==0\">\n            &nbsp;&nbsp; <span class=\"mat-h3\">{{item}}</span>&nbsp;&nbsp;\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "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: "15.0.1", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'falcon-pagination', template: "<div class=\"flex justify-between\">\n    <span class=\"mat-h3\">Page {{currentPage}} of {{totalPage}}</span>\n    <mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n        <mat-button-toggle value=\"bold\" *ngFor=\"let item of paginationSize; index as i;\"\n            (change)=\"receiveBtnChange(item)\" [checked]=\"firstLoad && i ==0\">\n            &nbsp;&nbsp; <span class=\"mat-h3\">{{item}}</span>&nbsp;&nbsp;\n        </mat-button-toggle>\n    </mat-button-toggle-group>\n\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { totalPage: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], paginationEvent: [{
+                type: Output
+            }] } });
+
+class FalconCoreModule {
+    static forRoot(environment) {
+        return {
+            ngModule: FalconCoreModule,
+            providers: [
+                { provide: EnvironmentViewModel, useValue: environment },
+            ],
+        };
+    }
+}
+FalconCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FalconCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FalconCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FalconCoreModule, declarations: [TextboxComponent,
+        TextareaComponent,
+        SelectComponent,
+        ReactiveFieldDirective,
+        ControlBuilderComponent,
+        DatePickerComponent,
+        CheckboxComponent,
+        RadioComponent,
+        AutoCompleteComponent,
+        ButtonToggleComponent,
+        ChipComponent,
+        SliderComponent,
+        SlideToggleComponent,
+        ButtonComponent,
+        DialogComponent,
+        SnackBarComponent,
+        BottomSheetComponent,
+        ProgressBarComponent,
+        ProgressSpinnerComponent,
+        TableComponent,
+        PaginationComponent,
+        RichTextEditorComponent], imports: [AngularmaterialModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        AngularEditorModule], exports: [AngularmaterialModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ControlBuilderComponent,
+        RouterModule,
+        ProgressBarComponent,
+        ProgressSpinnerComponent,
+        ChipComponent,
+        PaginationComponent,
+        TableComponent,
+        AngularEditorModule,
+        ButtonComponent] });
+FalconCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FalconCoreModule, providers: [
+        provideHttpClient(withInterceptors([
+            (req, next) => {
+                // Get the auth token from the service.
+                const authToken = inject(AuthService).getAuthorizationHeaderValue();
+                inject(LoggerService).info("Auth bearer token ", authToken);
+                if (authToken) {
+                    req = req.clone({
+                        setHeaders: {
+                            'Content-Type': 'application/json',
+                            Authorization: authToken
+                        }
+                    });
+                }
+                return next(req);
+            },
+        ])),
+        { provide: IGenericHttpClient, useClass: GenericHttpClient },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: appSettingsFactory,
+            deps: [AppSettingService],
+            multi: true,
+        },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: authServiceFactory,
+            deps: [AuthService, AppSettingService, EnvironmentViewModel],
+            multi: true,
+        },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: loggerServiceFactory,
+            deps: [LoggerService, AppSettingService],
+            multi: true,
+        },
+        {
+            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+            useValue: { duration: 5000 },
+        },
+    ], imports: [AngularmaterialModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        AngularEditorModule, AngularmaterialModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        AngularEditorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FalconCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TextboxComponent,
+                        TextareaComponent,
+                        SelectComponent,
+                        ReactiveFieldDirective,
+                        ControlBuilderComponent,
+                        DatePickerComponent,
+                        CheckboxComponent,
+                        RadioComponent,
+                        AutoCompleteComponent,
+                        ButtonToggleComponent,
+                        ChipComponent,
+                        SliderComponent,
+                        SlideToggleComponent,
+                        ButtonComponent,
+                        DialogComponent,
+                        SnackBarComponent,
+                        BottomSheetComponent,
+                        ProgressBarComponent,
+                        ProgressSpinnerComponent,
+                        TableComponent,
+                        PaginationComponent,
+                        RichTextEditorComponent
+                    ],
+                    imports: [
+                        AngularmaterialModule,
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        AngularEditorModule,
+                    ],
+                    exports: [
+                        AngularmaterialModule,
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ControlBuilderComponent,
+                        RouterModule,
+                        ProgressBarComponent,
+                        ProgressSpinnerComponent,
+                        ChipComponent,
+                        PaginationComponent,
+                        TableComponent,
+                        AngularEditorModule,
+                        ButtonComponent,
+                    ],
+                    providers: [
+                        provideHttpClient(withInterceptors([
+                            (req, next) => {
+                                // Get the auth token from the service.
+                                const authToken = inject(AuthService).getAuthorizationHeaderValue();
+                                inject(LoggerService).info("Auth bearer token ", authToken);
+                                if (authToken) {
+                                    req = req.clone({
+                                        setHeaders: {
+                                            'Content-Type': 'application/json',
+                                            Authorization: authToken
+                                        }
+                                    });
+                                }
+                                return next(req);
+                            },
+                        ])),
+                        { provide: IGenericHttpClient, useClass: GenericHttpClient },
+                        {
+                            provide: APP_INITIALIZER,
+                            useFactory: appSettingsFactory,
+                            deps: [AppSettingService],
+                            multi: true,
+                        },
+                        {
+                            provide: APP_INITIALIZER,
+                            useFactory: authServiceFactory,
+                            deps: [AuthService, AppSettingService, EnvironmentViewModel],
+                            multi: true,
+                        },
+                        {
+                            provide: APP_INITIALIZER,
+                            useFactory: loggerServiceFactory,
+                            deps: [LoggerService, AppSettingService],
+                            multi: true,
+                        },
+                        {
+                            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+                            useValue: { duration: 5000 },
+                        },
+                    ],
+                }]
+        }] });
+
+class AuthGuardService {
+    constructor(authService) {
+        this.authService = authService;
+    }
+    canActivate(route, state) {
+        return new Promise(resolve => {
+            this.authService.isServiceReady().then(() => {
+                if (this.authService.isLoggedIn()) {
+                    resolve(true);
+                }
+                else {
+                    this.authService.startAuthentication(state.url);
+                    resolve(false);
+                }
+            });
+        });
+    }
+}
+AuthGuardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AuthGuardService, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthGuardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AuthGuardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AuthGuardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: AuthService }]; } });
+
+/**
+ * @description
+ * Class use for setting the control properties.
+ * @usageNotes
+ * ```ts
+ *       new Dropdown({
+ *        formControlName: 'brave',
+ *       label: 'Bravery Rating',
+ *       options: [
+ *         {key: 'solid',  value: 'Solid'},
+ *         {key: 'great',  value: 'Great'},
+ *         {key: 'good',   value: 'Good'},
+ *         {key: 'unproven', value: 'Unproven'}
+ *       ],
+ *       order: 3
+ * }),
+ ** ```
+ */
+class BaseControl {
+    constructor(options = {}) {
+        this.value = options.value;
+        this.formControlName = options.formControlName || '';
+        this.label = options.label || '';
+        this.labelPosition = options.labelPosition || 'before' || 'after';
+        this.order = options.order === undefined ? 1 : options.order;
+        this.controlType = options.controlType || 6 /* ControlType.Button */;
+        this.type = options.type || '';
+        this.disabled = options.disabled || false;
+        this.options = options.options || [];
+        this.validations = options.validations || [];
+        this.appearance = options.appearance || 'outline';
+        this.class = options.class || '';
+        this.style = options.style || {};
+        this.placeHolder = options.placeHolder || '';
+        this.floatLabel = options.floatLabel || 'auto';
+        this.hint = options.hint || {};
+        this.prefix = options.prefix || {};
+        this.suffix = options.suffix || {};
+        this.textAreaProperty =
+            options.textAreaProperty || {};
+        this.event = options.event || {};
+        this.selectProperty = options.selectProperty || {};
+        this.color = options.color || '';
+        this.sliderProperty = options.sliderProperty || {};
+        this.chipSelectedOptions = options.chipSelectedOptions || {};
+        this.editorProperty = options.editorProperty || {};
+        this.formArray = options.formArray || undefined;
+    }
+}
+
+class Select extends BaseControl {
+    constructor() {
+        super(...arguments);
+        this.controlType = 2 /* ControlType.Select */;
+    }
+}
+
+class Textarea extends BaseControl {
+    constructor() {
+        super(...arguments);
+        this.controlType = 1 /* ControlType.TextArea */;
+    }
+}
+
+class Textbox extends BaseControl {
+    constructor() {
+        super(...arguments);
+        this.controlType = 0 /* ControlType.TextBox */;
+    }
+}
+
+/**
+ * @description
+ * Base form component initialized to create form controls, set validation, submit.
+ *
+ * @usageNotes
+ * The following snippet shows how a component can implement this abstract class to
+ * define its own initialization method.
+ * ```ts
+ *  export class InputComponent extends BaseFormComponent<any> implements OnInit {
+ *     constructor(fb : FormBuilder) {
+ *        super(fb);
+ *        this.defineForm();
+ *    }
+ *    protected defineForm(): void {
+ *    }
+ *    ngOnInit(): void {
+ *      this.formGroup = this.createControls();
+ *    }
+ *    protected submitDatasource(model: any): Observable<any> {
+ *      return of(model);
+ *    }
+ * ```
+ */
+class BaseFormComponent {
+    constructor() {
+        this.dataSource = undefined;
+        this.showLoading = false;
+        this.fb = inject(FormBuilder);
+    }
+    /**
+     * @description
+     * Method evoke on when the form is submitted.
+     * @returns submitDatasource() method with form data if valid otherwise form invalid.
+     */
+    onSubmit() {
+        if (this.formGroup !== undefined && this.formGroup.valid) {
+            this.submitDataSource(this.formGroup.value);
+        }
+        else {
+            this.validateAllFormFields(this.formGroup);
+        }
+    }
+    /**
+     * @description
+     * Private method to validate all form controls before is form submited.
+     * @param formGroup Validate form group.
+     * @returns Groups of controls added to the form builder.
+     */
+    validateAllFormFields(formGroup) {
+        if (this.formGroup !== undefined)
+            this.formGroup.markAllAsTouched();
+    }
+    /**
+     * @description
+     * Create the reactive form controls
+     * @returns Groups of controls added to the form builder.
+     */
+    createControls() {
+        const group = this.fb.group({});
+        this.controlsConfig.baseControls.forEach((controls, index) => {
+            this.bindControl(controls, group, index);
+        });
+        return group;
+    }
+    /**
+     * @description
+     * Private method to bind the form control.
+     * @param controlConfig field to bind.
+     * @param group group to add.
+     * @param index index of the layout
+     */
+    bindControl(controlConfig, group, index) {
+        if (controlConfig.controlType === 6 /* ControlType.Button */)
+            return;
+        let control = null;
+        if (controlConfig.formArray !== undefined) {
+            control =
+                controlConfig.formArray.length > 0
+                    ? this.fb.array([
+                        this.createFormArrayGroup(controlConfig.formArray[controlConfig.formArray.length - 1].formArray),
+                    ])
+                    : this.fb.array([], this.bindValidations(controlConfig.validations || []));
+        }
+        else {
+            control = this.fb.control({
+                value: controlConfig.value,
+                disabled: controlConfig.disabled,
+            }, this.bindValidations(controlConfig.validations || []));
+        }
+        group.addControl(controlConfig.formControlName, control);
+    }
+    /**
+     * @description
+     * Private method to bind the validation to the form controls on form submit.
+     * @param validations Push the validation to the controls.
+     * @returns Validation.
+     */
+    bindValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach((valid) => {
+                validList.push(valid.validator);
+            });
+            return Validators.compose(validList);
+        }
+        return null;
+    }
+    /**
+     * Create an form array element
+     * @param layoutConfig layout of form array
+     * @returns Form array group
+     */
+    createFormArrayGroup(componentConfig) {
+        var formGroup = this.fb.group({});
+        componentConfig?.forEach((item, index) => {
+            var control = null;
+            if (item.formArray !== undefined) {
+                control =
+                    item.formArray.length > 0
+                        ? this.fb.array([
+                            this.createFormArrayGroup(item.formArray[item.formArray.length - 1].formArray),
+                        ], this.bindValidations(item.validations || []))
+                        : this.fb.array([], this.bindValidations(item.validations || []));
+            }
+            else {
+                control = this.fb.control({
+                    value: item.value,
+                    disabled: item.disabled,
+                }, this.bindValidations(item.validations || []));
+            }
+            formGroup.addControl(item.formControlName, control);
+        });
+        return formGroup;
+    }
+    /**
+     * @description
+     * Reset fild values to default or specify some value.
+     * @param defaultValues Specify the specific value to set to the controls.
+     * @returns void.
+     */
+    reset(defaultValues) {
+        this.formGroup.reset(defaultValues);
+    }
+    /**
+     * @description
+     * Reset specific fild Errors.
+     * @param name Name of the field to reset the error.
+     * @returns void.
+     */
+    resetFieldErrors(name) {
+        this.formGroup?.get(name)?.setErrors(null);
+    }
+    /**
+     * @description
+     * Get the controls value from the form.
+     * @returns Form controls values.
+     */
+    get value() {
+        return this.formGroup.value;
+    }
+    /**
+     * @description
+     * Updating parts of the data model.
+     * Use the patchValue() method to replace any properties defined in the object that have changed in the form model.
+     * @returns Form controls values.
+     * @param value The object that matches the structure of the group.
+     * @param options Configuration options that determine how the control propagates changes and
+     * emits events after the value is patched.
+     * `onlySelf`: When true, each change only affects this control and not its parent. Default is
+     * true.
+     * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges`
+     *  @usageNotes
+     * The following snippet shows how a component can implement this abstract class to
+     * define its own initialization method.
+     * ```ts
+     *   this.formGroup.patchValue({
+     *     name: 'Todd Motto',
+     *     event: {
+     *       title: 'AngularCamp 2016',
+     *       location: 'Barcelona, Spain'
+     *     }
+     *   });
+     * ```
+     */
+    patchValue(value, options) {
+        return this.formGroup.patchValue(value, options);
+    }
+    /**
+     * @description
+     * Updating parts of the data model.
+     * Use the setValue() method to set a new value for an individual control. The setValue() method strictly adheres to the structure of the form group and replaces the entire value for the control.
+     * @returns Form controls values.
+     * @param value The object that matches the structure of the group.
+     * @param options Configuration options that determine how the control propagates changes and
+     * emits events after the value is patched.
+     * `onlySelf`: When true, each change only affects this control and not its parent. Default is
+     * true.
+     * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
+     * `valueChanges`
+     *  @usageNotes
+     * The following snippet shows how a component can implement this abstract class to
+     * define its own initialization method.
+     * ```ts
+     *   this.formGroup.setValue({
+     *     name: 'Todd Motto',
+     *     event: {
+     *       title: 'AngularCamp 2016',
+     *       location: 'Barcelona, Spain'
+     *     }
+     *   });
+     * ```
+     */
+    setValue(value, options) {
+        return this.formGroup.setValue(value, options);
+    }
+    /**
+     * @description
+     * Dynamically remove the form control.
+     * @param index Index of item.
+     * @usageNotes
+     * The following snippet shows how to remove the form control from Froup Group
+     * ```ts
+     *    removeControl(1);
+     * ```
+     */
+    removeControl(layoutIndex, index) {
+        this.formGroup.removeControl(this.controlsConfig.baseControls[layoutIndex].formControlName);
+        this.controlsConfig.baseControls.splice(index, 1);
+    }
+}
+
+/*
+ * Public API Surface of falcon-core-module
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularmaterialModule, AppSettingService, AuthGuardService, AuthService, AutoCompleteComponent, BaseFormComponent, BottomSheetComponent, ButtonComponent, ButtonToggleComponent, CheckboxComponent, ChipComponent, Constant, ControlBuilderComponent, DatePickerComponent, DialogComponent, EnvironmentViewModel, FalconCoreModule, IGenericHttpClient, LoggerService, PaginationComponent, ProgressBarComponent, ProgressSpinnerComponent, RadioComponent, ReactiveFieldDirective, RichTextEditorComponent, Select, SelectComponent, SlideToggleComponent, SliderComponent, SnackBarComponent, TableComponent, Textarea, TextareaComponent, Textbox, TextboxComponent, appSettingsFactory, authServiceFactory, loggerServiceFactory };
+//# sourceMappingURL=falcon-ng-tailwind.mjs.map